반응형
기능에 대한 Jest Spy
Mocha에서 Jest로 스와프하고 있는데, 리액트 방식으로 스파이 할 수 있는 방법이 있는지 궁금합니다.예를 들어 내 컴포넌트에 다음과 같은 메서드가 있다고 가정해 보겠습니다.sdk
라이브러리는 jQuery Ajax 호출만 구성합니다).
getData() {
sdk.getJSON('/someURL').done(data => {
this.setState({data});
});
}
Sinon을 사용하여 다음과 같이 프로토타입을 염탐하여 테스트합니다.
it('should call getData', () => {
sinon.spy(Component.prototype, 'getData');
mount(<Component />);
expect(Component.prototype.getData.calledOnce).to.be.true;
});
이렇게 하면 메서드를 조롱하지 않고 코드 커버리지를 보장할 수 있습니다.Jest에도 비슷한 기능이 있나요?
편집: 또한 이 기능이 존재하지 않는 경우 API 호출을 테스트하기 위한 차선책은 무엇입니까?
사실 당신은 jeak.spyOn jeak.spyOn을 사용할 수 있습니다.
컴포넌트가 생성되었을 때 메서드가 호출된 경우:
import { mount } from 'enzyme';
describe('My component', () => {
it('should call getData', () => {
const spy = jest.spyOn(Component.prototype, 'getData');
mount(<Component />);
expect(spy).toHaveBeenCalledTimes(1)
});
})
또는 DOM 및 메서드 사용 바인드에 있는 경우 다음을 사용할 수 있습니다.
import { shallow } from 'enzyme';
describe('My component', () => {
it('should call getData', () => {
const wrapper = shallow(<Component />);
const instance = wrapper.instance()
const spy = jest.spyOn(instance, 'getData');
wrapper.find('button').simulate('click')
expect(spy).toHaveBeenCalledTimes(1)
});
})
얼마 전 v19에서 소개된 바로 그 방법이 있습니다.
당신은 새로운 것을 선택할 수 있다.spyOn
메서드 또는 다음 방법도 정상적으로 동작합니다.
it('should call getData', () => {
Component.prototype.getData = jest.fn(Component.prototype.getData);
expect(Component.prototype.getData).toBeCalled();
});
리액트 16.8에서 Jest를 사용하고 있습니다.이거는 효과가 있었어요.
it("lifecycle method should have been called", () => {
jest.spyOn(RedirectingOverlay.prototype, 'componentWillUnmount');
jest.spyOn(RedirectingOverlay.prototype, 'componentDidMount');
const wrapper = mount(<RedirectingOverlay message="Hi There!"/>);
expect(RedirectingOverlay.prototype.componentDidMount).toHaveBeenCalledTimes(1)
wrapper.unmount()
expect(RedirectingOverlay.prototype.componentWillUnmount).toHaveBeenCalledTimes(1)
})
사용방법:
"enzyme": "^3.6.0"
"jest": "23.5.0"
"enzyme-adapter-react-16": "^1.5.0"
언급URL : https://stackoverflow.com/questions/42430368/jest-spy-on-functionality
반응형
'programing' 카테고리의 다른 글
Angular에서의 ng-repeat 루프 내의 ng-model 바인딩JS (0) | 2023.02.27 |
---|---|
C# Oracle 파라미터화된 쿼리 - 심각하고 위험한 버그! (0) | 2023.02.27 |
노드 js를 사용하여 html 파일을 실행하는 방법 (0) | 2023.02.27 |
매니페스트: 행: 1, 열: 1, 구문 오류 (0) | 2023.02.27 |
base64 문자열을 이미지로 변환 (0) | 2023.02.27 |