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.

Vorkenntnisse

Für den Vortrag sind keine besonderen Kenntnisse notwendig. Die beiden gezeigten Tools "Vitest Browser Mode" und die "Mock Service Worker"-Bibliothek funktionieren auch mit anderen Bibliotheken außer React, so dass du die gezeigten Konzepte möglicherweise auch für dein Nicht-React-Projekt anwenden kannst.

Lernziele

• Was ist der "Vitest Browser Mode" und wie kann man damit React-Komponenten testen?
  
• Vorteile (und Nachteile) gegenüber der React Testing Library
  
• Realistische Integrationstests mit der "Mock Service Worker"-Bibliothek