Tests unitaires CSS avec Jest

Les tests unitaires du CSS vérifient les styles calculés, l'application des classes et le comportement de la mise en page de manière programmatique. Ils détectent les régressions de logique CSS (classe incorrecte appliquée, modificateur manquant) sans nécessiter de capture d'écran dans un navigateur ni d'inspection visuelle manuelle.

Jest utilise JSDOM par défaut, qui offre une prise en charge limitée du CSS : il ne calcule pas la mise en page et n'évalue pas les sélecteurs complexes. Pour vérifier la présence de classes et les styles intégrés, JSDOM suffit ; pour tester les propriétés calculées, utilisez jest-environment-jsdom avec des simulations de modules CSS.

Affichez un composant et vérifiez que les bonnes classes CSS sont appliquées en fonction des propriétés reçues ou de l'état. Cela vérifie que la logique conditionnelle des classes (active, désactivée, variante d'erreur) fonctionne correctement sans vérifier des valeurs de style précises.

Jest transforme les importations de modules CSS à l'aide de identity-obj-proxy. Ce proxy renvoie la chaîne correspondant au nom de classe pour toute propriété consultée : styles.primary renvoie "primary". Les tests vérifient les noms de classes sans avoir besoin d'appliquer le véritable CSS.

Pour les projets Styled Components, jest-styled-components ajoute un comparateur toHaveStyleRule. Vérifiez qu'un composant stylisé applique les bonnes valeurs de propriétés CSS en fonction des propriétés reçues, sans nécessiter de véritable navigateur pour calculer les styles.

jest-dom enrichit Jest de méthodes d'assertion propres au DOM : toHaveStyle (vérifie le style intégré ou calculé), toHaveClass (vérifie la liste des classes), toBeVisible (vérifie l'affichage, la visibilité ou l'opacité). Ces méthodes rendent les assertions CSS lisibles et explicites.

Les captures de composants enregistrent le balisage généré, y compris les noms de classes. Les renommages de modules CSS ou les changements de logique conditionnelle des classes apparaissent dans les différences entre captures. Cette méthode est utile pour repérer rapidement les changements de classes involontaires, mais elle exige une discipline rigoureuse lors de la revue des captures.

Jest ne peut pas calculer la mise en page (offsetWidth, getBoundingClientRect), évaluer les requêtes média ni exécuter les animations CSS. Ces opérations nécessitent un véritable environnement de navigateur via Playwright ou Cypress. Les tests CSS de Jest sont complémentaires aux tests dans un navigateur, et non un remplacement de ceux-ci.

Définissez des propriétés personnalisées CSS sur un élément conteneur dans les tests : element.style.setProperty("--color-primary", "red"). Lisez les valeurs calculées avec getComputedStyle(el).getPropertyValue("--color-primary"). JSDOM prend en charge la lecture des propriétés personnalisées, mais pas leur mise en cascade.

Vérifiez que les classes qui déclenchent l'animation sont ajoutées ou supprimées au bon moment : vérifiez qu'un composant de fenêtre modale ajoute la classe animate-enter à l'ouverture et la classe animate-exit avant son démontage. Le CSS de l'animation lui-même est testé avec VRT.

La logique CSS se trouve dans JS : chaînes de classes conditionnelles, valeurs du fournisseur de thème et génération d'objets de style. La couverture de Jest (Istanbul) couvre cette logique CSS en JavaScript. Écrivez des tests couvrant toutes les branches afin de vérifier chaque combinaison de variante et d'état.

Que fait identity-obj-proxy lorsqu'il est utilisé avec des modules CSS dans Jest ?

Les tests unitaires du CSS avec Jest vérifient la logique d'application des classes, les styles conditionnels et le comportement des modules CSS sans véritable navigateur. Utilisez identity-obj-proxy pour les modules CSS, jest-styled-components pour Styled Components et les méthodes d'assertion de jest-dom pour obtenir des vérifications lisibles. Combinez-les avec VRT pour une couverture complète de la qualité CSS.