Jest Typescript Babel 설정하기

Posted on Edited on In , Word count in article: 272 Reading time ≈ 1 mins.

Jest 와 Typescript 설정 방법을 찾아봤는데 이전 자료들이 많아서 현재 시점 (2021년 5월) 기준으로
설정하는 방법을 정리해봅니다. 이 문서도 시간이 지나면 과거 자료가 되겠지만
일단 정리해봅니다.

Jest

jest 설치

1
npm i -D jest

npm 설정

package.json
1
2
3
4
5
{
  "scripts": {
    "test": "jest"
  }
}

jest 설정

jest 의 설정 파일( jest.config.js ) 을 생성합니다.

1
npx jest --init

Bebel

Babel 설치

1
2
3
4
5
## babel 설치
npm i -D babel-jest @babel-core @babel-cli
## babel preset 설치
npm i -D @babel/preset-env
npm i -D @babel/preset-typescript

babel 설정

.babelrc
1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "presets": [
      [
          "@babel/preset-env",
          "@babel/preset-typescript",
          {
              "targets": {
                  "node": "current",
              },
          },
      ],
  ],
}

Typescript

Typescript 설치

1
npm i -D typescript ts-node-dev @types/node

Typescript 설정

1
npx tsc --init

Types 추가

1
npm i -D @types/jest

tsconfig.json 에 types 를 추가한다.

tsconfig.json
1
2
3
4
5
6
7
8
{
  "compilerOptions": {
    ........
    "types": [
      "jest"
    ]
    ........
}

ts-jest 설치

1
2
3
4
npm i -D ts-jest

## jest.config.js 생성
npx ts-jest config:init

jest.config.js 에 ts-jest 를 preset 으로 추가한다

jest.config.js
1
2
3
4
5
module.exports = {
  ..........
  preset: "ts-jest",
  ..........
}

테스트 해보기

index.ts 만들기

./src/index.ts
1
2
3
export function sampleFunction(x: string): string {
  return x + x;
}

index.test.ts 만들기

./test/index.test.ts
1
2
3
4
5
6
7
import { sampleFunction } from "../src";

describe("This is a simple test", () => {
    test("Check the sampleFunction function", () => {
        expect(sampleFunction("hello")).toEqual("hellohello");
    });
});

tsconfig 에 exclude 추가

tsconfig.json 에 exclude 를 추가한다.

tsconfig.json
1
2
3
4
5
6
7
8
{
  "compilerOptions": {
    ........
  },
  "exclude": [
    "node_modules"
  ]
}

build 용 tsconfig 생성

tsconfig-build.json
1
2
3
4
5
6
{
  "extends": "./tsconfig.json",
  "exclude": [
    "test/**/*"
  ]
}

package scripts 설정

package.json
1
2
3
4
5
6
7
{
  ........
  "scripts": {
    "test": "jest --colors",
    "build": "tsc -p tsconfig-build.json"
    ........
  },

test 실행

1
npm run test

test결과

build 실행

1
npm run build

build결과

build 후에 ./dist/index.js 파일이 생성된다.

연관포스트