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でこの機能をテストすることはできますか?もしそうなら、どのように?
キーは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
私はそれが少し遅れていることを知っていますが、これに遭遇し、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();
}
このようなテストを作成することにより、メソッドを呼び出してから、呼び出されたことをアサートします。もちろん、それはあなたにそれをただ呼んだだけでしょう。