CSS-unit tests met Jest

CSS-eenheidstests verifiëren berekende stijlen, het toepassen van klassen en lay-outgedrag programmatisch. Ze detecteren regressies in CSS-logica (verkeerde klasse toegepast, ontbrekende modifier) zonder een schermafbeelding van een browser of handmatige visuele inspectie.

Jest gebruikt standaard JSDOM, dat beperkte CSS-ondersteuning heeft — het berekent geen lay-out en evalueert geen complexe selectoren. Voor eenvoudig testen op de aanwezigheid van klassen en inline stijlen volstaat JSDOM; gebruik voor het testen van berekende eigenschappen jest-environment-jsdom met simulaties voor CSS-modules.

Render een component en controleer of de juiste CSS-klassen worden toegepast op basis van eigenschappen of toestand. Hiermee controleer je of voorwaardelijke klassenlogica (actief, uitgeschakeld, foutvariant) correct werkt zonder specifieke stijlwaarden te controleren.

Jest transformeert imports van CSS Modules met identity-obj-proxy. Deze proxy geeft voor elke geraadpleegde eigenschap de tekenreeks van de klassenaam terug: styles.primary geeft "primary" terug. Tests controleren klassennamen zonder dat echte CSS hoeft te worden toegepast.

Voor projecten met Styled Components voegt jest-styled-components een toHaveStyleRule-vergelijker toe. Test of een gestileerde component de juiste CSS-eigenschapswaarden toepast op basis van eigenschappen, zonder dat een echte browser stijlen hoeft te berekenen.

jest-dom breidt Jest uit met DOM-specifieke vergelijkers: toHaveStyle (controleert inline- of berekende stijl), toHaveClass (controleert de klassenlijst), toBeVisible (controleert display/visibility/opacity). Hierdoor worden CSS-controles leesbaar en duidelijk.

Momentopnamen van componenten leggen de weergegeven opmaak vast, inclusief klassennamen. Hernoemingen van CSS Modules of wijzigingen in voorwaardelijke klassenlogica verschijnen als verschillen tussen momentopnamen. Dit is nuttig om onbedoelde wijzigingen in klassen snel te detecteren, maar vereist een zorgvuldige werkwijze voor het beoordelen van momentopnamen.

Jest kan geen lay-out berekenen (offsetWidth, getBoundingClientRect), mediaquery's evalueren of CSS-animaties uitvoeren. Hiervoor is een echte browseromgeving via Playwright of Cypress nodig. CSS-tests met Jest zijn een aanvulling op — geen vervanging voor — browsergebaseerde tests.

Stel CSS-aangepaste eigenschappen in op een containerelement in tests: element.style.setProperty("--color-primary", "red"). Lees berekende waarden uit met getComputedStyle(el).getPropertyValue("--color-primary"). JSDOM ondersteunt het uitlezen van aangepaste eigenschappen, maar niet de cascade.

Controleer of klassen die animaties activeren op het juiste moment worden toegevoegd of verwijderd: test of een modaalvenstercomponent de klasse animate-enter toevoegt bij het openen en de klasse animate-exit voordat de component wordt ontkoppeld. De animatie-CSS zelf wordt getest via VRT.

CSS-logica leeft in JavaScript: voorwaardelijke tekenreeksen met klassen, waarden van de themaprovider en het genereren van stijlobjecten. Jest-dekking (Istanbul) dekt deze CSS-logica in JavaScript. Schrijf tests voor alle vertakkingen — zodat elke combinatie van variant en toestand wordt uitgevoerd.

CSS-eenheidstests met Jest controleren logica voor het toepassen van klassen, voorwaardelijke stijlen en gedrag van CSS Modules zonder een echte browser. Gebruik identity-obj-proxy voor CSS Modules, jest-styled-components voor Styled Components en jest-dom-vergelijkers voor leesbare controles. Combineer dit met VRT voor uitgebreide kwaliteitsdekking van CSS.