Question

我目前正在使用带有打字脚本的react-native，并且正在努力通过开玩笑/酶来测试子组件。

我目前正在尝试将道具“ updateToDoInput”中的回调函数传递给我的InputBar组件，例如

render() {
    return (
      <View style={styles.container}>
        <Header Title="ToDo App" />
        <InputBar
          todosInput={this.state.todosInput}
          updateToDoInput={(updateInput: string) => this.setState({ todosInput: updateInput })}
        />
      </View>
    );
  }

为了测试，我有：

describe('<App /> Component', () => {
 it('renders <InputBar /> with props "todosInput" and "updateToDoInput"', () => {
  
  const wrapper = shallow(<App />);
  
    expect(wrapper
      .contains(<InputBar
        todosInput={wrapper.state("todosInput")}
        updateToDoInput={(updateInput: string) => wrapper.setState({ todosInput: updateInput })}
      />))
      .toEqual(true);
  });
});

测试失败并返回false。我认为我为“ updateToDoInput”道具编写的测试写错了。

我对测试还很陌生，如何在子组件中通过prop传递setState来测试一个函数？

PS。我也尝试使用console.log（wrapper.debug（））;我得到以下输出：

      <View style={{...}}>
        <Header Title="ToDo App" />
        <InputBar todosInput="" updateToDoInput={[Function: updateToDoInput]} />
      </View>

不确定这意味着什么，我们将不胜感激！

如何使用Jest / Enzyme测试子组件中的回调函数prop

0 个答案: