Jest란?
Jest는 JavaScript 테스트 프레임워크입니다.
React 프로젝트뿐 아니라 일반 JavaScript, TypeScript 프로젝트에서도 사용할 수 있습니다.
함수의 결과가 기대와 같은지 확인하거나, 컴포넌트 동작을 검증하거나, 비동기 코드가 올바르게 처리되는지 테스트할 때 사용합니다.
Jest의 장점
Jest는 설정이 비교적 간단하고, 테스트 실행 환경과 matcher를 기본으로 제공합니다.
또한 파일이 변경될 때 자동으로 테스트를 다시 실행하는 watch 모드도 사용할 수 있습니다.
처음 테스트를 공부할 때 진입 장벽이 낮은 편이라 JavaScript 테스트 입문용으로도 좋습니다.
설치하기
1
npm install --save-dev jest
yarn을 사용한다면 다음 명령어로 설치할 수 있습니다.
1
yarn add --dev jest
--save-dev는 개발 환경에서만 필요한 패키지로 설치하겠다는 의미입니다.
테스트할 함수 만들기
먼저 간단한 덧셈 함수를 만들어보겠습니다.
1
2
3
4
5
6
// fn.js
const fn = {
add: (num1, num2) => num1 + num2,
};
export default fn;
테스트 코드 작성하기
테스트 파일은 보통 .test.js 또는 .spec.js 확장자를 사용합니다.
1
2
3
4
5
6
7
8
9
10
// fn.test.js
import fn from "./fn";
test("1 + 1은 2입니다", () => {
expect(fn.add(1, 1)).toBe(2);
});
test("2 + 3은 5입니다", () => {
expect(fn.add(2, 3)).toBe(5);
});
test()는 하나의 테스트 케이스를 정의합니다.
expect()는 검증할 값을 감싸고, toBe()는 기대하는 값과 일치하는지 확인합니다.
package.json에 script 추가하기
1
2
3
4
5
{
"scripts": {
"test": "jest"
}
}
이제 아래 명령어로 테스트를 실행할 수 있습니다.
1
npm test
실패하는 테스트도 확인해보기
테스트가 실패하면 Jest는 어떤 값이 기대값과 달랐는지 알려줍니다.
1
2
3
test("3 + 3은 5입니다", () => {
expect(fn.add(3, 3)).toBe(5);
});
위 테스트는 실제 결과가 6이기 때문에 실패합니다.
실패 메시지를 통해 함수가 잘못되었는지, 테스트 기대값이 잘못되었는지 확인할 수 있습니다.
마무리
Jest는 JavaScript 테스트를 시작하기 좋은 도구입니다.
처음에는 작은 함수 하나를 테스트하는 것부터 시작하면 됩니다.
test, expect, matcher의 흐름만 익혀도 기본적인 테스트 코드를 작성할 수 있습니다.