[트러블슈팅] Jest -> Vitest 마이그레이션 방법

목차 (OPEN)

• 🧪 변경 이유
• 🔁  Jest 👉🏻 Vitest 마이그레이션 방법
• 📚 결론

 

 

 

 

 

 

🧪 변경 이유

Jest는 Facebook에서 만든 JavaScript 테스팅 프레임워크로, 강력한 기능과 생태계를 자랑한다.

그러나, 내 프로젝트의 개발 환경인 Vite와는 궁합이 좋지 않아서 여러 에러들이 발생했다.

 

그래서 애를 먹던 중에 ..🤯

Vitest는 Vite의 빠른 번들링을 그대로 활용해서 빠른 실행이 가능하며,

Jest와 유사한 API로 진입 장벽이 낮을 뿐만 아니라

tsconfig, alias 등의 설정이 Vite 설정만으로 대부분 해결이 된다는 것을 알게 되었다.

 

그래서 Jest를 제거하고 Vitest로 전환하기로 결정했다.

 

 

🔁  Jest 👉🏻 Vitest 마이그레이션 방법

1️⃣ 기존 Jest 관련 의존성들을 모두 제거하고, Vitest 설치하기

pnpm remove jest ts-jest jest-environment-jsdom "@types/jest"
pnpm add -D vitest @vitest/coverage-v8 jsdom

 

2️⃣ vitest.config.ts 수정하기

import { defineConfig } from 'vitest/config';
import { dirname } from 'path';
import { fileURLToPath } from 'url';
import path from 'path';
import react from '@vitejs/plugin-react';

const __filename = fileURLToPath(import.meta.url); // 현재 파일의 전체 경로
const __dirname = dirname(__filename); // 현재 파일이 위치한 디렉토리 경로

// Vite 설정
export default defineConfig({
  // 사용할 플러그인 목록
  plugins: [react()],

  // import 경로 관련 설정
  resolve: {
    alias: {
      // @은 'src' 폴더로 매핑되도록 설정
      '@': path.resolve(__dirname, './src'),
    },
  },

  /* 👇 Vitest 전용 옵션 */
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './src/setupTests.ts',
    coverage: {
      provider: 'v8',
      reporter: ['text', 'lcov'],
      exclude: ['dist', 'node_modules'],
    },
  },
});

 

3️⃣ 커버리지 설정하기

pnpm add -D @vitest/coverage-v8

 

4️⃣ TypeScrip 전역 타입 설정하기

tsconfig.json의 compilerOptions 블록 안에 types에 "vitest/globals"을 추가해주면 된다.

내 설정의 경우 아래와 같다.

{
  "files": [],
  "moduleResolution": "Node",
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "types": [
      "vite/client",
      "vitest/globals",
      "node",
      "@testing-library/jest-dom"
    ],
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

 

5️⃣ API 변경하기 (jest -> vi)

/* 샘플 */
// Before
jest.mock('@/apis/axios');
jest.fn();

// After
vi.mock('@/apis/axios');
vi.fn();

 

6️⃣ 전역 CSS → CSS 모듈화

Vitest는 Jest와 달리 CSS 모듈을 직접 사용하는 방식이 권장된다고 한다.

/* 샘플 */
// Before
import '@/styles/LoginForm.css';
<div className="login-form">

// After
import styles from './LoginForm.module.css';
<div className={styles.form}>

 

7️⃣ CI 환경 명령 변경

Vitest는 Jest처럼 --ci 옵션을 지원하지 않기 때문에 아래와 같이 바꿔주었다.

- name: Run Tests with Coverage
  run: pnpm vitest run --coverage --passWithNoTests

 

 

📚 결론

Jest로 테스트를 진행하며 수많은 에러 때문에 고생하는 과정에서

Vite 프로젝트라면 Vitest가 사실상 표준이라고 할 수 있음을 알게 되었다.. 😓

무작정 남들이 많이 사용하는 걸로 프로젝트를 하는게 아니라

확실히 찾아보고 시작해야 고생을 덜 한다는 걸 다시금 느낄 수 있었다 ..ㅎㅎ

 

또한, Jest에서 Vitest로 옮기는 과정이 단순해보였는데,

막상 하나씩 바꾸다 보니까 여러 에러와 마주쳤어서 이렇게 공유하게 되었다.

누군가에게는 도움이 되길 ,,👏🏻