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

Abstract

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.

Slides und Source Code

Slides und Material kommen nach dem Talk

Mein Workshop zum Thema

Rund um das Thema React, Next.js und Fullstack-Entwicklung biete ich In-House-Workshops und Schulungen an. Mehr Informationen dazu findest du hier.