Модульное тестирование CSS с Jest

Модульное тестирование CSS программно проверяет вычисленные стили, применение классов и поведение вёрстки. Оно выявляет регрессии логики CSS (применён неправильный класс, отсутствует модификатор), не требуя снимка браузера или ручной визуальной проверки.

Jest по умолчанию использует JSDOM, который лишь ограниченно поддерживает CSS: он не вычисляет компоновку и не обрабатывает сложные селекторы. Для базовой проверки наличия классов и встроенных стилей JSDOM достаточно; для проверки вычисленных свойств используйте jest-environment-jsdom с макетами модулей CSS.

Отобразите компонент и проверьте, что к нему применены правильные классы CSS в зависимости от свойств или состояния. Так вы убедитесь, что условная логика классов (активный, отключённый вариант с ошибкой) работает правильно, не проверяя конкретные значения стилей.

Jest преобразует импорты модулей CSS с помощью identity-obj-proxy. Этот прокси возвращает строку имени класса для любого запрошенного свойства: styles.primary возвращает "primary". Тесты проверяют имена классов, не требуя применения настоящего CSS.

Для проектов со Styled Components пакет jest-styled-components добавляет сопоставитель toHaveStyleRule. Проверяйте, что стилизованный компонент применяет правильные значения свойств CSS в зависимости от свойств компонента, не требуя настоящего браузера для вычисления стилей.

jest-dom расширяет Jest сопоставителями, предназначенными для DOM: toHaveStyle (проверяет встроенный или вычисленный стиль), toHaveClass (проверяет список классов), toBeVisible (проверяет display, visibility и opacity). Благодаря им утверждения о CSS становятся понятными и выразительными.

Снимки компонентов сохраняют отображённую разметку, включая имена классов. Переименование модулей CSS или изменение логики условных классов отображается в различиях снимков. Это удобно для быстрого выявления непреднамеренных изменений классов, но требует внимательной и дисциплинированной проверки снимков.

Jest не может вычислять компоновку (offsetWidth, getBoundingClientRect), обрабатывать медиазапросы или запускать CSS-анимации. Для этого требуется настоящее браузерное окружение через Playwright или Cypress. Тесты CSS в Jest дополняют браузерное тестирование, а не заменяют его.

Устанавливайте пользовательские свойства CSS на элементе-контейнере в тестах: element.style.setProperty("--color-primary", "red"). Считывайте вычисленные значения с помощью getComputedStyle(el).getPropertyValue("--color-primary"). JSDOM поддерживает чтение пользовательских свойств, но не поддерживает каскад.

Проверяйте, что классы запуска анимации добавляются и удаляются в нужные моменты: например, что модальный компонент добавляет класс animate-enter при открытии и класс animate-exit перед размонтированием. Сам CSS анимации проверяется с помощью VRT.

Логика CSS находится в JavaScript: это условные строки классов, значения поставщика темы и создание объектов стилей. Покрытие JavaScript-кода в Jest (Istanbul) охватывает эту логику CSS. Пишите тесты для всех ветвей, чтобы проверить каждый вариант и сочетание состояний.

Что делает identity-obj-proxy при использовании с модулями CSS в Jest?

Модульное тестирование CSS с помощью Jest проверяет логику применения классов, условные стили и поведение модулей CSS без настоящего браузера. Используйте identity-obj-proxy для модулей CSS, jest-styled-components для Styled Components и сопоставители jest-dom для понятных утверждений. Объединяйте их с VRT для комплексного контроля качества CSS.