web-dev-qa-db-ja.com

ジェスト/酵素| componentDidMountで関数呼び出しをテストする

componentDidMount() Reactライフサイクルメソッド）で、関数が呼び出されたことをテストする場合の対処法基本的に、コンポーネントコードは次のようになります。

  state = {
    randomStateToPopulate: []
  };

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

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

では、このケースを実際にテストする方法は？

reactjsunit-testingjestjses6-promiseenzyme
3
Dimitris Efst

これは、テストするケースシナリオです。 componentDidMountが呼び出されている場合は、それが1回だけ、または必要な回数だけ呼び出されていることを確認してください。

あなたのテスト。 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.
    });

このケースを抽象化してより複雑なことを行うことができますが、その基本的な要点は上記のものです。より詳細なまたはより良い解決策がある場合は、それを投稿してください。ありがとう!!

14
Dimitris Efst