Сравнение с другими тестовыми раннерами

Jest

Jest занял лидирующие позиции среди фреймворков для тестирования, предлагая готовую поддержку для большинства проектов на JavaScript, удобный API (it и expect), а также полный набор функций для тестирования, необходимых в большинстве конфигураций (снимки, моки, покрытие кода). Мы благодарны команде и сообществу Jest за создание превосходного API для тестирования и продвижение многих паттернов тестирования, которые теперь являются стандартом в веб-экосистеме.

Jest можно использовать в проектах на Vite. @sodatea создал vite-jest, который нацелен на обеспечение первоклассной интеграции Vite для Jest. Последние блокирующие проблемы в Jest были решены, что делает его жизнеспособным вариантом для ваших модульных тестов.

Однако в мире, где Vite предоставляет поддержку наиболее распространенных веб-инструментов (TypeScript, JSX, самые популярные UI-фреймворки), использование Jest приводит к дублированию сложности. Если ваше приложение работает на Vite, наличие двух разных конвейеров для настройки и поддержки нецелесообразно. С Vitest вы можете определить конфигурацию для вашей среды разработки, сборки и тестирования в рамках единого конвейера, используя те же плагины и тот же vite.config.js.

Даже если ваша библиотека не основана на Vite (например, если она собрана с помощью esbuild или Rollup), Vitest является интересным вариантом, поскольку он обеспечивает более быстрый запуск модульных тестов и улучшение опыта разработчика (DX) благодаря режиму наблюдения по умолчанию, использующему мгновенную горячую замену модулей (HMR) Vite. Vitest предлагает совместимость с большинством API Jest и библиотек экосистемы, поэтому в большинстве проектов он должен быть полноценной заменой Jest.

Cypress

Cypress — это браузерный тестовый раннер и дополнительный инструмент к Vitest. Если вы хотите использовать Cypress, мы рекомендуем использовать Vitest для всей headless-логики в вашем приложении и Cypress для всей логики, основанной на браузере.

Cypress известен как инструмент для сквозного тестирования, но его новый раннер компонентных тестов отлично поддерживает тестирование компонентов Vite и является идеальным выбором для тестирования всего, что отображается в браузере.

Браузерные тестовые раннеры, такие как Cypress, WebdriverIO и Web Test Runner, обнаружат проблемы, которые Vitest не сможет, потому что они используют реальный браузер и реальные API браузера.

Механизм тестирования Cypress сосредоточен на определении видимости, доступности и интерактивности элементов интерфейса. Cypress специально создан для разработки и тестирования пользовательского интерфейса, и его DX сосредоточен на тестировании ваших визуальных компонентов. Вы видите свой компонент, отображаемый рядом с отчетом о выполнении тестов. После завершения теста компонент остается интерактивным, и вы можете отлаживать любые сбои, используя инструменты разработчика вашего браузера.

В отличие от этого, Vitest ориентирован на предоставление наилучшего DX для молниеносного тестирования, не требующего графического интерфейса (headless). Тестовые раннеры на основе Node, такие как Vitest, поддерживают различные частично реализованные браузерные среды, такие как jsdom, которые реализуют достаточно для быстрого модульного тестирования любого кода, который ссылается на API браузера. Обратной стороной является то, что эти браузерные среды имеют ограничения в том, что они могут реализовать. Например, в jsdom отсутствует ряд функций, таких как window.navigation или механизм компоновки (offsetTop и т. д.).

Наконец, в отличие от Web Test Runner, тестовый раннер Cypress больше напоминает IDE, чем обычный тестовый раннер, потому что вы также видите реальный отображаемый компонент в браузере, а также результаты его тестов и логи.

Cypress также интегрирует Vite в свои решения: перестраивает пользовательский интерфейс своего приложения с использованием Vitesse и использует Vite для управления разработкой своего проекта через тестирование.

Мы считаем, что Cypress не является хорошим вариантом для модульного тестирования кода, не требующего графического интерфейса, но использование Cypress (для E2E и компонентного тестирования) и Vitest (для модульных тестов) полностью удовлетворит потребности вашего приложения в тестировании.

WebdriverIO

WebdriverIO — это, как и Cypress, браузерный альтернативный тестовый раннер и дополнительный инструмент к Vitest. Его можно использовать как инструмент для сквозного тестирования, а также для тестирования веб-компонентов. Он даже использует внутренние компоненты Vitest, например, для мокирования и заглушек в компонентных тестах.

WebdriverIO предлагает те же преимущества, что и Cypress, позволяя тестировать вашу логику в реальном браузере. Однако он использует общепринятые веб-стандарты для автоматизации, что преодолевает некоторые компромиссы и ограничения при запуске тестов в Cypress. Кроме того, он позволяет запускать тесты и на мобильных устройствах, расширяя возможности тестирования вашего приложения в различных средах.

Web Test Runner

@web/test-runner выполняет тесты внутри браузера без графического интерфейса (headless), предоставляя ту же среду выполнения, что и ваше веб-приложение, без необходимости создания mock-объектов для API браузера или DOM. Это также позволяет отлаживать в реальном браузере с помощью инструментов разработчика, хотя отсутствует пользовательский интерфейс для пошагового выполнения теста, в отличие от тестов Cypress.

Для использования @web/test-runner с проектом на Vite, используйте @remcovaes/web-test-runner-vite-plugin. В @web/test-runner не включены библиотеки утверждений или мокирования, поэтому вам придется добавить их самостоятельно.

uvu

uvu — это тестовый раннер для Node.js и браузера. Он выполняет тесты в одном потоке, поэтому тесты не изолированы и могут влиять друг на друга между файлами. Vitest, однако, использует рабочие потоки для изоляции тестов и их параллельного выполнения.

Для преобразования вашего кода uvu использует хуки require и loader. Vitest использует Vite, поэтому файлы преобразуются с полной мощью системы плагинов Vite. В мире, где Vite обеспечивает поддержку наиболее распространенных веб-инструментов (TypeScript, JSX, самые популярные UI-фреймворки), использование uvu приводит к дублированию сложности. Если ваше приложение работает на Vite, наличие двух разных конвейеров для настройки и поддержки нецелесообразно. С Vitest вы можете определить конфигурацию для вашей среды разработки, сборки и тестирования как единый конвейер, используя те же плагины и ту же конфигурацию.

uvu не предлагает интеллектуального режима наблюдения для повторного запуска измененных тестов, в то время как Vitest обеспечивает превосходное удобство разработки (DX) благодаря режиму наблюдения по умолчанию, использующему мгновенную горячую замену модулей (HMR) Vite.

uvu — это быстрый инструмент для выполнения простых тестов, но Vitest может быть быстрее и надежнее для более сложных тестов и проектов.