Сравнения с другими тестовыми фреймворками

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 является интересным вариантом, поскольку он обеспечивает более быстрый запуск ваших юнит-тестов и улучшает удобство разработки благодаря режиму отслеживания изменений по умолчанию, использующему мгновенную горячую перезагрузку модулей (HMR) Vite. Vitest предлагает совместимость с большинством API Jest и библиотек экосистемы, поэтому в большинстве проектов он может быть прямой заменой Jest.

Cypress

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

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

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

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

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

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

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

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

WebdriverIO

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

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

Web Test Runner

@web/test-runner запускает тесты внутри браузера без графического интерфейса, обеспечивая ту же среду выполнения, что и ваше веб-приложение, без необходимости мокировать API браузера или DOM. Это также позволяет отлаживать внутри реального браузера с помощью инструментов разработчика, хотя нет пользовательского интерфейса для пошагового выполнения теста, как в тестах Cypress. Режим отслеживания изменений есть, но он не так хорошо реализован, как в Vitest, и может не всегда перезапускать тесты, которые нужно. Чтобы использовать @web/test-runner с проектом Vite, используйте @remcovaes/web-test-runner-vite-plugin. @web/test-runner не включает библиотеки утверждений или мокирования, поэтому вам нужно добавить их самостоятельно.

uvu

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