Jest 시작하기

Jest 시작하기 (Getting Started)

테스트 러너가 없으면 코드가 아니라 '코드가 잘 돌 것이라는 믿음'만 남아요. Jest는 그 믿음 대신 실제 통과 여부를 눈으로 확인시켜 주는 테스트 프레임워크예요. 여기서는 두 숫자를 더하는 아주 작은 함수부터 Jest를 설치하고, 첫 테스트를 실행하기까지를 함께 해 볼게요.

출처: Jest 공식 문서 - Getting Started

설치와 첫 테스트

선호하는 패키지 매니저(npm, Yarn, pnpm, Bun)로 Jest를 설치해요.

npm install --save-dev jest

두 숫자를 더하는 sum.js를 만들고요.

function sum(a, b) {
  return a + b;
}
module.exports = sum;

실제 테스트를 담을 sum.test.js 파일을 만들게요.

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

package.json에 test 스크립트를 추가해요.

{
  "scripts": {
    "test": "jest"
  }
}

yarn test 또는 npm test를 실행하면 Jest가 이런 메시지를 보여 줘요.

PASS ./sum.test.js
✓ adds 1 + 2 to equal 3 (5ms)

이 테스트는 expect와 toBe로 두 값이 정확히 같은지 확인했어요. Jest가 테스트할 수 있는 다른 것들은 Using Matchers에서 볼 수 있어요.

Jest를 CLI에서 바로 실행할 수도 있어요 (글로벌 설치 시 PATH에 있으면 됩니다).

jest my-test --notify --config=config.json

my-test와 일치하는 파일을 config.json 구성으로 실행하고, 끝나면 OS 네이티브 알림을 띄우는 명령이에요.

npm init jest@latest를 실행하면 프로젝트에 맞는 기본 구성 파일을 만들어 줘요.

Babel 설정

Babel을 쓰려면 필요한 의존성을 설치해요.

npm install --save-dev babel-jest @babel/core @babel/preset-env

프로젝트 루트에 babel.config.js를 만들어 현재 Node 버전을 타깃으로 설정해요.

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }],
  ],
};

대부분의 경우 번들러와 함께 쓰기 위해 특별히 할 일은 없어요. 다만 웹팩을 쓴다면 webpack 가이드를 참고해요. Jest는 Vite 플러그인 시스템과의 비호환성 때문에 Vite를 지원하지 않아요 — Vite와의 통합은 vite-jest 라이브러리 예시가 있지만 2.4.2 이후 버전과는 호환되지 않아요. 호환 API가 필요하다면 Vitest가 대안이 될 수 있어요.

TypeScript 지원

Babel로 TypeScript를 쓰려면 @babel/preset-typescript를 설치하고 babel.config.js에 추가해요.

npm install --save-dev @babel/preset-typescript

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }],
    '@babel/preset-typescript',
  ],
};

여기서 주의할 점이 있어요. Babel의 TypeScript 지원은 순수 트랜스파일일 뿐이라 실행 중 타입 검사는 하지 않아요. 타입 검사가 필요하면 ts-jest를 쓰거나 별도로 tsc를 실행해요.

ts-jest는 Jest용 TypeScript 전처리기예요.

npm install --save-dev ts-jest

@jest/globals 패키지를 설치하면 Jest 글로벌 API(describe, expect, test 등)에 대한 타입을 쓸 수 있어요.

npm install --save-dev @jest/globals

import { describe, expect, test } from '@jest/globals';
import { sum } from './sum';

describe('sum module', () => {
  test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
  });
});

@types/jest를 쓰는 방법도 있어요. import 없이 Jest 글로벌 타입을 제공하지만, 서드파티(DefinitelyTyped)라 최신 Jest 기능이 미반영일 수 있으니 버전을 가깝게 맞추는 게 좋아요.

ESLint와 함께 쓰기

@jest/globals에서 헬퍼를 import하면 Jest 글로벌 no-undef 오류 없이 ESLint를 쓸 수 있어요. import를 피하려면 ESLint 환경에 jest globals를 추가하거나 eslint-plugin-jest를 사용해요.

{
  "overrides": [
    {
      "files": ["tests/**/*"],
      "plugins": ["jest"],
      "env": { "jest/globals": true }
    }
  ]
}

더 알아보기