TypeScript에 jest를 적용해보자

 

1. Typescript용 jest 설치

먼저, typescript에서 사용할 수 있게끔 jest를 설치해 준다.

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

production 빌드시에는 jest가 필요 없으므로, --save-dev를 넣어서 설치해 주도록 하자.

 

 

2. babel 종속성 설치

 

https://jestjs.io/docs/getting-started#using-typescript

Getting Started · Jest

jest 페이지를 보면, Jest는 Babel을 통해 TypeScript를 지원한다고 나와 있다.

이에 필요한 모듈들은 다음과 같다.

1) Babel을 사용하기 위해 필요한 종속 항목

  - babel-jest

  - @bable/core

  - @babel/preset-env

 

2) typescript를 이용하기 위한 종속 항목

  - @babel/preset-typescript

 

위 4가지의 항목들을 설치해 주자.

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

 

 

3. babel.config.js 설정

root에 babel.config.js 파일을 생성해 준다.

이후, 아래와 같은 코드를 작성해주자.

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

 

 

 

4. jest.config.js 파일 추가

Jest가 TypeScript를 틀내스파일하려면 config파일이 추가적으로 필요하다.

javascript
npm ts-jest config:init

위 명령어를 실행해 주거나,

root 파일 아래에 jest.config.js 파일을 추가해서 다음과 같은 코드를 적어주자.

javascript
/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

 

 

5. package.json scripts 추가

javascript
  "scripts": {
    ...
    "test": "jest"
  },

 

 

6. 테스트

일단 기존에 작성해둔 lib 코드가 다음과 같이 있다.

typescript
export const replaceInfraDescription = (description: string) => {
    const patternUp = /<@cc.vup>(.*?)<\/>/g;
    const patternDown = /<@cc.vdown>(.*?)<\/>/g;
    const patternKw = /<@cc.kw>(.*?)<\/>/g;
    const patternDelete = /<\$cc\.(.*?)>(.*?)<\/>/g;
    const deleteRemPattern = /<@cc.rem>/g;

    const patternUpTag = "<span class='text-color'>$1</span>"
    const patternDownTag = "<span class='danger-color'>$1</span>"
    const patternKwTag = "<span class='text-color'>$1</span>"
    const patternDeleteTag = "$2"

    description = description.replace(patternUp, patternUpTag)
    description = description.replace(patternDown, patternDownTag)
    description = description.replace(patternKw, patternKwTag)
    description = description.replace(patternDelete, patternDeleteTag)
    description = description.replace(deleteRemPattern, "")

    return description
}

 

내용은 딱히 중요하지 않고, string을 받아서 텍스트를 대치해 주고 다시 string을 반환하는 형태의 함수이다.

이제 테스트 모듈을 작성해 줄 건데, 기본적으로 jest는 __tests__ 하위 파일이나, .test.(js, ts...) 등등으로 끝나는 파일들을 테스트 해 준다.

 

루트 아래에 __tests__ 폴더를 만들고, 하위에 replace.test.ts 파일을 만들어 줬다.

typescript
import {replaceInfraDescription} from '../lib/replaceText'

describe('replace test module', () => {
    test('replaceInfraDescription', () => {
      expect(replaceInfraDescription("asdf")).toBe("asdf");
    });
  });

위와 같이 만들어주고, replaceInfraDescription은 asdf가 넘어가면 asdf가 그대로 반환되게 되어 있다.

이제, npm run test로 확인!

 

야호!

이제 ts 형식으로 모듈 테스트가 가능해졌다!