Frontend-Tests: Unit, Integration und E2E richtig einsetzen

Wie man mit drei Testebenen schneller liefert und weniger Feuer in Produktion löscht.

---

Ein Entwickler merkt kurz nach dem Deploy, dass der Checkout im Browser abstürzt und Umsatz weg ist, obwohl alle Unit Tests grün waren.

Wachsende Komplexität zwingt zum Testen

Single Page Anwendungen, Microfrontends und schnelle Releases machen das Frontend zu einem komplexen System in dem Fehler oft an Schnittstellen entstehen und herkömmliche manuelle Tests nicht mehr reichen.

Die drei Ebenen

Unit Tests prüfen einzelne Funktionen oder Komponenten isoliert und sind schnell, Integrationstests prüfen Zusammenspiel von Komponenten und Services, und End-to-End Tests steuern eine Anwendung im Browser wie ein Nutzer und prüfen ganze Flows.

Vor- und Nachteile im Alltag

Unit Tests sind schnell und preiswert in der Wartung, Integrationstests fangen Problemszenarien an den Schnittstellen ab aber brauchen Testdaten und Umgebung, E2E Tests sind am aussagekräftigsten für Nutzerflüsse aber langsam und anfällig für Flakiness.

Toolbox und Praktiken

Moderne Frontendprojekte nutzen Jest und React Testing Library für Units, Contract Tests oder Integrationstests für Schnittstellen und Playwright oder Cypress für E2E in der CI mit stabilen Testdaten und Expliziten Wartebedingungen.

Wenn Mocking zu viel wird

Übermäßiges Mocking kann Integrationseffekte verdecken, darum helfen gezielte Integrationstests und vertragliche Tests zwischen Frontend und Backend dabei, Annahmen festzuhalten und Produktrisiken zu reduzieren.

Ein Team, eine Woche, ein Photo-Upload

In einem Projekt fiel ein Photo-Upload nur in der Produktion aus weil ein Cloud-Provider-Header fehlte. Unit Tests waren grün, ein Integrationstest gegen eine staging-Umgebung deckte das Problem auf und sparte ein Hotfix-Release.

Ein Release, ein E2E Test, ein Bug verhindert

Bei einem anderen Release verhinderte ein E2E-Test in der CI einen Regression in der Authentifizierung die erst nach dem Rollout bemerkt worden wäre, weil der Test das vollständige Login-Redirect-Verhalten überprüfte.

Wie man Balance findet

Die richtige Teststrategie ist ein Architekturentscheid und verbindet schnelles Feedback mit gezielten, robusten End-to-End-Szenarien und laufender Pflege der Tests um falsche Sicherheit zu vermeiden.

Wer steuert das Ganze

Solution Architects und Software-Architekten legen Testgrenzen fest, Entwickler schreiben wartbare Tests, und Produktmanager priorisieren kritische Flows damit Zeit in die richtigen Tests fließt und Releases planbar werden.

Connect with Andreas Hernitscheck Solution & Software Architect

Frontend Testing Unit Tests Integration Tests E2E CI/CD Cypress Playwright React Qualität