reactjs - Jest/ enzyme |在 componentDidMount 中测试函数调用

Question

这个问题已经有答案了:

When spying on component method, called from componentDidMount, the spy is never called (1 个回答)

已关闭 4 年前。

当您想测试 componentDidMount() 上的函数被调用时该怎么做React 生命周期方法。基本上组件代码如下所示:

  state = {
    randomStateToPopulate: []
  };

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

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

那么，如何实际测试这个案例？

Answer 1

这是您要测试的案例场景。如果正在调用 componentDidMount，请检查它是否仅被调用一次，或者您想要的次数。

你的测试。 我在下面的评论中有解释

    // 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.
    });

你可以抽象这个案例来做更复杂的事情，但它的基本要点就是上面的一个。如果您有更详细或者更好的解决方案，欢迎留言。谢谢!!