# 1 Jest 사용
다음은 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 컴포넌트를보다 쉽게 주장하고 선택할 수있게 해주는 테스트 유틸리티입니다.
# 2 Sinon 사용
또한 독립 실행 형 테스트 스파이, 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);
});