[TypeScript + Jest] TypeScript 프로젝트 시작 + Jest 적용

TypeScript를 적용하면서 동시에 Jest를 이용한 단위 테스트를 하고싶다면 어떻게 해야하는지에 관한 글이다.

 

TypeScript와 Jest를 동시에 적용하기 위해 어떻게 해야하는지, 어떤 것을 설치해야 하는지에 대한 과정이다.

 

프로젝트 시작

(VSCode, NodeJS와 같은 기본적인 것이 준비되어 있다는 가정)

npm init -y

위의 명령어로 npm 프로젝트를 시작한다.

 

위의 명령어를 입력하면 디렉토리에 package.json 파일이 생성된다.

 

-y 명령어를 입력하지 않는다면 프로젝트에 관한 세부적인 내용도 함께 설정할 수 있다.

package.json

위와 같은 내용으로 채워진 package.json이 생성된다면 성공이다.

 

TypeScript 설치

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

위의 명령어를 이용해 TypeScript와 ts-node 모듈, node에 관한 type을 설치한다.

 

TypeScript는 JavaScript와 달리 타입을 명시할 수 있기 때문에 기본적인 node에 관한 타입을 알고 있어야 한다.

(타입을 지정하기 위해 타입을 설치한다)

 

npx tsc --init

이후, tsconfig.json 파일을 생성해야 한다.

이와 같이 기본적인 내용을 담고 있는 tsconfig.json 파일이 생성된다.

 

해당 파일을 열어보면 100줄 이상의 코드가 작성되어 있으며 필요에 의해 주석을 해제하여 사용하면 된다.

 

추가적으로 compilerOptions 밑에 "include": ["**/*"]를 추가한다.

 

해당 작업 디렉토리 전체에 TS 파일이 있다는 의미이다.

 

만약, src 하위에 있다면 "include": ["src/**/*"]과 같이 작성하면 된다.

 

**은 단계에 상관없는 아무 디렉토리를 의미하는 것이고 *은 없거나 하나 이상의 문자열에 매칭되는 것이다.

 

위와 같이 작성한다면 단계에 상관없는 아무 디렉토리 안에 있는 파일에 대해 적용한다는 의미가 된다.

 

또한, outDir 옵션을 설정하여 원하는 위치에 빌드 파일이 저장되도록 할 수 있다.

 

"outDir": "./dist"와 같이 작성하면 프로젝트의 dist 폴더에 빌드된 파일이 저장된다.

 

package.json 설정

위와 같이 설정을 한 뒤 package.json에 스크립트를 추가해야 한다.

 

ts-node를 설치했기 때문에 아래와 같이 스크립트를 작성할 수 있다.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "ts-node index.ts",
    "build": "tsc"
},

npm run start를 입력하는 경우는 프로젝트 개발 단계에서 ts-node를 이용하여 ts 파일을 실행하는 것이고 npm run build를 입력하는 경우 tsc 명령어를 통해 해당 TS 파일을 빌드하여 지정된 경로에 저장한다.

 

이후, node 명령어를 이용해 빌드된 JS 파일을 실행할 수 있다.

 

// add.ts

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

// index.ts

import add from "./add";

const a: number = 1;
const b: number = 2;

console.log(add(a, b));

위의 코드를 빌드 없이 실행하려면 npm run start를 입력하면 되고 빌드를 하기 위해선 npm run build, 빌드된 JS를 실행하기 위해서는 node index.js를 입력하면 된다.

 

Jest 설치

JS 프로젝트와 다르게 TS 프로젝트에서는 babel을 추가로 설치해야 한다.

npm i -D ts-jest @types/jest @babel/preset-typescript @babel/preset-env

(TypeScript를 사용하므로 jest에 대한 타입도 함께 설치해야 한다)

 

모두 설치했다면 .babelrc 파일을 생성하여 아래와 같은 내용을 넣는다.

{
  "presets": ["@babel/preset-typescript", "@babel/preset-env"]
}

 

테스트 작성 및 테스트 수행

package.json에 jest관련 스크립트를 추가한다.

  "scripts": {
    "test": "jest",
    "start": "ts-node index.ts",
    "build": "tsc"
  },

이후 테스트 코드를 작성한다.

import add from './add';

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

npm run test를 입력한다면 아래와 같이 테스트가 정상적으로 수행되는 것을 확인할 수 있다.

---

(추가) Babel 설정

위에서 .babelrc에서 추가한 것은 각각 @babel/preset-typescript과 @babel/preset-env이다.

 

@babel/preset-env은 ES6 이상의 문법을 이전 버전으로 바꾸는 기능이다.

 

위의 옵션을 통해 ES6 이후부터 지원되는 import 문법 등을 사용할 수 있다.

 

@babel/preset-typescript은 타입스크립트를 JS로 바꿔주는 기능이다.

 

이를 사용하지 않는다면 jest는 타입스크립트의 문법을 이해하지 못한다.

---

[참고자료]

Getting Started · Jest (jestjs.io)

타입스크립트로 프로젝트를 시작하기 (Begin Typescript Project) — 수피리의 찍먹 블로그 (tistory.com)

[Typescript] jest로 test할 때 import 사용하기 (velog.io)