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

Question

我目前正在使用带有 typescript 的 react-native，并且正在努力使用 jest/enzyme 测试子组件。

我目前正在尝试测试道具“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”道具编写测试错误。

我对测试很陌生，如何测试一个在我的子组件中作为道具传递的 setState 的函数？

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

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

不知道这意味着什么，任何帮助将不胜感激！

标签： reactjstypescriptreact-nativejestjsenzyme