devtools
Vitest 완벽 가이드 — Jest를 대체하는 Vite 네이티브 테스트 프레임워크
Vite 기반 프로젝트에서 Jest보다 10배 빠른 Vitest로 유닛 테스트와 컴포넌트 테스트를 구성하는 방법을 상세히 정리하였다.
- ·Vitest 출시: 2021년 (Antfu 개발)
- ·Jest 호환 API 제공 — describe, it, expect 동일
- ·ESM 네이티브 지원 (Jest는 CommonJS 기본)
- ·Vite 설정 재사용 — 별도 바벨 설정 불필요
Jest로 작성된 테스트 스위트 600개를 Vitest로 마이그레이션하는 데 이틀이 걸렸다. vi.mock() 문법 차이와 몇 가지 환경 설정 조정이 필요했지만, 전환 후 전체 테스트 실행 시간이 4분 20초에서 58초로 단축되었다. 워치 모드에서의 반응 속도가 비약적으로 빨라져 TDD 사이클이 체감상 두 배 이상 빨라진 효과를 누렸다.
Vitest가 Jest를 빠르게 대체하는 이유
Vite 기반의 속도 우위
Vitest는 Vite의 변환 파이프라인을 그대로 활용하여 테스트를 실행한다. Jest가 각 테스트 파일을 독립적인 Node.js 워커에서 CommonJS로 변환하는 방식과 달리, Vitest는 Vite의 ESM 네이티브 변환을 사용하기 때문에 TypeScript·JSX 트랜스파일 설정을 별도로 추가할 필요가 없다. 콜드 스타트 시간이 Jest 대비 평균 5~10배 빠르며, 워치 모드에서의 재실행 속도 차이는 더욱 극적이다. 특히 모노레포 환경에서 Vite 설정을 공유하는 패키지들은 Vitest 도입으로 테스트 실행 시간을 크게 단축할 수 있다.
Jest API 호환성과 마이그레이션
Vitest는 Jest와 호환되는 API를 제공하기 때문에 대부분의 기존 테스트 코드를 수정 없이 그대로 사용할 수 있다. describe, it, test, expect, beforeEach, afterEach, vi.mock() 등의 함수가 동일한 인터페이스를 제공한다. 주요 차이는 jest 전역 객체 대신 vi를 사용한다는 점이다. jest.mock()을 vi.mock()으로 일괄 변경하고, @jest/globals 임포트를 vitest로 변경하는 것이 마이그레이션의 핵심이다. 공식 마이그레이션 가이드를 따르면 대부분의 중소 규모 프로젝트를 하루 내에 전환할 수 있다.
컴포넌트 테스트와 UI 테스트
@testing-library/react와의 통합
Vitest는 @testing-library/react와 완벽하게 통합된다. jsdom 또는 happy-dom 환경을 설정하여 브라우저 DOM API를 시뮬레이션할 수 있으며, vite.config.ts의 test.environment 옵션으로 선택한다. render()로 컴포넌트를 마운트하고 userEvent로 사용자 인터랙션을 시뮬레이션하는 패턴은 Jest와 완전히 동일하다. 스냅샷 테스트 역시 toMatchSnapshot() API가 동일하게 동작한다.
브라우저 모드(Vitest Browser Mode)
Vitest 1.0부터 도입된 Browser Mode는 jsdom 시뮬레이션을 벗어나 실제 Chromium 브라우저에서 테스트를 실행하는 기능이다. Playwright나 WebdriverIO를 드라이버로 사용하여 실제 DOM 환경에서 컴포넌트를 테스트하기 때문에, jsdom과 실제 브라우저 간 동작 차이로 인한 거짓 음성(false negative) 문제를 근본적으로 해소한다. 아직 안정화 단계이지만 스크롤, 포커스, IntersectionObserver처럼 jsdom이 지원하지 않는 API를 테스트할 때 유용하다.
코드 커버리지와 CI 연동
V8 및 Istanbul 커버리지 설정
Vitest는 V8 네이티브 커버리지와 Istanbul 두 가지 커버리지 제공자를 지원한다. V8 커버리지는 Node.js에 내장된 커버리지 엔진을 사용하여 별도 계측 코드를 삽입하지 않아 성능이 뛰어나다. vitest run --coverage 명령으로 커버리지 리포트를 생성하고, --reporter=json 플래그로 CI 환경의 커버리지 게이트와 통합할 수 있다. GitHub Actions에서 codecov 액션과 연동하면 PR마다 커버리지 변화를 자동으로 추적할 수 있다.
자주 묻는 질문
Jest를 사용하는 기존 프로젝트를 Vitest로 마이그레이션하는 데 얼마나 걸리나요?+
소규모 프로젝트는 1~2시간, 대규모 프로젝트도 대부분 하루 내에 완료됩니다. vi.mock() API 차이와 환경 설정(jsdom/happy-dom)이 주요 전환 포인트입니다.
Vitest와 Jest 중 어떤 것을 새 프로젝트에서 선택해야 하나요?+
Vite 기반 프로젝트라면 Vitest를 권장합니다. CRA나 webpack 기반 프로젝트는 Jest가 더 성숙한 생태계를 제공합니다.
관련 글
Vite 6 완벽 가이드 — 환경 API와 Rolldown 통합으로 빌드 혁신
Vite 6의 환경 API(Environment API), Rolldown 통합, 런타임 독립성 강화, 플러그인 마이그레이션 전략을 실무 예제와 함께 정리하였다.
Playwright 완벽 가이드 — 2026년 E2E 테스트의 표준
Microsoft가 개발한 Playwright로 크로스 브라우저 E2E 테스트를 구성하고 CI/CD 파이프라인에 통합하는 방법을 상세히 정리하였다.
Biome 완벽 가이드 — ESLint와 Prettier를 하나로 대체하는 Rust 기반 도구
Biome의 린터·포매터 통합 기능, ESLint 대비 25배 빠른 성능, 마이그레이션 전략과 CI 통합 방법을 실무 관점에서 정리하였다.