Vergleiche mit anderen Test-Runnern

Jest

Jest hat sich im Bereich der Test-Frameworks etabliert, indem es Out-of-the-box-Unterstützung für die meisten JavaScript-Projekte, eine komfortable API (it und expect) und ein umfassendes Paket an Testfunktionen (Snapshots, Mocks, Coverage) bietet, die für die meisten Setups erforderlich sind. Wir sind dem Jest-Team und der Community dankbar für die Schaffung einer angenehmen Test-API und die Weiterentwicklung vieler Teststandards, die heute im Web-Ökosystem etabliert sind.

Es ist möglich, Jest in Vite-Umgebungen zu verwenden. @sodatea hat vite-jest entwickelt, das eine erstklassige Vite-Integration für Jest bieten soll. Die letzten Hindernisse in Jest wurden behoben, daher ist dies eine valide Option für Ihre Unit-Tests.

In einer Welt, in der wir Vite haben, das Unterstützung für die gängigsten Web-Tools (TypeScript, JSX, die meisten beliebten UI-Frameworks) bietet, stellt Jest jedoch eine zusätzliche Komplexität dar. Wenn Ihre App von Vite betrieben wird, lässt es sich nicht rechtfertigen, zwei verschiedene Pipelines zu konfigurieren und zu pflegen. Mit Vitest können Sie die Konfiguration für Ihre Entwicklungs-, Build- und Testumgebungen als eine einzige Pipeline definieren, die dieselben Plugins und dieselbe vite.config.js teilt.

Auch wenn Ihre Bibliothek Vite nicht verwendet (z. B. wenn sie mit esbuild oder Rollup erstellt wurde), ist Vitest eine interessante Option, da es Ihnen einen schnelleren Durchlauf für Ihre Unit-Tests und eine verbesserte Entwicklererfahrung (DX) dank des Standard-Watch-Modus mit Vite Instant Hot Module Reload (HMR) bietet. Vitest bietet Kompatibilität mit den meisten Jest-APIs und Ökosystem-Bibliotheken, sodass es in den meisten Projekten ein nahtloser Ersatz für Jest sein sollte.

Cypress

Cypress ist ein browserbasierter Test-Runner und ein ergänzendes Tool zu Vitest. Wenn Sie Cypress verwenden möchten, empfehlen wir, Vitest für die gesamte Logik ohne grafische Oberfläche in Ihrer Anwendung und Cypress für die gesamte browserseitige Logik zu verwenden.

Cypress ist bekannt als ein End-to-End-Testtool, aber sein neuer Komponenten-Test-Runner bietet eine hervorragende Unterstützung für das Testen von Vite-Komponenten und ist eine ideale Wahl, um alles zu testen, 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 Testmechanismus von Cypress konzentriert sich darauf, festzustellen, ob Elemente sichtbar, zugänglich und interaktiv sind. Cypress wurde speziell für die UI-Entwicklung und das Testen konzipiert, und seine DX ist darauf ausgelegt, Ihre visuellen Komponenten testgetrieben zu entwickeln/zu testen. Sie sehen Ihre Komponente neben dem Testbericht gerendert. Sobald der Test abgeschlossen ist, bleibt die Komponente interaktiv, und Sie können alle auftretenden Fehler mit den Entwicklertools Ihres Browsers debuggen.

Im Gegensatz dazu liegt der Fokus von Vitest darauf, die bestmögliche DX für blitzschnelles, headless Testen zu liefern. Node-basierte Runner wie Vitest unterstützen verschiedene teilweise implementierte Browserumgebungen, wie z. B. jsdom, die genügend Funktionalität bieten, um schnell Code zu testen, der Browser-APIs verwendet. Der Nachteil ist, dass diese Browserumgebungen Einschränkungen in dem haben, was sie implementieren können. Zum Beispiel fehlen jsdom eine Reihe von Funktionen wie window.navigation oder eine Layout-Engine (offsetTop, etc.).

Schließlich gleicht der Cypress-Test-Runner im Gegensatz zum Web Test Runner eher einer IDE als einem reinen Test-Runner, da Sie die tatsächlich gerenderte Komponente im Browser sehen, zusammen mit ihren Testergebnissen und Protokollen.

Cypress hat zudem Vite in seine Produkte integriert: Neuaufbau der App-UI mit Vitesse und Verwendung von Vite, um die Entwicklung ihrer Projekte testgetrieben voranzutreiben.

Wir glauben, dass Cypress keine gute Option für das Unit-Testing von headless Code ist, aber dass die Verwendung von Cypress (für E2E- und Komponenten-Tests) und Vitest (für Unit-Tests) die Testanforderungen Ihrer App abdecken würde.

WebdriverIO

WebdriverIO ist, ähnlich wie Cypress, ein browserbasierter Test-Runner und ein ergänzendes Tool zu Vitest. Es kann sowohl als End-to-End-Testtool als auch für das Testen von Webkomponenten eingesetzt werden. Es verwendet sogar Komponenten von Vitest intern, z. B. für 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 Webstandards für die Automatisierung, wodurch einige der Nachteile und Einschränkungen beim Ausführen von Tests in Cypress überwunden werden. Darüber hinaus können Sie Tests auch auf Mobilgeräten ausführen und Ihre Anwendung somit in noch mehr Umgebungen testen.

Web Test Runner

@web/test-runner führt Tests in einem Headless-Browser durch 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 Entwicklertools, obwohl keine Benutzeroberfläche zum schrittweisen Ausführen des Tests angezeigt wird, wie dies bei Cypress-Tests der Fall ist.

Um @web/test-runner in einem Vite-Projekt zu verwenden, nutzen Sie @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 aus, sodass Tests nicht isoliert sind und sich gegenseitig beeinflussen können. Vitest hingegen verwendet Worker-Threads, um Tests zu isolieren und parallel auszuführen.

Für die Transformation Ihres Codes nutzt uvu require- und loader-Hooks. Vitest verwendet Vite, sodass Dateien mit der vollen Leistung des Vite-Plugin-Systems transformiert werden. In einer Welt, in der wir Vite haben, das Unterstützung für die gängigsten Web-Tools (TypeScript, JSX, die gängigsten UI-Frameworks) bietet, stellt uvu eine Verdopplung der Komplexität dar. Wenn Ihre App von Vite betrieben wird, ist es nicht zu rechtfertigen, zwei verschiedene Pipelines zu konfigurieren und zu pflegen. Mit Vitest können Sie die Konfiguration für Ihre Entwicklungs-, Build- und Testumgebungen als eine einzige Pipeline definieren, die dieselben Plugins und dieselbe Konfiguration teilt.

uvu bietet keinen intelligenten Watch-Modus, um geänderte Tests erneut auszuführen, während Vitest Ihnen dank des Standard-Watch-Modus mit Vite Instant Hot Module Reload (HMR) eine hervorragende Developer Experience bietet.

uvu ist eine schnelle Lösung für die Ausführung einfacher Tests, aber Vitest kann für komplexere Tests und Projekte schneller und zuverlässiger sein.