Jest를 사용하여 JavaScript를 테스트하는 방법(Mock 함수)

이 글의 내용은 Jest를 사용하여 JavaScript(모의 기능)를 테스트하는 방법에 대한 것입니다. 참고할 만한 가치가 있으니 도움이 필요한 분들에게 도움이 되길 바랍니다.

이 튜토리얼에서는 Jest의 Mock 함수와 관련된 세 가지 API, 즉 jest.fn(), jest.spyOn() 및 jest.mock()을 소개합니다. 이를 사용하여 모의 함수를 생성하면 테스트 함수의 중첩 호출, 콜백 함수 호출 등과 같이 프로젝트에서 보다 논리적으로 복잡한 일부 코드를 더 효과적으로 테스트하는 데 도움이 될 수 있습니다.

아직 Jest의 기본 사용법을 모르신다면 먼저 읽어보세요: http://www.php.cn/js-tutorial-411835.html

Mock 기능을 사용하는 이유는 무엇인가요?

프로젝트에서 한 모듈의 메서드는 종종 다른 모듈의 메서드를 호출합니다. 단위 테스트에서는 내부적으로 호출된 메서드의 실행 프로세스와 결과에 신경 쓸 필요가 없으며 단지 메서드가 올바르게 호출되었는지 알고 싶고 함수의 반환 값을 지정할 수도 있습니다. 이때 Mock 기능을 활용하는 것이 매우 필요합니다.

Mock 함수에서 제공하는 다음 세 가지 기능은 테스트 코드를 작성할 때 매우 유용합니다.

• 함수 호출 캡처

• 함수 반환 값 설정

• 함수의 내부 구현 변경

그런 다음 이전 기사의 디렉터리 구조를 사용하여 test/functions.test.js 파일에 테스트 코드를 작성하고, src/ 디렉터리에 테스트된 코드를 작성합니다.

1. jest.fn()

jest.fn()은 Mock 함수를 생성하는 가장 간단한 방법입니다. 함수의 내부 구현이 정의되지 않은 경우 jest.fn()은 반환값으로 정의되지 않음을 반환합니다. 값.

// functions.test.js

test('测试jest.fn()调用', () => {
  let mockFn = jest.fn();
  let result = mockFn(1, 2, 3);

  // 断言mockFn的执行后返回undefined
  expect(result).toBeUndefined();
  // 断言mockFn被调用
  expect(mockFn).toBeCalled();
  // 断言mockFn被调用了一次
  expect(mockFn).toBeCalledTimes(1);
  // 断言mockFn传入的参数为1, 2, 3
  expect(mockFn).toHaveBeenCalledWith(1, 2, 3);
})

jest.fn()에 의해 생성된 Mock 함수는 반환 값을 설정하거나 내부 구현을 정의하거나 Promise 객체를 반환할 수도 있습니다.

// functions.test.js

test('测试jest.fn()返回固定值', () => {
  let mockFn = jest.fn().mockReturnValue('default');
  // 断言mockFn执行后返回值为default
  expect(mockFn()).toBe('default');
})

test('测试jest.fn()内部实现', () => {
  let mockFn = jest.fn((num1, num2) => {
    return num1 * num2;
  })
  // 断言mockFn执行后返回100
  expect(mockFn(10, 10)).toBe(100);
})

test('测试jest.fn()返回Promise', async () => {
  let mockFn = jest.fn().mockResolvedValue('default');
  let result = await mockFn();
  // 断言mockFn通过await关键字执行后返回值为default
  expect(result).toBe('default');
  // 断言mockFn调用后返回的是Promise对象
  expect(Object.prototype.toString.call(mockFn())).toBe("[object Promise]");
})

위 코드는 일반적으로 사용되는 여러 API와 jest.fn()에서 제공하는 주장문입니다. 다음으로 Mock 함수를 보다 비즈니스적인 방식으로 이해하기 위해 src/fetch.js 파일에 테스트된 코드를 작성합니다. 실제 적용.

테스트된 코드는 일반적으로 사용되는 요청 라이브러리인 axios와 이전 기사에서 언급한 무료 요청 인터페이스인 JSONPlaceholder를 사용합니다. 먼저 셸에서 npm install axios --save를 실행하여 종속성을 설치하세요.

// fetch.js

import axios from 'axios';

export default {
  async fetchPostsList(callback) {
    return axios.get('https://jsonplaceholder.typicode.com/posts').then(res => {
      return callback(res.data);
    })
  }
}

JSONPlaceholder에서 제공하는 인터페이스를 요청하고 수신 콜백 함수를 통해 처리된 반환 값을 반환하는 fetchPostsList 메서드를 fetch.js에 캡슐화했습니다. 인터페이스가 정상적으로 요청될 수 있는지 테스트하려면 들어오는 콜백 함수가 정상적으로 호출될 수 있다는 점만 캡처하면 됩니다. 아래는 function.test.js의 테스트를 위한 코드입니다.

