Realistische UI-Tests ohne Schmerzen? Vitest Browser Mode im Praxischeck

Aus der Java-Welt kennen wir Testframeworks, die weit über Unit-Tests hinausgehen: Mit Testcontainers oder @SpringBootTest testen wir nah an der echten Produktionsumgebung und erhalten so sehr realistische Testergebnisse. Doch wie sieht es auf der anderen Seite des Stacks aus? Wie realistisch können wir unser JavaScript-Frontend testen? Diese Frage gewinnt in Zeiten von KI-gestützter Entwicklung und Agentic-Coding-Workflows an Gewicht: Je mehr wir dem Agenten überlassen, desto wichtiger werden verlässliche Guardrails, die die Qualität unseres Frontends sicherstellen. Klassische Browsertests bieten eine Antwort. Sie gelten aber als umständlich in der Entwicklung, langsam in der Ausführung und sind berüchtigt für ihre Flakiness. Vitest Browser Mode will dieses Dilemma lösen und verspricht schnelle und stabile UI-Komponententests, die direkt im Browser ausgeführt werden. Da er auf dem etablierten JavaScript-Testframework Vitest (u. a. für React und Angular) aufbaut, müssen wir nicht einmal ein neues Framework lernen. Zu schön, um wahr zu sein? In diesem Live-Coding-Vortrag prüfe ich mit euch anhand einer Full-Stack-Architektur mit JavaScript SPA und Java-Backend, ob diese Versprechen eingehalten werden. Ich zeige die Grundlagen von Vitest Browser Mode sowie praxisnahe Themen wie die Integration in CI/CD Pipelines und Agentic-Coding-Workflows, typsichere Netzwerksimulation mit Mock Service Worker (MSW) und worin der Unterschied zu Playwright und Selenium besteht.