reactjs - 在 componentDidMount 中获取数据后如何测试 React 组件？

Question

我有一个有条件渲染的 react 组件(如果获取数据则渲染，否则返回 null)，我想用 jest &ase 测试它。我遇到的问题是我想测试类中的方法之一，但 .instance() 不断返回 null，因此它不允许我测试该实例。

我的代码看起来像这样

export default class MyComponent extends React.Component<Props, State> {
    componentDidMount() {
        this.props.fetchData.then(() => 
            this.setState({ loaded: true });
        );
    }

    methodThatIWantToTest() {
        //do some stuff here
    }

    render() {
        if (this.loaded) {
            // render stuff here
        } else {
            return null;
        }
    }
}

在测试中我想测试

describe('myComponent', () => {
   it('should do some stuff', () => {
      const shallowWrapper = shallow(<MyComponent {...props}/>);
      const method = shallowWrapper.instance().methodThatIWantToTest();
      ....such and such

   });
});

但看起来 MyComponent 仅返回 null，因此 shallowWrapper.instance() 也返回 null。我尝试了 shallowWrapper.update() 和许多其他东西，但似乎它根本不想渲染..我如何等待我的组件更新，然后启动 expect 声明？

有人遇到过和我类似的问题并且知道如何解决这个问题吗？

Answer 1

它是渲染结果，而不是null的实例。 shallowWrapper.instance() 是组件类的实例，对于有状态组件，它不能为 null。如the reference状态:

Returns (React 16.x)

ReactComponent: The stateful React component instance.

null: If stateless React component was wrapped.

虽然shallowWrapper.html()最初确实是null。

原代码有错误，应该是this.state.loaded，而不是this.loaded:

MyComponent extends React.Component {
  state = { loaded: false };

  componentDidMount() {
    this.props.fetchData.then(() => {
          this.setState({ loaded: true });
    });
  }

  methodThatIWantToTest() {
      //do some stuff here
  }

  render() {
      if (this.state.loaded) {
          return <p>hi</p>;
      } else {
          return null;
      }
  }
}

componentDidMount 和 methodThatIWantToTest 最好应被视为不同的单元。它们属于不同的测试。如果在生命周期 Hook 中调用 methodThatIWantToTest ，则可能会在 componentDidMount 测试中对其进行 stub :

   it('should fetch data', async () => {
      const props = { fetchData: Promise.resolve('data') };
      const shallowWrapper = shallow(<MyComponent {...props}/>);
      expect(shallowWrapper.html()).toBe(null);
      await props.fetchData;
      expect(shallowWrapper.html()).toBe('<p>hi</p>');
   });

然后就可以单独测试该方法了。可以禁用生命周期 Hook 以减少移动部件的数量:

   it('should do some stuff', () => {
      const shallowWrapper = shallow(<MyComponent {...props}/>, {disableLifecycleMethods: true});
      const result = shallowWrapper.instance().methodThatIWantToTest();
      expect(result).toBe(...);    
   });