Vitest Browser Mode im Praxis-Check

Das klassische Test-Setup für JavaScript-basierte (Single-Page-)Anwendungen ist Vitest (oder Jest) in Kombination zum Beispiel mit React Testing Library. Damit wird ein Browser simuliert, sodass das Ergebnis nur bedingt auf die Realität übertragbar ist. End-to-End-Tests im echten Browser sind realistisch, aber oft schwergewichtig in der Entwicklung.

Diese Lücke möchte der neue "Vitest Browser Mode" schließen, mit dem wir isolierte Komponenten direkt im Browser testen können. In Kombination mit der "Mock Service Worker"-Bibliothek zum Simulieren des Netzwerkverkehrs bekommen wir so realistische Tests.

Aber funktioniert das auch? In diesem Live-Coding-Vortrag zeige ich euch die Tools und prüfe sie hinsichtlich Features, Performance, Entwicklung etc.

Für den Vortrag sind keine besonderen Kenntnisse notwendig. Die gezeigten Tools, insb. "Vitest", den "Vitest Browser Mode" und die "Mock Service Worker"-Bibliothek zeige ich euch von Grund auf. Als Beispiel kommt eine React-Anwendunge zum Einsatz, aber nahezu alle gezeigten Features funktionieren identisch auch mit anderen Bibliotheken, so dass du sie auch für dein Nicht-React-Projekt anwenden kannst.