다른 테스트 러너와의 비교

Jest

Jest는 대부분의 JavaScript 프로젝트에서 별도의 설정 없이 바로 사용할 수 있는 지원, 편리한 API(it 및 expect), 그리고 대부분의 테스트 기능(스냅샷, 목, 커버리지)을 제공하여 테스트 프레임워크 분야에서 두각을 나타냈습니다. 우리는 만족스러운 테스트 API를 만들고 웹 생태계에서 표준이 된 많은 테스트 패턴을 발전시킨 Jest 팀과 커뮤니티에 감사드립니다.

Vite 설정에서 Jest를 사용할 수 있습니다. @sodatea는 Jest에 대한 일류 Vite 통합을 제공하는 것을 목표로 하는 vite-jest를 만들었습니다. Jest의 마지막 장애 요인이 해결되었으므로, 이는 단위 테스트를 위한 유효한 옵션입니다.

그러나 가장 일반적인 웹 도구(TypeScript, JSX, 가장 인기 있는 UI 프레임워크)를 지원하는 Vite가 있는 환경에서 Jest는 복잡도의 중복을 야기합니다. 앱이 Vite로 구동되는 경우, 두 개의 다른 파이프라인을 구성하고 유지 관리하는 것은 비효율적입니다. Vitest를 사용하면 개발, 빌드 및 테스트 환경에 대한 구성을 단일 파이프라인으로 정의하여 동일한 플러그인과 vite.config.js를 공유할 수 있습니다.

라이브러리가 Vite를 사용하지 않더라도(예: esbuild 또는 Rollup으로 빌드된 경우), Vitest는 단위 테스트를 더 빠르게 실행하고 Vite의 즉각적인 HMR(Hot Module Reload)을 사용하는 기본 watch 모드 덕분에 개발자 경험(DX)이 향상되므로 매력적인 옵션입니다. Vitest는 대부분의 Jest API 및 생태계 라이브러리와 호환되므로 대부분의 프로젝트에서 Jest를 즉시 대체할 수 있습니다.

Cypress

Cypress는 브라우저 기반 테스트 러너이며 Vitest의 보완 도구입니다. Cypress를 사용하려면 애플리케이션의 모든 헤드리스 로직에는 Vitest를 사용하고 모든 브라우저 기반 로직에는 Cypress를 사용하는 것이 좋습니다.

Cypress는 E2E(End-to-End) 테스트 도구로 잘 알려져 있으며, 새로운 컴포넌트 테스트 러너는 Vite 컴포넌트 테스트를 훌륭하게 지원하여 브라우저에서 렌더링되는 모든 것을 테스트하는 데 이상적인 선택입니다.

Cypress, WebdriverIO 및 Web Test Runner와 같은 브라우저 기반 러너는 실제 브라우저와 실제 브라우저 API를 사용하기 때문에 Vitest가 포착할 수 없는 문제를 잡아낼 수 있습니다.

Cypress의 테스트 드라이버는 요소의 가시성, 접근성 및 상호작용 여부를 판단하는 데 중점을 둡니다. Cypress는 UI 개발 및 테스트를 위해 특별히 제작되었으며, DX는 시각적 컴포넌트 테스트에 중점을 둡니다. 컴포넌트가 테스트 리포터 옆에 렌더링되는 것을 볼 수 있습니다. 테스트가 완료되면 컴포넌트는 계속 상호 작용하며 브라우저 개발자 도구를 사용하여 발생하는 모든 오류를 디버그할 수 있습니다.

대조적으로, Vitest는 번개처럼 빠른 헤드리스 테스트를 위한 최고의 개발자 경험(DX)을 제공하는 데 중점을 둡니다. Vitest와 같은 Node 기반 러너는 jsdom과 같이 브라우저 API를 참조하는 모든 코드를 빠르게 단위 테스트할 수 있도록 충분히 구현된 브라우저 환경을 지원합니다. 단점은 이러한 브라우저 환경은 구현할 수 있는 기능에 제한이 있다는 것입니다. 예를 들어, jsdom은 window.navigation 또는 레이아웃 엔진(offsetTop 등)과 같은 여러 기능이 누락되어 있습니다.

