#1Jestの使用
これは、Jestモックコールバック関数を使用してクリックイベントをテストする方法です。
import React from 'react';
import { shallow } from 'enzyme';
import Button from './Button';
describe('Test Button component', () => {
it('Test click event', () => {
const mockCallBack = jest.fn();
const button = shallow((<Button onClick={mockCallBack}>Ok!</Button>));
button.find('button').simulate('click');
expect(mockCallBack.mock.calls.length).toEqual(1);
});
});
私も酵素と呼ばれるモジュールを使用しています。Enzymeは、Reactコンポーネントのアサートと選択を容易にするテストユーティリティです。
#2Sinonの使用
また、JavaScriptのスタンドアロンのテストスパイ、スタブ、モックであるSinonと呼ばれる別のモジュールを使用することもできます。これはそれがどのように見えるかです:
import React from 'react';
import { shallow } from 'enzyme';
import sinon from 'sinon';
import Button from './Button';
describe('Test Button component', () => {
it('simulates click events', () => {
const mockCallBack = sinon.spy();
const button = shallow((<Button onClick={mockCallBack}>Ok!</Button>));
button.find('button').simulate('click');
expect(mockCallBack).toHaveProperty('callCount', 1);
});
});
#3あなた自身のスパイを使う
最後に、あなたはあなた自身の素朴なスパイを作ることができます(あなたがそれの正当な理由がない限り、私はこのアプローチをお勧めしません)。
function MySpy() {
this.calls = 0;
}
MySpy.prototype.fn = function () {
return () => this.calls++;
}
it('Test Button component', () => {
const mySpy = new MySpy();
const mockCallBack = mySpy.fn();
const button = shallow((<Button onClick={mockCallBack}>Ok!</Button>));
button.find('button').simulate('click');
expect(mySpy.calls).toEqual(1);
});