TechFeedTechFeed
테스트난이도 보통반나절~하루

Jest에서 Vitest로 마이그레이션

JestVitest
요약: Vitest는 Jest와 거의 호환되는 API에 Vite 기반의 빠른 실행을 제공합니다. Vite 프로젝트라면 설정을 공유해 transform 중복이 사라집니다.

왜 옮기나

  • Vite 프로젝트에서 Jest는 별도 transform(babel-jest 등) 설정이 필요해 번거롭습니다.
  • Vitest는 Vite 설정을 그대로 재사용하고 ESM·TS를 기본 지원합니다.
  • describe/it/expect 등 API가 Jest와 호환돼 전환 비용이 낮습니다.

전제 — 현재 상태

Jest + babel-jest/ts-jest, jest.config, jsdom 환경.

마이그레이션 단계

1
Vitest 설치

Vitest와 jsdom 환경을 설치합니다.

npm install -D vitest jsdom @testing-library/jest-dom
2
vite.config에 test 추가

Vite 설정에 test 옵션을 더합니다. globals:true면 import 없이 describe/it을 쓸 수 있습니다.

// vite.config.js
test: { globals: true, environment: 'jsdom', setupFiles: './setup.js' }
3
jest 전역 → vi

jest.fn/jest.mock 등을 vi.fn/vi.mock으로 바꿉니다(이름만 다름).

import { vi } from 'vitest'
const fn = vi.fn()
4
스크립트 교체

test 스크립트를 vitest로 바꿉니다.

"test": "vitest"

⚠️ 막히는 케이스 · 함정

  • jest.mock의 호이스팅 동작과 vi.mock이 미세하게 달라 일부 모킹은 조정이 필요합니다.
  • globals:false면 describe/it/expect를 vitest에서 import해야 합니다.
  • CommonJS 전용 의존성 모킹은 deps 설정이 필요할 수 있습니다.
✅ 검증: 전체 테스트가 통과하고, watch 모드 속도와 커버리지(c8/v8)가 정상 동작하는지 확인합니다.
VitestJest테스트Vitemock

관련 마이그레이션

관련 가이드

플레이라이트, Next.js, CI | E2E 테스트를 로컬에서 깔고 깃허브 액션에 붙이는 순서MSW, API 모킹, 브라우저 핸들러, Vitest | 컴포넌트 테스트 전에 어떻게 붙이나?성능 예산, 번들 사이즈, Lighthouse CI, 서드파티 | PR에서 어떻게 막을까?Vitest, Jest, 단위 테스트, Vite 마이그레이션 | 기존 설정을 언제 옮길까?