Цель

Jest и более новый Vitest неразрывно связаны с инструментами тестирования внешнего интерфейса. Хотя я лично не забочусь об этих инструментах, важно понимать, что многие проекты завязаны на них. В результате, несмотря на то, что их поддержка веб-компонентов/насмешка над DOM не самые лучшие, мы должны хотя бы посмотреть, что они поддерживают.


Рендеринг теневого корня

Jest подвергся серьезной переработке и получил поддержку веб-компонентов вокруг версии. 26.5.0 когда он представил версию JSDOM 16.2.0 что добавило возможность рендерить теневые корни. До этой версии рендеринг shadowRoots не работал должным образом, поэтому важно, если ваш проект использует shadowRoots, обязательно проверьте, какую версию JSDOM/Jest вы используете.


Издевательство над DOM

Это крупное обновление также включало в себя ряд макетов для встроенных
функции браузера, такие как MutationObserver, document.createRange и многие другие.

Тем не менее, все еще есть некоторые заметные недостающие функции, такие как matchMedia, IntersectionObserver, ResizeObserverи многое другое, с чем я точно не сталкивался. Так что, если ваши веб-компоненты используют их, не забудьте имитировать и их!


Есть трансформация

Я не верю, что у Vitest есть эта проблема из-за использования преобразований ESM через Vite, но при использовании Jest важно помнить, что он ожидает файлы CommonJS, но не будет преобразовывать node_modules для вас. Многие библиотеки веб-компонентов не поставляют файлы CJS. Итак, если у вас есть пакет NPM, который поставляет ESM, вам нужно указать Jest преобразовать его через "transformIgnorePatterns".

Например, если бы я использовал шнурки, я бы сделал так:

    "transformIgnorePatterns": ["node_modules/?!(@shoelace-style)"]
Войти в полноэкранный режим

Выйти из полноэкранного режима

для получения дополнительной информации о transformIgnorePatterns, проверьте это:


Порядок фокусировки и события клавиатуры

Я заметил, что порядок фокуса и события клавиатуры могут быть перепутаны в JSDOM. Вот место, где у меня нет исправления. Я заметил, что JSDOM не всегда ведет себя с ними так, как ожидалось, и единственное, что я могу объяснить, это то, что он отправляет события, а не отправляет реальные действия в браузер.

JSDOM и Jest / Vitest имеют так много предостережений для веб-компонентов и тестирования браузера в целом, что я не могу их добросовестно рекомендовать. Никто не просматривает веб-страницы в JSDOM. Если вы подключите к Jest собственный раннер, который использует настоящий браузер, то готовите! Я думаю, все это для того, чтобы сказать, что большая часть моей говядины связана с JSDOM, а не обязательно с самой Jest…

Есть и другие проекты, например Драматург а также Средство запуска веб-тестов который даст вам настоящий браузер для работы и более точно отразит, как ваши пользователи будут использовать ваши компоненты.