TypeScript + Jest 유닛 테스트 작성하기

 

이번 포스트에서는 TypeScript 환경에서 Jest 로 유닛 테스트를 진행하기 위해 필요한 설정들과

확인을 위한 간단한 예시 코드를 작성해보겠습니다.

사용할 테스트 프레임워크는 가장 대중적으로 사용되고 있는 Jest 입니다.

 

📌 Jest 설정

1️⃣ 패키지 설치

먼저 필요한 패키지를 설치합니다.

npm i -D jest @jest/globals ts-jest

 

 

💡 @jest/globals 

명시적인 import 를 선호하기에, 해당 패키지를 사용해서 jest api 사용했습니다.

 

💡 ts-test 

TS 로된 모듈 테스트를 수행할 때 컴파일 + 타입 체크까지 함께 수행할 수 있도록 해줍니다.

 

2️⃣ config 파일 추가

// jest.config.js

/** @type {import('jest').Config} */
const config = {
  verbose: true,
  transform: {
    '^.+\\\\.tsx?$': 'ts-jest',
  },
	moduleNameMapper: {
    '@/(.*)$': '<rootDir>/src/$1',
  },
}

module.exports = config

 

💡 verbose

모든 테스트 로그들을 계층구조로 터미널에 노출합니다.

 

💡 transform

typescript 파일에 대해서 ts-test 를 적용할 것이기 때문에 설정했습니다.

기본적으로는 jest 내부에서 babel-jest 사용합니다.

 

💡 moduleNameMapper

테스트 파일 (*.spec.ts, *.test.ts) 내에서 import path alias 를 사용하기 위한 매퍼 설정입니다.

 

그 외의 설정 옵션들은 아래 문서를 참고하면 됩니다.

Configuring Jest · Jest

Configuring Jest · Jest

 

3️⃣ test run script 등록

package.json 에 test 를 수행할 script 를 등록합니다.

 

scripts: {
	"test": "jest --watch"
}

 

📌 테스트 코드 작성

잘 동작하는지 확인하기 위한 간단한 테스트 코드를 작성해봅니다.

 

// add.spec.ts

import { test, expect } from '@jest/globals'

function add(a: number, b: number) {
  return a + b
}

test('add', () => {
  expect(add(1, 2)).toBe(3)
})

 

 

이제 실제 프로젝트에 적용해서 테스트 커버리지를 높여보는 일만 남았네요 😄

 

📌 참고자료

Testing TypeScript apps using Jest - LogRocket Blog