Testowanie jednostkowe CSS za pomocą Jest

Testy jednostkowe CSS programowo weryfikują obliczone style, zastosowanie klas i zachowanie układu. Wykrywają regresje w logice CSS (zastosowanie niewłaściwej klasy, brak modyfikatora) bez konieczności wykonywania zrzutu ekranu w przeglądarce lub ręcznej kontroli wizualnej.

Jest domyślnie korzysta z JSDOM, który ma ograniczoną obsługę CSS — nie oblicza układu ani nie interpretuje złożonych selektorów. Do podstawowego testowania obecności klas i stylów wbudowanych JSDOM jest wystarczający; do testowania obliczonych właściwości należy użyć jest-environment-jsdom z atrapami modułów CSS.

Należy wyrenderować komponent i sprawdzić, czy na podstawie właściwości lub stanu zastosowano prawidłowe klasy CSS. Weryfikuje to poprawność warunkowej logiki klas (active, disabled, wariant error) bez sprawdzania konkretnych wartości stylów.

Jest przekształca importy modułów CSS za pomocą identity-obj-proxy. Ten proxy zwraca ciąg znaków nazwy klasy dla każdej użytej właściwości: styles.primary zwraca "primary". Testy sprawdzają nazwy klas bez konieczności stosowania rzeczywistego CSS.

W projektach korzystających ze Styled Components pakiet jest-styled-components dodaje matcher toHaveStyleRule. Można za jego pomocą sprawdzić, czy stylizowany komponent stosuje właściwe wartości właściwości CSS na podstawie właściwości, bez konieczności obliczania stylów w prawdziwej przeglądarce.

jest-dom rozszerza Jest o matchery specyficzne dla DOM: toHaveStyle (sprawdza styl wbudowany lub obliczony), toHaveClass (sprawdza listę klas), toBeVisible (sprawdza display/visibility/opacity). Dzięki nim asercje CSS są czytelne i wyrażają intencję testu.

Snapshoty komponentów przechwytują wyrenderowany kod znaczników wraz z nazwami klas. Zmiany nazw modułów CSS lub warunkowej logiki klas pojawiają się jako różnice w snapshotach. Jest to przydatne do szybkiego wykrywania niezamierzonych zmian klas, ale wymaga starannego procesu przeglądania snapshotów.

Jest nie potrafi obliczać układu (offsetWidth, getBoundingClientRect), interpretować zapytań media queries ani uruchamiać animacji CSS. Wymaga to prawdziwego środowiska przeglądarki za pośrednictwem Playwright lub Cypress. Testy CSS w Jest uzupełniają testy przeglądarkowe, ale ich nie zastępują.

W testach należy ustawić własne właściwości CSS na elemencie kontenera: element.style.setProperty("--color-primary", "red"). Obliczone wartości można odczytać za pomocą getComputedStyle(el).getPropertyValue("--color-primary"). JSDOM obsługuje odczytywanie własnych właściwości, ale nie obsługuje kaskady.

Należy sprawdzić, czy klasy wyzwalające animację są dodawane i usuwane we właściwym czasie: przetestować, czy komponent modal dodaje klasę animate-enter podczas otwierania i klasę animate-exit przed odmontowaniem. Sam CSS animacji należy testować za pomocą VRT.

Logika CSS znajduje się w JavaScript: warunkowe ciągi klas, wartości dostawcy motywu i generowanie obiektów stylów. Pokrycie kodu JavaScript przez Jest (Istanbul) obejmuje tę logikę CSS. Należy pisać testy obejmujące wszystkie rozgałęzienia, aby sprawdzić każdą kombinację wariantu i stanu.

Co robi identity-obj-proxy użyty z modułami CSS w Jest?

Testy jednostkowe CSS z użyciem Jest weryfikują logikę zastosowania klas, warunkowe stylowanie i działanie modułów CSS bez prawdziwej przeglądarki. Należy używać identity-obj-proxy dla modułów CSS, jest-styled-components dla Styled Components oraz matcherów jest-dom dla czytelnych asercji. W połączeniu z VRT zapewniają kompleksowe pokrycie jakości CSS.