[다담다] 환장의 궁합 (vite + jest) - 1

한낱·2023년 8월 21일

세상의 모든 URL, 다담다

목록 보기

2/17

서론

현재 프로젝트에서 vite를 사용하고 있고, 최근 테스트 코드의 필요성을 느껴 jest를 추가하기로 하였다. 그 과정에서 다양한 오류가 발생하였고, 이를 어떻게 해결해나갔는지 정리하기 위해 블로그를 켰다!
나를 힘들게 한 주범들...

환장의 여정

jest 공식문서를 읽어보니 vite와 jest를 사용할 수는 있지만, 완벽히 지원되는 것은 아니라고 한다. 이것이 바로 공식이 인정한 환장의 궁합일까...
공식 문서가 인정한 환장의 궁합...

0. Why Jest?

통합 서비스 Jest
Jest는 테스팅 라이브러리가 아닌 테스팅 프레임워크이다. Jest가 없던 시절에는 프론트엔드 테스트에 Test Runner, Test Matcher, Test Mock이 존재하였으나 이 모든 기능을 가진 Jest가 등장하면서 하나의 설치로 세 역할을 모두 해낼 수 있게 되었다.

(참고로 Test Runner는 테스트를 구동시킬 수 있는 환경을 제공하는 역할을, Test Matcher는 테스트하려는 대상이 원하는 결과와 일치하는지 확인하는 역할을, Test Mock은 백엔드나 다른 라이브러리에 의존하는 상황에서 이를 대신해주는 역할을 수행한다.)

1. Babel과 Jest 설치

$ npm i -D jest babel-jest @babel/core @babel/preset-env

Babel은 es6문법으로 작성된 코드를 es5를 사용하는 컴파일러에서 사용할 수 있도록 변경해주는 트랜스파일링의 역할을 수행한다. 기본적으로 jest가 es5로 동작하기 때문에 개발자가 es6로 작성한 코드가 es5 문법에 맞게 변경되어야 원하는 테스트 코드를 확인할 수 있다. 따라서 babel은 필수적으로 설치해야 한다.

2. config 파일 설정

config 파일은 JSON이나 XML형식으로 작성하는 일종의 설정 파일이다. jest와 babel에 대한 설정을 config에 작성해야 원하는 대로 jest를 사용할 수 있다. 만약 별도의 config 파일을 생성하고 싶지 않다면 package.json 파일 내에 설정을 함께 작성하는 방식도 있다. (cf. nest 내에서 jest 설정이 이와 같은 방식을 사용한다고 한다.)

2-1. jest.confing.js

module.exports = {
  moduleFileExtensions: ["js", "json", "jsx", "ts", "tsx", "json"],
  transform: {
    "^.+\\.(js|jsx)?$": "babel-jest",
  },
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/$1",
    '\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/__mocks__/fileMock.js',
    '\\.(css|less)$': '<rootDir>/__mocks__/fileMock.js',
  },
  testMatch: [
    "<rootDir>/**/*.test.(js|jsx|ts|tsx)",
    "<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))",
  ],
  transformIgnorePatterns: ["<rootDir>/node_modules/"],
};

moduleFileExtensions : 프로젝트 내에서 사용하는 모듈의 확장자들을 적는다.
transform :
moduleNameMapper :
testMatch :
transformIgnorePatterns :
config 내에 중간중간 존재하는 rootDir은 jest config 파일 혹은 package.json파일의 위치를 나타낸다.

2-2. babel.config.js

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

2-3. test 명령어 추가

CLI에서 npm test를 입력하면 jest 테스트가 돌 수 있도록 설정하기 위해 package.json에 다음 설정을 추가한다.

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

3. 첫 번째 에러

이 정도만 하고 test를 시도해보면 다음 에러가 발생한다.

ReferenceError: module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and 'C:\{경로}\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///C:/{경로}/jest.config.js:1:1
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

모듈이 defined되지 않았다는 오류인데, 해당 오류는 babel config 파일과 jest config 파일의 확장자를 js에서 cjs로 변경하면 해결된다.

이 에러를 해결하면 다음과 같이 간단한 테스트 코드는 잘 실행이 된다.

let temp;
describe("simple test", () => {
  beforeEach(() => {
    temp = 1;
  });
  
  afterEach(() => {
    temp = 0;
  });
  
  test('tmep is 1', () => {
    expect(temp).toBe(1); // true
  });
  
  test('temp is 1', () => {
    expect(temp).toBe(1); // true
  });
});

테스트 코드 성공