다른 테스트 러너와의 비교

Jest

Jest는 즉시 사용 가능한 지원, 사용하기 편리한 API(it 및 expect), 그리고 대부분의 설정에 필요한 모든 테스트 기능(스냅샷, 모의, 커버리지)을 제공하여 테스트 프레임워크 분야에서 주도적인 역할을 해왔습니다. Jest 팀과 커뮤니티가 훌륭한 테스트 API를 만들고 현재 웹 생태계의 표준이 된 많은 테스트 패턴을 발전시킨 점에 감사를 드립니다.

Vite 설정에서 Jest를 사용하는 것도 가능합니다. @sodatea는 Jest에 대한 최고 수준의 Vite 통합을 목표로 하는 vite-jest를 만들었습니다. Jest의 마지막 문제 요소가 해결되었으므로, 이는 단위 테스트를 위한 유효한 선택지가 될 수 있습니다.

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

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

Cypress

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

Cypress는 엔드 투 엔드 테스트 도구로 잘 알려져 있지만, 새로운 컴포넌트 테스트 러너는 Vite 컴포넌트 테스트에 대한 훌륭한 지원을 제공하며 브라우저에서 렌더링되는 모든 것을 테스트하는 데 이상적인 선택입니다.

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

Cypress의 테스트 드라이버는 요소가 보이는지, 접근 가능한지, 상호 작용이 가능한지 확인하는 데 중점을 둡니다. Cypress는 UI 개발 및 테스트에 특화되어 있으며, 시각적 컴포넌트 테스트에 최적화된 개발자 경험(DX)을 제공합니다. 렌더링된 컴포넌트는 테스트 보고서와 함께 표시됩니다. 테스트가 완료되면 컴포넌트는 상호 작용 가능한 상태로 유지되며, 브라우저 개발자 도구를 사용하여 발생하는 모든 오류를 디버깅할 수 있습니다.

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

마지막으로, Web Test Runner와 달리 Cypress 테스트 러너는 테스트 결과와 로그뿐만 아니라 브라우저에서 실제 렌더링된 컴포넌트도 볼 수 있기 때문에 단순한 테스트 러너라기보다는 IDE에 더 가깝습니다.

Cypress는 또한 자사 제품에 Vite를 통합하고 있습니다. Vitesse를 사용하여 앱의 UI를 다시 빌드하고, Vite를 사용하여 프로젝트 개발을 테스트합니다.

Cypress는 헤드리스 코드의 단위 테스트에 적합한 옵션은 아니지만, Cypress(E2E 및 컴포넌트 테스트용)와 Vitest(단위 테스트용)를 함께 사용하면 앱의 테스트 요구 사항을 효과적으로 충족할 수 있습니다.

WebdriverIO

WebdriverIO는 Cypress와 유사하게 브라우저 기반의 대체 테스트 러너이며, Vitest를 보완하는 도구입니다. 엔드 투 엔드 테스트 도구일 뿐만 아니라 웹 컴포넌트 테스트에도 사용할 수 있습니다. 컴포넌트 테스트 내에서 모의 및 스터빙과 같이 Vitest의 구성 요소를 내부적으로 사용하기도 합니다.

WebdriverIO는 실제 브라우저에서 로직 테스트를 지원하여 Cypress와 유사한 장점을 제공합니다. 실제 [웹 표준]을 사용하여 자동화하므로 Cypress에서 테스트를 실행할 때 발생할 수 있는 일부 절충점과 제한 사항을 극복합니다. 또한 모바일 환경에서도 테스트를 실행할 수 있으므로 더 다양한 환경에서 애플리케이션을 테스트할 수 있습니다.

Web Test Runner

@web/test-runner는 헤드리스 브라우저 내에서 테스트를 실행하여 브라우저 API 또는 DOM을 모의할 필요 없이 웹 애플리케이션과 동일한 실행 환경을 제공합니다. 또한 테스트 단계별 실행을 위한 UI는 제공되지 않지만, 개발자 도구를 사용하여 실제 브라우저 내에서 디버깅할 수 있습니다. 자동 감시 기능이 있지만 Vitest만큼 스마트하지 않아 의도한 테스트가 항상 재실행되지 않을 수 있습니다. Vite 프로젝트에서 @web/test-runner를 사용하려면 @remcovaes/web-test-runner-vite-plugin을 사용하십시오. @web/test-runner에는 어설션이나 모의 라이브러리가 포함되어 있지 않으므로 직접 추가해야 합니다.

uvu

uvu는 Node.js 및 브라우저용 테스트 러너입니다. 단일 스레드에서 테스트를 실행하므로 테스트가 격리되지 않아 파일 간에 누출될 수 있습니다. 반면 Vitest는 작업자 스레드를 사용하여 테스트를 격리하고 병렬로 실행합니다. 코드를 변환하기 위해 uvu는 require 및 로더 후크에 의존합니다. Vitest는 Vite를 사용하므로 파일은 Vite의 플러그인 시스템의 모든 기능을 사용하여 변환됩니다. Vite가 가장 일반적인 웹 도구(TypeScript, JSX, 가장 인기 있는 UI 프레임워크)에 대한 지원을 기본적으로 제공하는 환경에서 uvu는 복잡성을 가중시키는 요소가 될 수 있습니다. 앱이 Vite로 구동되는 경우, 구성하고 유지 관리해야 할 서로 다른 두 개의 파이프라인을 갖는 것은 효율적이지 않습니다. Vitest를 사용하면 개발, 빌드 및 테스트 환경에 대한 구성을 단일 파이프라인으로 정의하여 동일한 플러그인과 vite.config.js 파일을 공유할 수 있습니다. uvu는 변경된 테스트를 자동으로 재실행하는 스마트 감시 기능을 제공하지 않지만, Vitest는 Vite의 즉각적인 핫 모듈 재로드(HMR)를 활용한 기본 감시 모드로 뛰어난 개발자 경험(DX)을 제공합니다. uvu는 간단한 테스트를 실행하는 데 빠른 옵션이지만, Vitest는 더 복잡한 테스트 및 프로젝트에서 더 빠르고 안정적일 수 있습니다.