web-dev-qa-db-ja.com

Jestを使用してcomponentDidMountのメソッド呼び出しをスパイする

最近、いくつかのカスタムメソッドがReactコンポーネントのcomponentDidMountメソッドで条件付きで呼び出されることをテストしたかったのです。

componentDidMount() {
  if (this.props.initOpen) {
    this.methodName();
  }
}

テストフレームワークとしてJestを使用しています。これには、モック/スパイのjest.fn()が含まれています。私は、次のようなことを行うことで、Sinonでテストするのはかなり簡単になると読んでいます。

sinon.spy(Component.prototype, "methodName");
const wrapper = mount(<Component {...props} />);
expect(wrapper.instance().methodName).toHaveBeenCalled();

私はJestでこれを次のように再作成しようとしています：

Component.prototype.methodName = jest.fn();
const wrapper = mount(<Component {...props} />);
expect(wrapper.instance().methodName).toHaveBeenCalled();

このコードは失敗し、次のエラーがスローされます。

jest.fn() value must be a mock function or spy.
Received:
  function: [Function bound mockConstructor]

Jestでこの機能をテストすることはできますか？もしそうなら、どのように？

javascriptreactjstestingjestjsenzyme
35
seansean11

キーはjests spyOnメソッドを使用しています。次のようになります。

const spy = jest.spyOn(Component.prototype, 'methodName');
const wrapper = mount(<Component {...props} />);
wrapper.instance().methodName();
expect(spy).toHaveBeenCalled();

ここにあるように、例えば： 関数が反応して酵素と呼ばれるかどうかをテストする

注意してください各テスト実行後にスパイ機能をクリアすることもベストプラクティスです

let spy

afterEach(() => {
  spy.mockClear()
})

https://facebook.github.io/jest/docs/en/jest-object.html#jestclearallmocks

57
Jonathan

私はそれが少し遅れていることを知っていますが、これに遭遇し、componentDidMountをテストすることはネストされたメソッドの呼び出しを開始し、テストは次のようになることをお勧めします：

モジュール

componentDidMount() {
  if (this.props.initOpen) {
    this.methodName();
  }
}

テスト-良好

it('should call methodName during componentDidMount', () => {
    const methodNameFake = jest.spyOn(MyComponent.prototype, 'methodName');
    const wrapper = mount(<MyComponent {...props} />);
    expect(methodNameFake).toHaveBeenCalledTimes(1);
});

componentDidMountを呼び出すと、methodNameを介してcomponentDidMountが呼び出されたというアサーションがより有効になります。

テスト-悪い

it('should call methodName during componentDidMount', () => {
    const spy = jest.spyOn(Component.prototype, 'methodName');
    const wrapper = mount(<Component {...props} />);
    wrapper.instance().methodName();
    expect(spy).toHaveBeenCalled();
}

このようなテストを作成することにより、メソッドを呼び出してから、呼び出されたことをアサートします。もちろん、それはあなたにそれをただ呼んだだけでしょう。

15
hloughrey