CSS-Unit-Tests mit Jest

CSS-Unit-Tests überprüfen berechnete Stile, die Anwendung von Klassen und das Layoutverhalten programmgesteuert. Sie erkennen Regressionen in der CSS-Logik, etwa wenn die falsche Klasse angewendet wird oder ein Modifier fehlt, ohne dass ein Browser-Screenshot oder eine manuelle visuelle Prüfung erforderlich ist.

Jest verwendet standardmäßig JSDOM, das CSS nur eingeschränkt unterstützt – es berechnet kein Layout und wertet keine komplexen Selektoren aus. Für grundlegende Tests des Vorhandenseins von Klassen und von Inline-Stilen ist JSDOM ausreichend. Verwenden Sie für das Testen berechneter Eigenschaften jest-environment-jsdom mit CSS-Module-Mocks.

Rendern Sie eine Komponente und prüfen Sie, ob abhängig von Props oder Zustand die richtigen CSS-Klassen angewendet werden. So verifizieren Sie, dass die Logik für bedingte Klassen (active, disabled, error variant) korrekt funktioniert, ohne konkrete Stilwerte zu prüfen.

Jest verarbeitet Importe von CSS-Modulen mit identity-obj-proxy. Dieser Proxy gibt für jede abgerufene Eigenschaft die Zeichenfolge des Klassennamens zurück: styles.primary gibt "primary" zurück. In den Tests können Sie Klassennamen prüfen, ohne echtes CSS anwenden zu müssen.

Für Projekte mit Styled Components stellt jest-styled-components den Matcher toHaveStyleRule bereit. Testen Sie, ob eine Styled Component abhängig von Props die richtigen CSS-Eigenschaftswerte anwendet, ohne dass ein echter Browser die Stile berechnen muss.

jest-dom erweitert Jest um DOM-spezifische Matcher: toHaveStyle (prüft Inline- oder berechnete Stile), toHaveClass (prüft die Klassenliste) und toBeVisible (prüft display, visibility und opacity). Dadurch werden CSS-Prüfungen lesbar und aussagekräftig.

Komponenten-Snapshots erfassen das gerenderte Markup einschließlich der Klassennamen. Umbenennungen durch CSS-Module oder Änderungen an der Logik für bedingte Klassen erscheinen als Snapshot-Diffs. Das ist nützlich, um unbeabsichtigte Änderungen an Klassen schnell zu erkennen, erfordert aber eine sorgfältige Disziplin beim Prüfen von Snapshots.

Jest kann kein Layout berechnen (offsetWidth, getBoundingClientRect), keine Media Queries auswerten und keine CSS-Animationen ausführen. Dafür ist eine echte Browserumgebung über Playwright oder Cypress erforderlich. CSS-Tests mit Jest ergänzen browserbasierte Tests, ersetzen sie aber nicht.

Setzen Sie in Tests CSS-Custom-Properties auf einem Container-Element: element.style.setProperty("--color-primary", "red"). Lesen Sie berechnete Werte mit getComputedStyle(el).getPropertyValue("--color-primary") aus. JSDOM unterstützt das Auslesen von Custom Properties, aber nicht deren Kaskadierung.

Prüfen Sie, ob Animations-Triggerklassen zum richtigen Zeitpunkt hinzugefügt und entfernt werden: Testen Sie, dass eine Modal-Komponente beim Öffnen die Klasse animate-enter und vor dem Unmounting die Klasse animate-exit hinzufügt. Das Animations-CSS selbst wird mit VRT getestet.

CSS-Logik befindet sich in JavaScript: bedingte Klassenstrings, Werte des Theme-Providers und die Erzeugung von Style-Objekten. Die Jest-Abdeckung (Istanbul) erfasst diese JavaScript-CSS-Logik. Schreiben Sie Tests für alle Zweige, damit jede Kombination aus Variante und Zustand ausgeführt wird.

Was bewirkt identity-obj-proxy bei der Verwendung mit CSS-Modulen in Jest?

CSS-Unit-Tests mit Jest überprüfen die Logik für die Anwendung von Klassen, bedingte Stile und das Verhalten von CSS-Modulen, ohne dass ein echter Browser erforderlich ist. Verwenden Sie identity-obj-proxy für CSS-Module, jest-styled-components für Styled Components und jest-dom-Matcher für lesbare Prüfungen. Kombinieren Sie diese Tests mit VRT, um eine umfassende Qualitätssicherung für CSS zu erreichen.