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

관련 마이그레이션

관련 가이드

React Compiler 1.0 실전 마이그레이션 가이드 — useMemo·useCallback 없는 React 개발Tailwind CSS v4 심층 분석 — Oxide 엔진, CSS-first 설정, 마이그레이션 전략Vite vs Webpack 2026 — 프론트엔드 번들러 실전 비교Vitest 실전 튜토리얼 — React 단위 테스트부터 컴포넌트 테스트, GitHub Actions CI 연동까지