笑话/酶|测试componentDidMount中的函数调用

时间:2019-03-01 10:40:01

标签: reactjs unit-testing jestjs es6-promise enzyme

要在componentDidMount() React生命周期方法上测试要调用的函数,该怎么办。基本上,组件代码如下所示:

  state = {
    randomStateToPopulate: []
  };

  // Test componentDidMount
  componentDidMount() {
    this.randomFunction();
  }

  randomFunction= () => {
    listRandomData().then(({ data }) => {
      this.setState({ randomStateToPopulate: data });
    });
  };

那么,您如何实际测试这种情况?

1 个答案:

答案 0 :(得分:5)

这是您要测试的情况。如果正在调用componentDidMount,请检查它是否仅被调用过一次,或是否需要多次调用。

您的测试。 I have the explanation in comments below

    // Inside your general `Describe`
  let wrapper;
  const props = {
    // Your props goes here..
  };
  beforeEach(() => {
    wrapper = shallow(<YourComponent {...props} />);
  });

    it('should check `componentDidMount()`', () => {
      const instance = wrapper.instance(); // you assign your instance of the wrapper
      jest.spyOn(instance, 'randomFunction'); // You spy on the randomFunction
      instance.componentDidMount();
      expect(instance.randomFunction).toHaveBeenCalledTimes(1); // You check if the condition you want to match is correct.
    });

您可以抽象化这种情况来做更复杂的事情,但是它的基本要旨是上面的一种。如果您有更详细或更好的解决方案,请发布它。谢谢!