Realistische Komponenten-Tests ohne Schmerzen? Vitest Browser Mode im Praxis-Check

Das klassische Test-Setup für Single-Page Applications 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.