React.js, Next.js 프로젝트에서 Jest 사용하는 방법(JavaScript) [플랜 빙고 ver. 0.1.16]

Yoon Robin·2023년 7월 5일

jest

플랜 빙고 개발 노트

목록 보기

2/7

프로젝트에 사용한 기술 스택

React.js

Next.js

JavaScript

0. 이 포스팅의 목적

Jest를 실제 프로젝트에서 사용했을 때 어려움을 겪었다.
특히, Babel config를 설정하는 게 까다로웠다.

앞으로 이와 같은 어려움을 다시 겪지 않고자 문서화한다.

1. 기본 설치 및 과정

1) jest 설치

npm install --save-dev jest

2) Type definitions

npm install --save-dev @types/jest

@type/jest을 설치하면, Jest globals의 타입(describe, expect, test 등)을 일일이 import할 필요가 없어진다.

공식 문서 - Type definitions

3) package.json의 "scripts"에 다음 추가

"test": "jest"

4) 테스트 폴더 생성
프로젝트 루트 위치에 __tests__폴더 생성

5) __tests__폴더 안에 테스트 파일 만들기

예를 들어 sum이라는 함수를 테스트 하기로 하자.
우리는sum.test.js라는 파일을 만들어야 한다.

sum.test.js

const sum = require("../../sum");

test("adds 1 + 2 to equal 3", () => {
  expect(sum(1, 2)).toBe(3);
});

여기서 require()안에 있는 건 sum 함수의 경로이다.

⚠️ 현 단계에서는 require(@/sum)과 같이 별칭(alias) 경로를 사용할 수 없다. 아래에 Babel 파트에서 별칭 경로를 사용할 수 있는 방법이 적혀 있다.

6) 테스트할 함수 만들자.

적절한 위치에 sum.js라는 파일을 만들어보자.

sum.js

function sum(a, b) {
  return a + b;
}
module.exports = sum;

7) 마지막으로 test!
터미널에서 npm test를 실행하면 테스트가 실행된다.

여기까지는 일반 js 파일의 함수를 데스트할 때 필요한 과정이다.
그런데 이 프로젝트는 React.js와 Next.js를 쓰는 프로젝트이다.
실제 프로젝트에서 테스트 하기 위해서는 추가로 해야할 작업이 있다..

2. React.js & Next.js 프로젝트에서 사용하기 위하여 추가 설치

- Babel

위에서 언급했듯이, 나는 별칭 경로를 사용하고 싶었다.
또한, require() 함수 대신 import를 사용하고 싶었다.

참고 자료 - require vs import 문법 비교 (CommonJS vs ES6)

Jest를 활용할 때, 이 두가지를 하기 위해서는 Babel을 써야 한다.

Babel이란?
Babel은 자바스크립트 트랜스파일러(transpiler)이다.
Babel을 이용하면 ES6 이상의 최신 문법으로 작성한 자바스크립트 코드를 ES5 이하의 예전 문법으로 작성한 것처럼 소스 코드 내의 문법 형태를 변경할 수 있다. 참고 자료 - 바벨(Babel 7) 기본 사용법

아래부터는 Jest에서 Babel을 사용하는 방법이다.

1) Babel 기본 설치
Babel을 쓰려면 다음과 같은 dependencies가 필요하다.

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

공식문서 - Using Babel

2) React.js 프로젝트에서 사용하기 위한 추가 설치

npm install --save-dev @babel/preset-react @babel/plugin-syntax-jsx

3. 별칭 경로 관련 설치

npm install --save-dev babel-plugin-module-resolver

참고 자료 - Babel로 별칭 경로 설정하기 (Module Resolver)

4. Babel 환경설정하기

babel.config.js

module.exports = function (api) {
  const presets = [
    ["@babel/preset-react", {"runtime": "automatic"}],
    "@babel/preset-env",
  ];
  const plugins = [
    "@babel/plugin-syntax-jsx",
    [
      "module-resolver",
      {
        root: ["./"],
        alias: {
          "@": "./",
        },
      },
    ],
  ];

  api.cache(true);

  return {
    presets,
    plugins,
  };
};

⚠️ {"runtime": "automatic"}를 추가하지 않으면 에러가 생긴다.
{"runtime": "automatic"}를 추가하면 React is not defined 에러를 해결할 수 있다.
참고 자료 - React is not defined 에러 해결

- css module을 쓰기 위한 작업

1) identity-obj-proxy 설치

npm install --save-dev identity-obj-proxy

identity-obj-proxy는 css파일을 import해서 사용할 때 필요한 라이브러리이다.

2) jest.config.js에 moduleNameMapper 부분 추가

/** @type {import('jest').Config} */
const config = {
  verbose: true,
  collectCoverage: true,
  moduleNameMapper: {
    "\\.(css|less)$": "identity-obj-proxy",
  },
};
module.exports = config;

참고

verbose:true: verbose의 뜻은 '말 수가 많은'이다. verbose를 true로 설정하면 상세한 로깅(logging)을 출력한다.
collectCoverage: true: 테스트를 실행하는 동안 커버리지 정보를 수집해야 하는지 여부를 나타낸다. default는 false이다. 이것이 true면 테스트 속도가 느려진다. 공식 문서 - collectCoverage