时间戳

首页 > 解决方案 > React - 单元测试 HOC 的包装组件 - 测试状态

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

问题描述

我想使用 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);
  });

标签： reactjsunit-testingtestingenzymehigher-order-components

解决方案

兄弟你在测试 HOC 组件时使用了潜水（）查看酶的潜水

wrapper.dive()

推荐阅读