마지막으로, Web Test Runner와 비교할 때 Cypress 테스트 러너는 테스트 결과와 로그를 함께 보여주며 브라우저에서 실제 렌더링된 컴포넌트를 볼 수 있기 때문에 테스트 러너라기보다는 IDE에 가깝습니다.

Cypress는 또한 제품에 Vite를 통합하고 있습니다. Vitesse를 사용하여 앱의 UI를 재구축하고 Vite를 사용하여 프로젝트 개발을 진행하고 있습니다.

우리는 Cypress가 헤드리스 코드 단위 테스트에 좋은 옵션이 아니라고 생각하지만, Cypress(E2E 및 컴포넌트 테스트용)와 Vitest(단위 테스트용)를 함께 사용하면 앱의 테스트 요구 사항을 충족할 수 있다고 생각합니다.

WebdriverIO

WebdriverIO는 Cypress와 유사하게 브라우저 기반 테스트 러너이며 Vitest의 보완 도구입니다. E2E(End-to-End) 테스트 도구로 사용될 수 있을 뿐만 아니라 웹 컴포넌트 테스트에도 사용될 수 있습니다. 심지어 컴포넌트 테스트 내에서 모의 생성 및 스텁을 위해 Vitest의 컴포넌트를 내부적으로 사용하기도 합니다.

WebdriverIO는 Cypress와 동일한 장점을 제공하여 실제 브라우저에서 로직을 테스트할 수 있습니다. 그러나 자동화를 위해 실제 웹 표준을 사용하므로 Cypress에서 테스트를 실행할 때의 일부 절충점과 제한 사항을 극복합니다. 또한 모바일에서도 테스트를 실행할 수 있어, 더 많은 환경에서 애플리케이션을 테스트할 수 있도록 해줍니다.

Web Test Runner

@web/test-runner는 헤드리스 브라우저 내에서 테스트를 실행하여 브라우저 API 또는 DOM을 모킹할 필요 없이 웹 애플리케이션과 동일한 실행 환경을 제공합니다. 이를 통해 개발자 도구를 사용하여 실제 브라우저 내에서 디버깅할 수도 있지만, Cypress 테스트에서처럼 테스트를 단계별로 진행하는 UI는 표시되지 않습니다.

Vite 프로젝트에서 @web/test-runner를 사용하려면 @remcovaes/web-test-runner-vite-plugin을 사용하세요. @web/test-runner에는 단언 또는 모의 생성 라이브러리가 포함되어 있지 않으므로 직접 추가해야 합니다.

uvu

uvu는 Node.js 및 브라우저용 테스트 러너입니다. 단일 스레드에서 테스트를 실행하므로 테스트가 격리되지 않고 파일 간에 영향을 미칠 수 있습니다. 그러나 Vitest는 워커 스레드를 사용하여 테스트를 격리하고 병렬로 실행합니다.

코드를 변환하기 위해 uvu는 require 및 로더 훅에 의존합니다. Vitest는 Vite를 사용하므로 파일은 Vite의 플러그인 시스템의 모든 기능을 사용하여 변환됩니다. 가장 일반적인 웹 도구(TypeScript, JSX, 가장 인기 있는 UI 프레임워크)를 지원하는 Vite가 있는 환경에서 uvu는 불필요한 복잡성을 더합니다. 앱이 Vite로 구동되는 경우, 두 개의 다른 파이프라인을 구성하고 유지 관리하는 것은 비합리적입니다. Vitest를 사용하면 개발, 빌드 및 테스트 환경에 대한 구성을 단일 파이프라인으로 정의하여 동일한 플러그인과 동일한 구성을 공유할 수 있습니다.

uvu는 변경된 테스트를 다시 실행하는 효율적인 watch 모드를 제공하지 않지만, Vitest는 Vite의 즉각적인 HMR(Hot Module Reload)을 사용하는 기본 watch 모드 덕분에 놀라운 DX를 제공합니다.

uvu는 간단한 테스트를 실행하는 빠른 옵션이지만, Vitest는 더 복잡한 테스트 및 프로젝트에 대해 더 빠르고 안정적일 수 있습니다.