Jest를 Vite 프로젝트에 적용하기

사용 목적

프로젝트를 진행하며 점점 테스트 코드의 필요성을 느끼게 되었습니다.

한 부분에서 오류 나서 수정하면 기존에 잘 동작하던 부분에서 오류가 발생하고 수정하면 또 오류 발생하고... 무한반복...

지금 프로젝트가 이 상태....

오류를 수정하고 다른 곳에 문제가 없는지 직접 테스트해보는 건 정확도도 떨어지고 시간 낭비라 생각되었습니다. 

그렇기 때문에 관심은 많았지만 미뤄뒀던 테스트 코드 적용을 해야겠다고 마음먹었습니다!

테스트 코드를 작성해야하는 이유

1. 사업의 신뢰성

버그가 포함된 채로 배포된 코드는 서비스의 이미지를 추락시킵니다. 그리고 이 이미지를 회복하려면 많은 시간과 비용이 필요합니다. 테스트 코드는 예상하지 못한 버그를 조기에 발견해 서비스 이미지를 지켜주는 역할을 합니다. 

2. 높은 유지보수성

개발을 진행하다보면 리팩토링이 필요한 경우가 많은데 이 작업을 진행하다 원래의 기능을 잃고 버그가 발생하는 문제가 생길 수 있습니다. 문제가 발생하지 않게 하기 위해 테스트를 진행하기도 하지만 시간은 한정되어 있습니다. 

하지만 테스트 코드가 작성되어있다면 문제가 발생하는지 반복적으로 확인할 수 있기 때문에 자신 있게 지속적으로 리팩토링을 진행할 수 있습니다. 

3. 코드 품질 향상

테스트 코드를 작성하면 구현 코드의 품질을 되돌아보도록 합니다. 어떤 구현 코드의 테스트 작성이 어렵다면 해당 코드가 너무 많은 역할을 한다는 신호일 수 있기 때문에 해당 코드의 책임을 더 작은 부분으로 나눌 수 있는지 재검토해 더 좋은 코드를 작성할 수 있습니다. 한 컴포넌트가 하나의 기능만을 하도록 여러 컴포넌트로 분리하면 구현 코드의 책임을 파악하기 쉬워지고 테스트 코드 작성도 쉬워집니다.

Jest에서 공인하는 추천하지 않는 조합 Jest+Vite

가장 많이 사용되는 프레임워크 Jest를 사용해 보고자 마음을 먹었지만 

 

 완전히 지원되지 않기 때문에 사용하려면 Vite 공식 문서를 참고하라는데...

사실 vite에는 Vitest를 사용하는 것이 훨씬 더 원활한 테스트 환경을 제공할 수 있습니다. 테스트하는 속도도 월등히 빠릅니다! 

하지만 꿋꿋하게 Jest를 선택하기로 마음먹었습니다. 이에 대한 근거는

1. Jest가 Vitest에 비해 범용적으로 사용됨 (여러 프로젝트와 환경에서 광범위하게 사용됨)
2. React와 잘 통합되는 프레임워크이고, 이 프로젝트가 끝난다면 React로 프로젝트를 더 많이 할 것임
3. 지원 역사가 길어 성숙도가 높고 커뮤니티 지원이 잘 됨 (Jest : 2016~, Vitest : 2022~)
4. 코드 커버리지 보고서를 쉽게 생성할 수 있음
5. 프로젝트 자체가 소규모이기 때문에 테스트 시간이 많이 걸려봤자 얼마나 걸리겠어..라는 생각 

그렇기 때문에 추가적인 설정을 하고서라도 Jest를 사용할 수 있도록 개발 환경을 구축하였습니다. 

 

개발 환경 구축하기

1. Jest 설치

npm install --save-dev jest

2. Jest 초기 설정

npm init jest@latest

 

저는 다음과 같이 설정했습니다. 

jsdom의 경우엔 DOM 조작, 이벤트 트리거, 폼 입력, CSS 스타일 등을 테스트할 수 있기 때문에 선택했습니다.

babel의 경우엔 이벤트 핸들링이나 DOM 상호작용과 같은 작업을 정확하게 추적하고, 소규모 프로젝트이기 때문에 v8보다 적합하다 생각해 선택했습니다.

3. Babel 설치

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

4. jest.config.mjs 파일 설정

const config = {
    moduleFileExtensions: [
        "js",
        "mjs",
        "cjs",
        "jsx",
        "ts",
        "tsx",
        "json",
        "node",
    ],
    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/"],
};
export default config;

5. babel.config.json 파일 설정

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}

기존에 mjs, js로 만들어봤지만 전부 ESM과 CommonJS 호환성 문제가 발생해 json 형식의 Babel 설정 파일을 사용했습니다. 

6. 실행

npm test

실행했을 때 아래와 같은 오류 메시지가 발생하는데, 이는 jest-environment-jsdom 패키지가 기본적으로 제공되지 않으므로, 별도로 설치해야 한다는 오류입니다.

npm install --save-dev jest-environment-jsdom

jest-environment-jsdom을 설치해 주고, jest.config.mjs 파일을 수정합니다.

const config = {
    ...
    testEnvironment: "jest-environment-jsdom",
    ...
};
export default config;

 

npm test를 입력하면 테스트 파일을 만들지 않았기 때문에 에러가 발생할 것입니다. 

성공 메시지가 보고 싶다면 아래의 명령어를 입력해 보세요. 테스트가 없는 상황에서도 테스트 명령어가 실패하지 않도록 하는 명령어입니다.

npx jest --passWithNoTests

7. __test__폴더 루트에 위치시키기