Vitest를 선택하는 이유

참고

이 가이드는 Vite에 익숙하다고 전제합니다. 더 자세히 알아보는 좋은 방법은 Vite 사용 이유 가이드와 ViteJS를 사용한 차세대 프런트엔드 툴링을 읽는 것입니다. 이 라이브 스트림에서 Evan You는 주요 개념을 설명하는 데모를 진행했습니다.

Vite 네이티브 테스트 러너의 필요성

Vite는 일반적인 웹 패턴에 대한 기본 지원, glob import 및 SSR 프리미티브와 같은 기능, 그리고 다양한 플러그인 및 통합을 통해 활기찬 생태계를 조성하고 있습니다. Vite의 개발 및 빌드 과정은 성공의 핵심입니다. 문서화 측면에서는 Vite 기반의 여러 SSG(정적 사이트 생성기) 대안들이 존재합니다. 하지만 Vite의 유닛 테스트에 대한 이야기는 명확하지 않았습니다. Jest와 같은 기존 옵션들은 다른 맥락에서 만들어졌습니다. Jest와 Vite 사이에는 많은 중복이 발생하여, 사용자들이 두 가지 다른 파이프라인을 구성해야 했습니다.

테스트 중에 Vite 개발 서버를 사용하여 파일을 변환함으로써, 소스 파일 변환의 복잡성을 처리할 필요 없이 테스트 시 최상의 개발자 경험(DX) 제공에만 집중할 수 있는 간단한 러너를 만들 수 있습니다. 이는 앱의 동일한 구성(vite.config.js를 통해)을 사용하며, 개발, 빌드 및 테스트 시에 공통 변환 파이프라인을 공유하는 테스트 러너입니다. 동일한 플러그인 API를 통해 확장 가능해 도구의 유지 관리자와 함께 Vite와 최고 수준의 통합을 제공할 수 있습니다. 처음부터 Vite를 고려해 설계되었으며, 즉각적인 HMR(Hot Module Reload)과 같은 DX 개선 사항을 활용하는 도구입니다. 이것이 바로 Vite 기반의 차세대 테스트 프레임워크인 Vitest입니다.

Jest의 엄청난 채택을 고려하여, Vitest는 대부분의 프로젝트에서 드롭인 대체품으로 사용할 수 있는 호환 가능한 API를 제공합니다. 또한 유닛 테스트를 설정할 때 필요한 가장 일반적인 기능들(모킹, 스냅샷, 커버리지)을 포함합니다. Vitest는 성능에 많은 관심을 기울이며, Worker 스레드를 사용하여 가능한 한 많은 작업을 병렬로 실행합니다. 일부 환경에서는 테스트 실행 속도가 수십 배 빨라진 경우도 있습니다. Watch 모드는 기본적으로 활성화되어 있으며, 이는 Vite가 개발자 경험을 우선시하는 방식과 일치합니다. DX의 모든 개선 사항에도 불구하고 Vitest는 종속성을 신중하게 선택하거나(또는 필요한 부분을 직접 인라인하여) 경량성을 유지합니다.

Vitest는 Vite 프로젝트를 위한 최고의 테스트 러너로 자리매김하고, Vite를 사용하지 않는 프로젝트에도 견고한 대안이 되는 것을 목표로 합니다.

시작하기 가이드에서 더 읽어보세요.

Vitest는 X와 어떻게 다른가요?

Vitest가 다른 유사한 도구와 어떻게 다른지에 대한 자세한 내용은 비교 섹션을 참조하세요.