[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 응답을 효과적으로 테스트할 수 있는 환경을 구축했습니다.
참고 문헌: