Vergleiche mit anderen Test-Runnern

Jest

Jest dominierte den Bereich der Test-Frameworks, indem es Out-of-the-Box-Unterstützung für die meisten JavaScript-Projekte, eine benutzerfreundliche API (it und expect) sowie ein umfassendes Paket an Testfunktionen bot, das die meisten Setups benötigen (Snapshots, Mocks, Coverage). Wir danken dem Jest-Team und der Community für die Entwicklung einer angenehmen Test-API und die Förderung vieler Testmuster, die im Web-Ökosystem Standard sind.

Es ist möglich, Jest in Vite-Setups zu verwenden. @sodatea hat vite-jest entwickelt, das eine erstklassige Vite-Integration für Jest bieten soll. Die letzten Blocker in Jest wurden behoben, was es zu einer validen Option für Ihre Unit-Tests macht.

In einer Welt mit Vite, das Unterstützung für die gängigsten Web-Toolings (TypeScript, JSX, die meisten gängigen UI-Frameworks) bietet, führt Jest jedoch zu unnötiger Komplexitätsverdopplung. Wenn Ihre App auf Vite basiert, ist es schwer zu rechtfertigen, zwei verschiedene Pipelines zu konfigurieren und zu warten. Mit Vitest können Sie die Konfiguration für Ihre Entwicklungs-, Build- und Testumgebungen als eine einzige Pipeline definieren und dabei dieselben Plugins und dieselbe vite.config.js verwenden.

Selbst wenn Ihre Bibliothek Vite nicht verwendet (z. B. wenn sie mit esbuild oder Rollup erstellt wurde), ist Vitest eine interessante Option, da es Ihnen schnellere Ausführungszeiten für Ihre Unit-Tests und eine verbesserte DX (Developer Experience) dank des standardmäßigen Watch-Modus mit Vite Instant Hot Module Reload (HMR) bietet. Vitest bietet Kompatibilität mit den meisten Jest-APIs und Ökosystembibliotheken, was es in den meisten Projekten zu einem problemlosen Ersatz für Jest macht.

Cypress

Cypress ist ein browserbasierter Test-Runner und ein ergänzendes Tool zu Vitest. Wenn Sie Cypress verwenden möchten, empfehlen wir Ihnen, Vitest für alle Headless-Komponenten in Ihrer Anwendung und Cypress für alle browserbasierten Logiken zu verwenden.

Cypress ist als End-to-End-Testtool bekannt, aber sein neuer Komponententest-Runner bietet exzellente Unterstützung für das Testen von Vite-Komponenten und ist eine ideale Wahl für das Testen von allem, was in einem Browser gerendert wird.

Browserbasierte Runner wie Cypress, WebdriverIO und Web Test Runner können Probleme erkennen, die Vitest nicht erkennen kann, da sie den echten Browser und echte Browser-APIs verwenden.

Der Testansatz von Cypress konzentriert sich darauf, zu überprüfen, ob Elemente sichtbar, zugänglich und interaktiv sind. Cypress wurde speziell für die UI-Entwicklung und das Testen konzipiert, wobei der Fokus der DX auf dem Testen Ihrer visuellen Komponenten liegt. Sie sehen Ihre Komponente zusammen mit dem Testreporter gerendert im Browser. Sobald der Test abgeschlossen ist, bleibt die Komponente interaktiv und Sie können alle aufgetretenen Fehler mit Ihren Browser-Entwicklungstools debuggen.

Im Gegensatz dazu konzentriert sich Vitest darauf, die bestmögliche DX für blitzschnelle Headless-Tests zu ermöglichen. Node-basierte Runner wie Vitest unterstützen verschiedene teilweise emulierte Browserumgebungen wie jsdom, die genug implementieren, damit Sie schnell Unit-Tests für jeden Code durchführen können, der auf Browser-APIs verweist. Der Kompromiss ist, dass diese Browserumgebungen Einschränkungen in dem haben, was sie implementieren können. Beispielsweise fehlen jsdom eine Reihe von Funktionen, darunter window.navigation oder eine Layout-Engine (offsetTop usw.).

Letztendlich ähnelt der Cypress-Test-Runner eher einer IDE als einem reinen Test-Runner, da Sie die tatsächlich gerenderte Komponente zusammen mit ihren Testergebnissen und Protokollen im Browser sehen.

Cypress hat auch Vite in seine Produkte integriert: Neuentwicklung der UI ihrer App mit Vitesse und Verwendung von Vite zur testgetriebenen Entwicklung ihres Projekts.

Wir sind der Meinung, dass Cypress keine gute Option für Unit-Tests von Headless-Code ist, aber dass die Kombination aus Cypress (für E2E- und Komponententests) und Vitest (für Unit-Tests) alle Testanforderungen Ihrer App erfüllen würde.

WebdriverIO

WebdriverIO ist, ähnlich wie Cypress, ein browserbasierter alternativer Test-Runner und ein ergänzendes Tool zu Vitest. Es kann als End-to-End-Testtool sowie zum Testen von Webkomponenten verwendet werden. Es verwendet sogar Komponenten von Vitest im Hintergrund, z. B. zum Mocking und Stubbing innerhalb von Komponententests.

WebdriverIO bietet ähnliche Vorteile wie Cypress und ermöglicht es Ihnen, Ihre Logik in einem echten Browser zu testen. Es verwendet jedoch tatsächliche Webstandards für die Automatisierung, wodurch einige der Kompromisse und Einschränkungen bei der Testausführung in Cypress umgangen werden. Darüber hinaus können Sie damit auch Tests auf Mobilgeräten ausführen und so Ihre Anwendung in noch mehr Umgebungen testen.

Web Test Runner

@web/test-runner führt Tests in einem Headless-Browser aus und bietet dieselbe Ausführungsumgebung wie Ihre Webanwendung, ohne dass Browser-APIs oder das DOM gemockt werden müssen. Dies ermöglicht auch das Debuggen in einem echten Browser mit den Devtools, obwohl im Gegensatz zu Cypress-Tests keine UI zum schrittweisen Durchlaufen des Tests angezeigt wird. Es gibt zwar einen Watch-Modus, der aber nicht so intelligent ist wie der von Vitest und möglicherweise nicht immer die gewünschten Tests erneut ausführt. Um @web/test-runner mit einem Vite-Projekt zu verwenden, nutzen Sie das @remcovaes/web-test-runner-vite-plugin. @web/test-runner enthält keine Assertion- oder Mocking-Bibliotheken, daher liegt es an Ihnen, diese hinzuzufügen.

uvu

uvu ist ein Test-Runner für Node.js und den Browser. Es führt Tests in einem einzigen Thread durch, sodass Tests nicht isoliert sind und über Dateien hinweg durchsickern können. Vitest verwendet jedoch Worker-Threads, um Tests zu isolieren und sie parallel auszuführen. Für die Transformation Ihres Codes verwendet uvu Require- und Loader-Hooks. Vitest verwendet Vite, sodass Dateien mit der gesamten Funktionalität des Vite-Plugin-Systems transformiert werden. Angesichts der Tatsache, dass Vite Unterstützung für die gängigsten Web-Toolings (TypeScript, JSX, die meisten gängigen UI-Frameworks) bietet, stellt uvu eine unnötige Komplexität dar. Wenn Ihre App auf Vite basiert, ist es nicht sinnvoll, zwei verschiedene Pipelines zu konfigurieren und zu warten. Mit Vitest können Sie die Konfiguration für Ihre Entwicklungs-, Build- und Testumgebungen als eine einzige Pipeline definieren und dabei dieselben Plugins und dieselbe vite.config.js verwenden. uvu bietet keinen intelligenten Watch-Modus, um die geänderten Tests erneut auszuführen, während Vitest Ihnen dank des standardmäßigen Watch-Modus mit Vite Instant Hot Module Reload (HMR) eine hervorragende DX ermöglicht. uvu ist eine schnelle Option zum Ausführen einfacher Tests, aber Vitest kann für komplexere Tests und Projekte sowohl schneller als auch zuverlässiger sein.