import fetch from '../src/fetch.js'

test('fetchPostsList中的回调函数应该能够被调用', async () => {
  expect.assertions(1);
  let mockFn = jest.fn();
  await fetch.fetchPostsList(mockFn);

  // 断言mockFn被调用
  expect(mockFn).toBeCalled();
})

2.jest.mock()

fetch.js fetch.js 폴더에 캡슐화된 요청 메소드는 다른 모듈이 호출될 때 실제 요청을 할 필요가 없을 수도 있습니다(요청 메소드가 한쪽을 통과했거나 이 메소드는 실제가 아닌 데이터를 반환합니다). 이때 전체 모듈을 모의하기 위해서는 jest.mock()을 사용하는 것이 매우 필요합니다.

다음으로 src/fetch.js와 동일한 디렉터리에 src/events.js를 만듭니다.

// events.js

import fetch from './fetch';

export default {
  async getPostList() {
    return fetch.fetchPostsList(data => {
      console.log('fetchPostsList be called!');
      // do something
    });
  }
}

functions.test.js의 테스트 코드는 다음과 같습니다.

// functions.test.js

import events from '../src/events';
import fetch from '../src/fetch';

jest.mock('../src/fetch.js');

test('mock 整个 fetch.js模块', async () => {
  expect.assertions(2);
  await events.getPostList();
  expect(fetch.fetchPostsList).toHaveBeenCalled();
  expect(fetch.fetchPostsList).toHaveBeenCalledTimes(1);
});

테스트 코드에서는 jest.mock('../src/fetch.js')을 사용하여 전체 fetch.js 모듈을 모의합니다. 이 코드 줄을 주석 처리하면 테스트 스크립트를 실행할 때 다음 오류 메시지가 나타납니다

이 오류 보고서에서 중요한 결론을 도출할 수 있습니다.

함수 호출을 캡처하려는 경우 농담, 그렇다면 함수를 조롱하거나 감시해야 합니다!

3.jest.spyOn()

jest.spyOn() 메서드도 모의 함수를 생성하는데, 모의 함수는 함수 호출을 캡처할 수 있을 뿐만 아니라 스파이 기능을 정상적으로 실행할 수도 있습니다. 실제로 jest.spyOn()은 스파이 기능과 동일한 내부 코드를 사용하여 모의 함수를 생성하는 jest.fn()의 문법적 설탕입니다.

위 그림은 이전 jest.mock() 샘플 코드에서 올바른 실행 결과를 보여주는 스크린샷입니다. 쉘 스크립트에서 console.log('fetchPostsList be call!' ); 코드 줄은 jest.mock()을 전달한 후 모듈의 메서드가 실제로 jest에 의해 실행되지 않기 때문에 셸에 인쇄되지 않습니다. 이때 jest.spyOn()을 사용해야 합니다.

// functions.test.js

import events from '../src/events';
import fetch from '../src/fetch';

test('使用jest.spyOn()监控fetch.fetchPostsList被正常调用', async() => {
  expect.assertions(2);
  const spyFn = jest.spyOn(fetch, 'fetchPostsList');
  await events.getPostList();
  expect(spyFn).toHaveBeenCalled();
  expect(spyFn).toHaveBeenCalledTimes(1);
})

npm run test를 실행하면 쉘에서 인쇄 정보를 확인할 수 있는데, jest.spyOn()을 통해 fetchPostsList가 정상적으로 실행되었음을 알 수 있습니다.

4. 요약

이 글에서는 모의 함수를 생성하기 위해 jest.fn(), jest.mock() 및 jest.spyOn()을 소개했습니다. 테스트 코드를 더 잘 작성하는 데 도움이 되는 세 가지 기능:

• 함수 호출 상황 캡처

• 함수 반환 값 설정

• 함수 내부 구현 변경

실제 프로젝트의 단위 테스트에서 jest.fn()은 특정 작업을 수행하는 데 자주 사용됩니다. 콜백 함수 테스트; jest.mock()은 전체 모듈의 메소드를 모의할 수 있습니다. 모듈이 단위 테스트에 의해 100% 다루어지면 jest.mock()을 사용하여 모듈을 모의하여 테스트 시간을 절약하고 중복성을 테스트합니다. 필요합니다. 완전히 실행되어야 하는 특정 메서드를 테스트해야 하는 경우 jest.spyOn()을 사용해야 하는 경우가 많습니다. 이를 위해서는 개발자가 실제 비즈니스 코드를 기반으로 유연한 선택을 해야 합니다.

위 내용은 Jest를 사용하여 JavaScript를 테스트하는 방법(Mock 함수)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!