타입스크립트 테스트 환경 구축하기 Typescript Test Environment

안녕! 타입스크립트 프로젝트를 Jest로 테스트하려면 어떻게 할지 궁금해 할까봐 준비했어!

Jest와 TypeScript 설치! npm용 명령어는 아래!

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

yarn 명령어는 아래! ^^

yarn add --dev jest ts-jest @types/jest typescript

 

프로젝트 루트 디렉토리에 jest.config.js 파일을 생성해. 바로 Jest의 설정을 관리하는 파일이야. 

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  testMatch: ['**/__tests__/**/*.+(ts|js)', '**/?(*.)+(spec|test).+(ts|js)'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
};

이 파일에서는 다음과 같은 설정을 하고 있어

• preset: Jest가 TypeScript 코드를 처리하는 데 사용하는 ts-jest 패키지 지정
• testEnvironment: Jest가 테스트를 실행하는 환경을 지정합니다. 이 경우 Node.js 환경으로 설정.
• testMatch : 어떤 코드가 테스트 파일인지 알려주는 설정
• moduleNameMapper: Jest가 모듈 경로를 해석할 때 사용하는 매핑이야. @/ 접두사가 있는 경로는 src/ 디렉토리 아래에 있는 파일로 매핑돼!

TypeScript 설정 파일(tsconfig.json)에 Jest 설정 추가!. TypeScript 컴파일러가 Jest 관련 코드를 인식할 수 있도록 아래 설정을 추가 해줘!

{
  "compilerOptions": {
    // ...
  },
  "include": ["src/**/*", "test/**/*"],
  "exclude": ["node_modules"],
  "jest": {
    "preset": "ts-jest",
    "testEnvironment": "node"
  }
}

 

자 이제 테스트 파일을 작성해 볼까!. 예를 들어, src 디렉토리에 있는 add.ts 파일을 테스트하려면 src 디렉토리 아래에 __tests__ 디렉토리를 생성하고, 그 아래에 add.test.ts 파일을 작성하면 돼.

import { add } from '@/add';

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

이 코드에서는 add 함수가 1과 2를 더했을 때 3을 리턴하는지 테스트하고 있어. 

Jest를 실행해볼까. package.json 파일의 scripts 항목에 다음과 같은 명령어를 추가해보자

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

 

아래 명령어로 실행 끝!

npm run test