[typescript] 타입스크립트와 Jest를 활용하여 서버 API 응답을 테스트하는 방법

웹 애플리케이션을 개발하다 보면 서버 API 응답을 테스트해야 하는 경우가 많이 발생합니다. 이때 타입스크립트와 Jest를 활용하여 테스트 코드를 작성하는 방법을 살펴보겠습니다.

1. Jest 설치 및 설정

Jest는 JavaScript 테스트 프레임워크로, 타입스크립트 프로젝트에서도 사용할 수 있습니다. 먼저 프로젝트에 Jest를 설치하고 설정해야 합니다.

npm install --save-dev jest @types/jest ts-jest

ts-jest는 타입스크립트를 지원하는 Jest 확장입니다.

2. 테스트 코드 작성하기

다음으로, API 응답을 테스트하는 코드를 작성해보겠습니다.

예시: 서버 API로부터 사용자 목록을 가져오는 함수

// userService.ts

import axios from 'axios';

export async function getUsers(): Promise<User[]> {
  const response = await axios.get('/api/users');
  return response.data;
}

Jest를 사용하여 getUsers 함수 테스트하기

// userService.test.ts

import axios from 'axios';
import { getUsers } from './userService';

jest.mock('axios');

describe('getUsers', () => {
  test('fetches successfully data from an API', async () => {
    const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
    const response = { data: users };
    (axios.get as jest.Mock).mockResolvedValue(response);

    const result = await getUsers();
    expect(result).toEqual(users);
  });
});

위의 예시 코드에서는 axios.get을 목업(mock)하여 테스트 데이터를 반환하도록 설정했습니다. 그리고 getUsers 함수가 올바르게 동작하는지를 expect를 통해 확인합니다.

3. 타입 선언과 함께 테스트하기

타입스크립트를 사용하면서 API 응답의 타입을 명확히 지정할 수 있습니다. 이를 테스트 코드에 적용하여 타입 안정성을 확보할 수 있습니다.

타입 선언 추가

// userService.ts

export interface User {
  id: number;
  name: string;
  // 추가적인 사용자 정보...
}

타입을 활용한 테스트 코드

// userService.test.ts

import axios, { AxiosResponse } from 'axios';
import { User, getUsers } from './userService';

jest.mock('axios');

describe('getUsers', () => {
  test('fetches successfully data from an API', async () => {
    const users: User[] = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
    const response: AxiosResponse<User[]> = { data: users };
    (axios.get as jest.Mock).mockResolvedValue(response);

    const result = await getUsers();
    expect(result).toEqual(users);
  });
});

위의 예시 코드에서는 AxiosResponse를 이용하여 API 응답의 타입을 명시하고, users 데이터로 타입을 명시적으로 선언했습니다.

이제 Jest와 타입스크립트를 통해 서버 API 응답을 효과적으로 테스트할 수 있는 환경을 구축했습니다.

참고 문헌: