Unit testing CSS con Jest

I test unitari del CSS verificano programmaticamente gli stili calcolati, l'applicazione delle classi e il comportamento del layout. Rilevano le regressioni nella logica CSS, come l'applicazione della classe errata o la mancanza di un modificatore, senza richiedere uno screenshot del browser o un'ispezione visiva manuale.

Jest utilizza JSDOM per impostazione predefinita, che offre un supporto CSS limitato: non calcola il layout né valuta selettori complessi. Per i test di base sulla presenza delle classi e sugli stili inline JSDOM è sufficiente; per testare le proprietà calcolate, utilizzi jest-environment-jsdom con mock dei CSS Module.

Esegua il rendering di un componente e verifichi che vengano applicate le classi CSS corrette in base alle props o allo stato. In questo modo verifica che la logica delle classi condizionali, come active, disabled e la variante error, funzioni correttamente senza verificare valori di stile specifici.

Jest trasforma gli import dei CSS Module utilizzando identity-obj-proxy. Questo proxy restituisce la stringa del nome della classe per qualsiasi proprietà a cui si accede: styles.primary restituisce "primary". I test verificano i nomi delle classi senza dover applicare CSS reali.

Per i progetti Styled Components, jest-styled-components aggiunge il matcher toHaveStyleRule. Verifichi che un componente stilizzato applichi i valori corretti delle proprietà CSS in base alle props, senza richiedere un browser reale per calcolare gli stili.

jest-dom estende Jest con matcher specifici per il DOM: toHaveStyle (verifica lo stile inline o calcolato), toHaveClass (verifica l'elenco delle classi), toBeVisible (verifica display, visibility e opacity). Questi matcher rendono le asserzioni CSS leggibili ed espressive.

Gli snapshot dei componenti acquisiscono il markup sottoposto a rendering, inclusi i nomi delle classi. Le rinominazioni dei CSS Module o le modifiche alla logica delle classi condizionali compaiono come differenze negli snapshot. È utile per rilevare rapidamente modifiche indesiderate alle classi, ma richiede una revisione accurata e disciplinata degli snapshot.

Jest non può calcolare il layout, ad esempio offsetWidth e getBoundingClientRect, valutare le media query o eseguire animazioni CSS. Per queste operazioni è necessario un ambiente browser reale tramite Playwright o Cypress. I test CSS con Jest sono complementari ai test basati sul browser, non un loro sostituto.

Imposti le proprietà personalizzate CSS su un elemento contenitore nei test: element.style.setProperty("--color-primary", "red"). Legga i valori calcolati con getComputedStyle(el).getPropertyValue("--color-primary"). JSDOM supporta la lettura delle proprietà personalizzate, ma non la cascata.

Verifichi che le classi che attivano le animazioni vengano aggiunte o rimosse nei momenti corretti: testi che un componente modale aggiunga la classe animate-enter all'apertura e la classe animate-exit prima di essere smontato. Il CSS dell'animazione viene testato tramite VRT.

La logica CSS risiede in JavaScript: stringhe di classi condizionali, valori del theme provider e generazione di oggetti di stile. La copertura di Jest (Istanbul) copre questa logica CSS in JavaScript. Scriva test per coprire tutti i rami, assicurandosi che ogni combinazione di variante e stato venga verificata.

Che cosa fa identity-obj-proxy quando viene utilizzato con i CSS Module in Jest?

I test unitari CSS con Jest verificano la logica di applicazione delle classi, gli stili condizionali e il comportamento dei CSS Module senza un browser reale. Utilizzi identity-obj-proxy per i CSS Module, jest-styled-components per Styled Components e i matcher di jest-dom per asserzioni leggibili. Li combini con il VRT per una copertura completa della qualità CSS.