Testing Library

Was ist Testing Library?

Testing Library ist eine Familie von Open-Source-Bibliotheken zum Testen von Benutzeroberflächen. Es gibt Varianten für das DOM, React, Vue, Angular, Svelte und weitere Frameworks. Der Grundsatz lautet, Komponenten so zu testen, wie Nutzer sie verwenden: Elemente werden über Rolle, Beschriftung oder sichtbaren Text gefunden, nicht über interne Implementierungsdetails. Mit dem Zusatzpaket user-event lassen sich Klicks und Tastatureingaben realistisch nachbilden.

Vorteile von Testing Library

• Nutzernahe Tests: Tests prüfen sichtbares Verhalten statt interner Zustände.
• Robust bei Refactorings: Wird eine Komponente intern umgebaut, bleiben die Tests meist gültig.
• Förderung von Barrierearmut: Abfragen nach Rollen und Labels decken fehlende Beschriftungen früh auf.
• Framework-übergreifend: Die Konzepte sind in allen Varianten gleich.
• Gute Kombination mit Vitest oder Jest als Test-Runner.

Nachteile von Testing Library

• Simulierte Umgebung: Tests laufen meist in jsdom, das keinen echten Browser ersetzt, etwa bei Layout oder CSS.
• Asynchrone Abläufe: Das Warten auf Zustandsänderungen erfordert Erfahrung mit findBy und waitFor.
• Begrenzter Umfang: Komplette Abläufe über mehrere Seiten werden besser mit End-to-End-Tests abgedeckt.

Einsatzbereich von Testing Library

Testing Library wird für Komponententests und Integrationstests von Frontend-Code eingesetzt, etwa für Formulare, Dialoge, Listen und Interaktionen innerhalb einer Seite. Zusammen mit Playwright für End-to-End-Tests ergibt sich eine solide Teststrategie.

Alternativen zu Testing Library

• Vitest Browser Mode
• Playwright Component Testing
• Cypress Component Testing
• Enzyme (veraltet)