Если вы уже некоторое время являетесь фронтенд-разработчиком, вы, вероятно, использовали Cypress и Vite или, по крайней мере, слышали о них (если нет, вам нужно их проверить). Их совместное использование упрощает разработку и тестирование веб-приложений. Но все же чего-то не хватает: Cypress не использует Vite для запуска сквозных тестов.

Cypress 10 представил интеграцию с Vite, но только для тестирования компонентов. Однако для запуска сквозных тестов вам по-прежнему нужен Webpack, а это адский кошмар. Настраивать все нужно дважды: один раз в Vite и один раз в Webpack. Например, представьте, что вы используете машинописный текст с псевдонимами путей в своем проекте. Вам нужно настроить псевдонимы для typescript и Vite (к счастью, вы можете использовать плагин Vite вместо ручной настройки), и теперь ваши тесты перестают работать. Вы должны либо не использовать псевдонимы в своих тестах, либо выполнять те же настройки для Webpack отдельно. И, кстати, вам также нужно настроить Webpack для загрузки машинописного текста.

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

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

Помимо того, что Vite быстрее, чем Webpack, использование Vite для сквозного тестирования может устранить разрыв между этими двумя средами и значительно упростить изменение структуры и конфигураций проекта. Вы также можете использовать специальные функции Vite, такие как import.meta и плагины Vite или Rollup, чтобы расширить возможности рабочего процесса тестирования. Также возможен доступ к переменным среды или конфигурациям приложений в тестах.

Но как мы можем использовать Vite для запуска сквозных тестов? Для этого нам понадобится препроцессор Cypress. Но не волнуйтесь, я не буду рассказывать вам об API препроцессора и о том, как его написать; потому что это уже сделано, а cypress-vite сделает эту работу за вас.

Во-первых, вам нужно установить cypress-vite в свой проект:

npm install --save-dev cypress-vite

yarn add --dev cypress-vite

pnpm add --save-dev cypress-vite

Затем обновите файл конфигурации кипариса:

import { defineConfig } from 'cypress'
import vitePreprocessor from 'cypress-vite'

export default defineConfig({
  e2e: {
    setupNodeEvents(on) {
      on('file:preprocessor', vitePreprocessor())
    },
  },
})

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