vendredi 22 mai 2020

React - unit testing HOC’s wrapped component - testing state

I want to test state of my ReactJS application using Enzyme. Simple test - if state will change, modal is showing up - but I get error: ShallowWrapper::state() can only be called on class components My component is class component.

 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;

As you see I have a lot of HOC's and I cannot test my state. I found this article: https://medium.com/c-hive/test-hocs-wrapped-component-with-jest-and-enzyme-e9155f80a217 but: wrapper = shallow(shallow(<MyComponent />).get(0)); still not helping me so I am a little confused and will be very grateful for any advice.

My test:

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

Aucun commentaire:

Enregistrer un commentaire