Question

我想使用Enzyme测试我的ReactJS应用程序的状态。简单测试-如果状态会改变，则显示模态-但出现错误： ShallowWrapper::state() can only be called on class components 我的组件是类组件。

 class Component extends PureComponent<ComponentProps> {

  public state = {
    hasError: false,
  };

  public render() {
    const { hasError } = this.state;
    return (
      <>
        <Modal
          isOpen={hasError}
          type="error"
        />
        <button onClick={this.onBtnClik}
      </>
    );
  }

private onBtnClik = () => this.setState({ hasError: true})

 export default compose(
  withRouter,
  withStyles(styles),
  connect(mapStateToProps, mapDispatchToProps),
)(Component) as any;

如您所见，我有很多HOC，我无法测试我的状态。我找到了这篇文章： https://medium.com/c-hive/test-hocs-wrapped-component-with-jest-and-enzyme-e9155f80a217 但是：wrapper = shallow(shallow(<MyComponent />).get(0));仍然没有帮助我，所以我有点困惑，非常感谢您提供任何建议。

我的测试：

  it('should open Modal when error state is true', () => {
    const wrapper = shallow(shallow(<Component />).get(0));
    expect(wrapper.state('hasError')).toBe(true);
  });

Answer 1

在测试HOC组件时，您已使用dive（）调查enzyme's dive

wrapper.dive()

React-单元测试HOC的包装组件-测试状态

1 个答案: