Jest로 모의 API 호출 마스터하기: 종합 튜토리얼

Jest를 사용한 모의 API 호출은 효율적이고 빠르며 안정적인 테스트를 작성하는 데 중요합니다. 이 튜토리얼은 Jest의 광범위한 라이브러리와 고급 시나리오용 어댑터를 사용하여 모의 응답을 제어하는 ​​필수 기술을 안내합니다.

API 호출을 수행하는 코드에 대한 테스트를 작성할 때 해당 호출을 모의하는 것이 중요합니다. 이 전략을 통해 테스트는 안정적이고 빠르며 외부 서비스로부터 독립적입니다. 인기 있는 JavaScript 테스트 프레임워크인 Jest는 API 호출을 쉽게 모의할 수 있는 여러 가지 방법을 제공합니다. 사용할 수 있는 다양한 접근 방식을 살펴보겠습니다.

jest.mock() 사용하기

Jest에서 API 호출을 모의하는 간단한 방법 중 하나는 jest.mock() 함수를 사용하여 API 요청을 만드는 전체 모듈을 모의하는 것입니다. 예는 다음과 같습니다.

// api.js
import axios from 'axios';

export const getUsers = () => {
  return axios.get('/users');
};

// api.test.js
import axios from 'axios';
import { getUsers } from './api';

jest.mock('axios');

test('getUsers returns data from API', async () => {
  const users = [{ id: 1, name: 'John' }];
  axios.get.mockResolvedValueOnce({ data: users });

  const result = await getUsers();

  expect(axios.get).toHaveBeenCalledWith('/users');
  expect(result.data).toEqual(users);
});

이 예에서는 jest.mock('axios')를 사용하여 전체 axios 모듈을 자동으로 모의합니다. 그런 다음 axios.get.mockResolvedValueOnce()를 사용하여 다음 axios.get 호출에 대한 응답을 모의합니다. 테스트에서는 API가 올바르게 호출되었는지 확인하고 모의 데이터를 반환합니다.

수동 모의 사용

또 다른 접근 방식은 __mocks__ 폴더를 만들고 그 안에 모의 구현 파일을 넣어 API 호출을 수행하는 모듈을 수동으로 모의하는 것입니다.

// __mocks__/axios.js
export default {
  get: jest.fn(() => Promise.resolve({ data: {} })),
  post: jest.fn(() => Promise.resolve({ data: {} })),
  // ...
};

이제 테스트에서 각 테스트에 대해 서로 다른 응답을 모의할 수 있습니다.

// api.test.js
import axios from 'axios';
import { getUsers } from './api';

jest.mock('axios');

test('getUsers returns data from API', async () => {
  const users = [{ id: 1, name: 'John' }];
  axios.get.mockResolvedValueOnce({ data: users });

  const result = await getUsers();

  expect(axios.get).toHaveBeenCalledWith('/users');
  expect(result.data).toEqual(users);
});

이 수동 모의를 통해 사용자는 모든 권한을 가지며 get 및 post와 같은 다양한 Axios 메서드를 자신만의 구현으로 모의할 수 있습니다.

axios-mock-adapter 사용

Axios 요청에 대한 고급 모킹을 위해 axios-mock-adapter 라이브러리를 사용할 수 있습니다. 먼저 설치하세요:

npm install axios-mock-adapter --save-dev

그런 다음 테스트에서:

// api.test.js
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import { getUsers } from './api';

describe('getUsers', () => {
  let mock;

  beforeAll(() => {
    mock = new MockAdapter(axios);
  });

  afterEach(() => {  
    mock.reset();
  });

  test('returns users data', async () => {
    const users = [{ id: 1, name: 'John' }];
    mock.onGet('/users').reply(200, users);

    const result = await getUsers();

    expect(result.data).toEqual(users);  
  });
});

axios-mock-adapter를 사용하면 URL, 매개변수, 헤더 등을 기반으로 요청을 모의할 수 있습니다. 오류 및 시간 초과를 시뮬레이션할 수도 있습니다.

모의 Axios 인스턴스 주입

코드에서 axios를 직접 사용하는 경우 또 다른 옵션은 테스트 중에 모의 axios 인스턴스를 코드에 삽입하는 것입니다.

// api.js
import axios from 'axios';

export const getUsers = () => {
  return axios.get('/users');
};

// api.test.js
import axios from 'axios';
import { getUsers } from './api';

jest.mock('axios', () => ({
  get: jest.fn(),
}));

test('getUsers returns data from API', async () => {
  const users = [{ id: 1, name: 'John' }];
  axios.get.mockResolvedValueOnce({ data: users });

  const result = await getUsers();

  expect(axios.get).toHaveBeenCalledWith('/users');
  expect(result.data).toEqual(users);
});

여기에서는 전체 모듈이 아닌 Axios 자체를 모의하고 자체 모의 get 함수를 제공합니다.

모의 API 호출에 대한 팁

Jest에서 API 호출을 모의할 때 명심해야 할 몇 가지 팁은 다음과 같습니다.

1. 테스트 간 모의 재설정: beforeEach와 afterEach를 사용하여 테스트가 독립적인지 확인하세요.
2. 필요한 기능만 모의: 너무 모의하는 것은 피하세요. 코드에서 실제로 사용하는 기능과 모듈에 집중하세요.
3. 테스트 실패 사례: 모의 오류 및 예상치 못한 응답을 통해 코드에서 실패를 처리하는 방법을 테스트합니다.
4. 재사용 가능한 모의 픽스처: 일반적인 API 응답을 위한 재사용 가능한 모의 픽스처를 만듭니다.

EchoAPI를 사용한 모의 API

EchoAPI는 API 인터페이스 디자인, 디버깅 및 테스트를 위한 탁월한 도구입니다. 개발자가 효율적으로 API를 생성, 테스트, 검증할 수 있는 통합 환경을 제공하여 개발 프로세스를 단순화합니다. EchoAPI의 주요 기능 중 하나는 개발자가 효과적인 테스트를 위해 API 응답을 시뮬레이션할 수 있도록 하는 모의 서비스 지원입니다. EchoAPI에서 모의 ​​API를 설정하는 방법은 다음과 같습니다.

1. 새 HTTP 요청 생성

URL을 /echoapi/login으로 정의하세요.

2. 예상되는 응답 설정

디자인 섹션으로 이동하여 예상 응답을 구성하세요.

성공적인 응답을 위해 JSON을 다음과 같이 구성하세요.

// api.js
import axios from 'axios';

export const getUsers = () => {
  return axios.get('/users');
};

// api.test.js
import axios from 'axios';
import { getUsers } from './api';

jest.mock('axios');

test('getUsers returns data from API', async () => {
  const users = [{ id: 1, name: 'John' }];
  axios.get.mockResolvedValueOnce({ data: users });

  const result = await getUsers();

  expect(axios.get).toHaveBeenCalledWith('/users');
  expect(result.data).toEqual(users);
});

실패 응답의 경우 JSON을 다음과 같이 구성합니다.

// __mocks__/axios.js
export default {
  get: jest.fn(() => Promise.resolve({ data: {} })),
  post: jest.fn(() => Promise.resolve({ data: {} })),
  // ...
};

3. 모의 트리거링 조건 구성

Mock 섹션에서 요청 본문의 트리거 조건을 설정합니다. "email"="test@echoapi.com" 및 "password"="123456"인 경우 예상 응답을 성공으로 선택합니다. 다른 모든 조건의 경우 예상 응답으로 실패를 선택합니다.

4. 모의 모드 활성화

이 API 요청을 보내기 전에 모의 서비스를 활성화하고 모의 환경으로 전환하세요.

프론트엔드 개발

프런트엔드 개발에서 모의 ​​API를 사용하면 백엔드가 준비될 때까지 기다리지 않고 즉시 기능 작업을 수행할 수 있습니다. 이러한 병렬 개발 접근 방식은 전체 프로세스 속도를 높여줍니다.

자동화된 테스트

모의 API는 자동화된 테스트에 대해 일관된 응답을 제공하므로 신뢰할 수 있는 테스트를 더 쉽게 작성할 수 있습니다. Jest 및 Cypress와 같은 도구는 모의 API와 통합되어 다양한 구성 요소와 흐름을 테스트할 수 있습니다.

프로토타이핑

프로토타입이나 개념 증명을 생성할 때 모의 API를 사용하면 실제 백엔드 서비스를 구축할 필요 없이 필요한 백엔드 상호 작용을 빠르게 설정할 수 있습니다.

결론

Mocking API 호출은 특히 외부 종속성을 처리할 때 안정적이고 빠른 테스트를 작성하기 위한 기본 기술입니다. Jest는 jest.mock()을 사용하여 전체 모듈을 모의하는 것, 모듈을 수동으로 모의하는 것, 고급 사례를 위해 axios-mock-adapter와 같은 라이브러리를 사용하는 것까지 API 호출을 모의하는 다양한 방법을 제공합니다. 핵심은 테스트를 독립적으로 유지하고 테스트 중인 코드에 집중하면서 필요에 따라 올바른 접근 방식을 선택하는 것입니다.

또한 EchoAPI는 API 모의를 위한 강력한 도구를 제공하여 개발 및 테스트 워크플로를 향상시킵니다. 이러한 기술을 익히면 탄력적인 테스트를 작성하고 효율적이고 효과적인 API 상호 작용을 유지할 수 있습니다.

그럼 왜 기다리나요? 지금부터 EchoAPI와 같은 모의 기술과 도구를 사용해 개발 워크플로를 개선해 보세요!

위 내용은 Jest로 모의 API 호출 마스터하기: 종합 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!