Testes unitários de CSS com Jest

Os testes unitários de CSS verificam estilos calculados, aplicação de classes e comportamento do leiaute programaticamente. Eles detectam regressões na lógica do CSS (classe incorreta aplicada, modificador ausente) sem exigir uma captura de tela do navegador ou uma inspeção visual manual.

Por padrão, Jest usa JSDOM, que oferece suporte limitado a CSS — ele não calcula o leiaute nem avalia seletores complexos. Para testes básicos de presença de classes e estilos em linha, JSDOM é suficiente; para testar propriedades calculadas, use jest-environment-jsdom com simulações de módulos CSS.

Renderize um componente e verifique se as classes CSS corretas são aplicadas com base nas propriedades ou no estado. Isso confirma que a lógica condicional das classes (ativa, desativada, variante de erro) funciona corretamente sem verificar valores específicos de estilo.

Jest transforma as importações de módulos CSS usando identity-obj-proxy. Esse proxy retorna a string do nome da classe para qualquer propriedade acessada: styles.primary retorna "primary". Os testes verificam nomes de classes sem precisar aplicar CSS real.

Para projetos com Styled Components, jest-styled-components adiciona o comparador toHaveStyleRule. Teste se um componente estilizado aplica os valores corretos das propriedades CSS com base nas propriedades, sem exigir que um navegador real calcule os estilos.

jest-dom estende o Jest com comparadores específicos do DOM: toHaveStyle (verifica estilos em linha ou calculados), toHaveClass (verifica a lista de classes) e toBeVisible (verifica display/visibility/opacity). Eles tornam as verificações de CSS legíveis e expressivas.

As capturas de componentes registram a marcação renderizada, incluindo os nomes das classes. Renomeações de módulos CSS ou alterações na lógica condicional das classes aparecem como diferenças nas capturas. Isso é útil para detectar rapidamente alterações não intencionais de classes, mas exige disciplina na revisão cuidadosa das capturas.

Jest não consegue calcular o leiaute (offsetWidth, getBoundingClientRect), avaliar consultas de mídia nem executar animações CSS. Essas tarefas exigem um ambiente de navegador real por meio do Playwright ou do Cypress. Os testes de CSS com Jest são complementares — não substituem os testes em navegador.

Defina propriedades personalizadas do CSS em um elemento contêiner nos testes: element.style.setProperty("--color-primary", "red"). Leia os valores calculados com getComputedStyle(el).getPropertyValue("--color-primary"). JSDOM oferece suporte à leitura de propriedades personalizadas, mas não à cascata.

Verifique se as classes acionadoras de animação são adicionadas ou removidas nos momentos corretos: teste se um componente de janela modal adiciona a classe animate-enter ao ser aberto e a classe animate-exit antes da desmontagem. O próprio CSS da animação é testado por meio do VRT.

A lógica do CSS reside no JavaScript: strings condicionais de classes, valores do provedor de temas e geração de objetos de estilo. A cobertura do Jest (Istanbul) cobre essa lógica de CSS em JavaScript. Escreva testes para cobrir todos os ramos, garantindo que cada combinação de variante e estado seja exercitada.

O que identity-obj-proxy faz quando usado com módulos CSS no Jest?

Os testes unitários de CSS com Jest verificam a lógica de aplicação de classes, a estilização condicional e o comportamento de módulos CSS sem um navegador real. Use identity-obj-proxy para módulos CSS, jest-styled-components para Styled Components e os comparadores do jest-dom para verificações legíveis. Combine-os com VRT para obter uma cobertura abrangente da qualidade do CSS.