Pruebas unitarias de CSS con Jest

Las pruebas unitarias de CSS verifican los estilos calculados, la aplicación de clases y el comportamiento del diseño de forma programática. Detectan regresiones en la lógica de CSS (aplicación de una clase incorrecta o ausencia de un modificador) sin necesitar una captura de pantalla del navegador ni una inspección visual manual.

Jest utiliza JSDOM de forma predeterminada, que ofrece una compatibilidad limitada con CSS: no calcula el diseño ni evalúa selectores complejos. Para probar la presencia de clases y los estilos en línea, JSDOM es suficiente; para probar propiedades calculadas, utilice jest-environment-jsdom con simulaciones de módulos CSS.

Renderice un componente y compruebe que se apliquen las clases CSS correctas según las propiedades o el estado. Esto verifica que la lógica de clases condicionales (activo, deshabilitado, variante de error) funcione correctamente sin comprobar valores de estilo específicos.

Jest transforma las importaciones de módulos CSS mediante identity-obj-proxy. Este proxy devuelve la cadena del nombre de la clase para cualquier propiedad a la que se acceda: styles.primary devuelve "primary". Las pruebas comprueban los nombres de clase sin necesidad de aplicar CSS real.

En los proyectos de Styled Components, jest-styled-components añade el comparador toHaveStyleRule. Compruebe que un componente con estilos aplique los valores correctos de las propiedades CSS según las propiedades, sin necesitar un navegador real que calcule los estilos.

jest-dom amplía Jest con comparadores específicos del DOM: toHaveStyle (comprueba el estilo en línea o calculado), toHaveClass (comprueba la lista de clases) y toBeVisible (comprueba display, visibility y opacity). Estos comparadores hacen que las comprobaciones de CSS sean legibles y expresivas.

Las instantáneas de componentes capturan el marcado renderizado, incluidos los nombres de clase. Los cambios de renombrado de módulos CSS o de la lógica de clases condicionales aparecen como diferencias en las instantáneas. Son útiles para detectar rápidamente cambios de clase no intencionados, pero requieren disciplina al revisar las instantáneas.

Jest no puede calcular el diseño (offsetWidth, getBoundingClientRect), evaluar consultas de medios ni ejecutar animaciones CSS. Para ello se necesita un entorno de navegador real mediante Playwright o Cypress. Las pruebas de CSS con Jest complementan las pruebas en navegador, pero no las sustituyen.

Establezca propiedades personalizadas de CSS en un elemento contenedor durante las pruebas: element.style.setProperty("--color-primary", "red"). Lea los valores calculados con getComputedStyle(el).getPropertyValue("--color-primary"). JSDOM admite la lectura de propiedades personalizadas, pero no la cascada.

Verifique que las clases que activan las animaciones se añadan o eliminen en el momento correcto: compruebe que un componente de cuadro de diálogo añada la clase animate-enter al abrirse y la clase animate-exit antes de desmontarse. El CSS de la animación se prueba mediante VRT.

La lógica de CSS reside en JavaScript: cadenas de clases condicionales, valores del proveedor de temas y generación de objetos de estilos. La cobertura de Jest (Istanbul) cubre esta lógica de CSS en JavaScript. Escriba pruebas que cubran todas las ramas para garantizar que se ejerciten todas las combinaciones de variantes y estados.

¿Qué hace identity-obj-proxy al utilizarse con módulos CSS en Jest?

Las pruebas unitarias de CSS con Jest verifican la lógica de aplicación de clases, los estilos condicionales y el comportamiento de los módulos CSS sin un navegador real. Utilice identity-obj-proxy para los módulos CSS, jest-styled-components para Styled Components y los comparadores de jest-dom para realizar comprobaciones legibles. Combine estas herramientas con VRT para obtener una cobertura completa de la calidad del CSS.