타입스크립트[TypeScript] | TS 환경에 jest 설정하기

 

최근 프로젝트를 진행할 때 TDD 개발 방식으로 진행해서 테스트 코드를 작성한 적이 있었고 블로그에 포스팅도 했었다.

[글 보러 가기]

 

이번에는 TypeScript로 코드를 작성하고 있으며 vite로 개발 환경을 구축했기 때문에 jest를 따로 설치한 뒤 config 파일을 생성했다.

(지난번엔 CRA로 개발 환경을 구축했고, testing-library가 기본으로 설치되어 있었다.)

 

타입스크립트 환경에서 jest 초기 설정 방법을 작성해보려고 한다.

---

패키지 설치

  

    
    
    
    
  
npm install --save-dev jest @types/jest ts-jest ts-node
or
yarn add -D jest @types/jest ts-jest ts-node

 

위 명령어를 사용하여 jest 패키지와 타입스크립트를 사용하기 위해 필요한 다른 패키지도 함께 설치해 준다.

처음 ts-node를 설치하지 않고 테스트 코드를 실행시켰다가 오류가 발생했었는데,

 

[jest 공식 문서]에 보면 TIP에 타입스크립트 config 파일을 읽기 위해선 ts-node를 설치해야 한다고 작성되어 있다.

설치해 주니 잘 실행이 되는 것을 확인했다.

 

config 파일 생성

프로젝트의 root 경로에 jest.config.ts 파일을 생성해 준다.

파일 내용에는 아래 소스코드처럼 작성해 주면 된다.

  

    
    
    
    
  
import type { Config } from "jest";

const config: Config = {
  preset: "ts-jest",
  extensionsToTreatAsEsm: [".ts"],
};

export default config;

 

• preset: [ts-jest]는 타입스크립트로 작성된 프로젝트를 jest로 테스트할 수 있도록 도와주는 라이브러리이다. 공식 문서에 설치가 안내되어 있으며 설치한 ts-jest로 테스트를 하기 위해 설정하는 부분이다.
  [jest 공식 문서 - preset]
• extensionsToTreatAsEsm: ts 확장자의 파일을 실행시키기 위해 설정하는 부분이다.
  [jest 공식 문서 - extensionsToTreatAsEsm]

vite config 파일 수정

vite로 개발 환경을 구축하면서 자동 생성되는 vite.config.js 파일을 수정해 준다.

vite의 개발 서버에서 jest를 실행시키기 위한 설정이다.

  

    
    
    
    
  
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  // 기존 설정
  server: {
    fs: {
      strict: false,
    },
  },
});

 

package.json 파일 수정

명령어를 통해 테스트 코드를 실행시키기 위하여 스크립트를 추가해줘야 한다.

  

    
    
    
    
  
{
  ...
  "scripts": {
    // 기존 설정
    "test": "jest",
  },
  ...
}

 

나는 yarn을 사용했고, yarn run test를 입력하면 테스트 코드가 실행된다.

 

추가 설정

이렇게 설정을 하고 실행시키면 테스트는 정상적으로 진행되지만 경고 메시지가 뜬다.

 

 

tsconfig.json 파일에 esModuleInterop 설정을 true로 변경하라는 경고 메시지이다.

어떤 기능을 하는지 찾아보니 [문서]에 바벨 또는 웹팩과 동일한 런타임 동작을 제공하기 위해 설정하는 것이라고 명시되어 있었다.

 

또한 [타입스크립트 공식 문서]에 Compiler Flags 부분을 보면 Allow 'import x from y' when a module doesn't have a default export.라고 적혀있는 걸 볼 수 있었다.

 

 

임시 테스트 코드를 실행시킨 것이어서 오류가 발생하진 않았지만,

만약 CommonJS 모듈을 사용하는 라이브러리를 가져올 때 ES6 모듈 사양인 import 구문을 사용하여 가져오면 오류가 발생할 수 있다.

 

이때 esModuleInterop 옵션을 true로 설정하면 알아서 CommonJS 사양으로 트랜스파일 해주어 오류를 해결할 수 있는 것이다.

 

위 설정들을 모두 마치면 정상적으로 테스트 코드가 실행되는 걸 확인할 수 있다!