jest 환경설정

jest 환경설정 부터 사용방법까지 정리하는 글입니다. 본 문서는 2021년 12월 27일의 공식문서를 기준으로 작성되었기 때문에 이후 발생한 업데이트와 관련해서 내용이 상이할 수 있습니다.

환경설정

목표

1. babel 환경에서 사용가능하다.
2. webpack 환경에서 사용가능하다.
3. typescript와 함께 사용가능하다.

패키지 설치 및 환경설정

1. jest 설치

npm i -D jest // 데브 패키지로 설치

jest를 설치만 하면 node.js 환경에서 바로 사용할 수 있다. 하지만 우리의 목적은 babel로 인한 import / export 문법 혹은 웹팩 환경에서 트랜스파일 되는 타입스크립트 문법에서 jest를 실행시키는 것이다. 이를 위해서는 당연 추가 설정이 필요하다.

---

2. babel-jest, babel/core, babel/preset-env 설치
   이미 babel 설정이 완료된 경우라면, babe/core, babel/preset-env가 설치되어있을 확률이 높기 때문에 일반적으로는 babel-jest만 추가 설치해 주면 된다.

npm i -D babel-jest

---

3. babel 설정에서 targets을 'current'로 바꿔주기
   targets 'current'는 현재 사용중인 node 버전을 기준으로 babel이 트랜스파일 시키는 것을 의미한다.
   jest가 node에서 동작하기 때문에 이 설정이 필요한 것으로 보인다.

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

---

4. browserList를 사용하고 있는 경우 jest 실행시에만 target을 current로 설정하는 방법

공식문서에서 소개하는 방법은 jest 실행시 내부적으로 process.env.NODE_ENV를 jest로 자동 설정해주고 있기 때문에 이를 활용하여 targets를 바꾸는 방법을 소개하고 있다.

// babel.config.js
module.exports = api => {
  const isTest = api.env('test');
  // You can use isTest to determine what presets and plugins to use.

  return {
    // ...
  };
};

본인은 webpack.jest.js 라는 폴더를 새로 만들었고 jest 실행시 이 환경문서를 적용하여 targets를 설정해 주었다.

// package.json
...생략
scripts: {
  ...
  "test": "jest --config=jest.config.js",
}

---

5. typescript 설정
   @babel/preset-typescript를 설치해야 한다. 이 라이브러리는 babel과 typescript 팀이 1년간 공동작업한 결과물이다. 기존의 ts-loader는 빌드시 반드시 타입을 체크한다. 따라서 단점은 코드가 길어질 수록 빌드시간이 길어진다. 이 말은 watch 옵션을 사용하여 코드가 변경되었을 때마다 타입을 체크하기 때문에 개발 속도에 영향을 미칠 수 있다. 하지만 preset-typescript에서 트랜스파일을 위해 사용하는 @babel/plugin-transform-typescript 플러그인은 어떠한 타입 검사도 수행하지 않기 때문에 빌드 시간이 매우 빠르다.

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

단 주의점이 있다. 위 설정은 typescript의 문법으로 작성된 코드를 jest가 실행할 수 있게만 한다. 즉 jest가 별도의 타입 체크를 하지 않는다.

따라서 타입 체크를 원한다면 ts-jest를 설치하거나 별도의 타입 체크 시스템을 마련해야 한다.

그리고 Jest에서 타입 체크를 할 예정이라면 타입 정의를 포함하고 있는 @types/jest를 설치해 주자.

---

6. node 환경에서 document model 사용하기
   Node에서는 브라우저 api를 사용할 수 없다. dom과 관련된 기능도 당연히 사용할 수 없기 때문에 js에서 dom을 사용하려면 jsdom을 설치하고 그 환경에서 구동도되록 설정해 주어야 한다.

// test.jest.ts

/**
 * @jest-environment jsdom
 */

// 상단의 문법에 의해 jest는 jsdom 환경에서 실행되게 된다.

test('document test', () => {
  console.log(document) // document
});

출처

jest - https://jestjs.io/docs/configuration