Vitest – тест-раннер, который идеально интегрируется с Vite, делая процесс тестирования быстрым и интуитивно понятным.
Привет, друзья! Я Кирилл Мыльников, frontend-разработчик в компании Usetech. Сегодня хочу рассказать про такую классную вещь как Vitest.
Vitest – мощный тест-раннер, специально созданный для проектов Vite. С легкостью интегрируется в рабочий процесс Vite без необходимости сложной настройки. Это обеспечивает высокую эффективность для разработчиков, позволяя писать тесты без лишних забот. Оптимизированный для работы с Vite, Vitest использует современные функции JavaScript (ESM-импорт, ожидание верхнего уровня) для тестирования и предлагает чистый подход. Разработчики Vite могут легко создавать эффективные и действенные тесты, упрощая процесс и используя современные возможности.
Сравнение Runner с Jest для проектов Vite
Особенность Vitest Jest Собственная интеграция Полная интеграция с принципами работы Vite Требует дополнительной настройки Поддержка современного синтаксиса Поддерживает импорт ESM, ожидание верхнего уровня Ограниченная поддержка современного синтаксиса JavaScript Расширяемость Можно расширять функциональность с помощью плагинов Ограниченная возможность расширения Поддержка TypeScript Легко интегрируется с TypeScript/JSX Требуется дополнительная настройка Тестирование в исходном коде Необязательно: размещайте тесты рядом с кодом Не поддерживается Панель инструментов графического интерфейса Дополнительно: Визуализация результатов тестов Нет в наличии Обработка тестов Автоматическое повторные попытки для нестабильных тестов Требуется ручная установка или сторонние библиотеки
Начало работы с Runner
В этом разделе вы узнаете, как настроить современный тестовый раннер для вашего проекта, используя простой пример. После настройки у вас будет несколько способов запустить тесты с использованием вашего кода. В данной статье мы рассмотрим два распространенных сценария тестирования: проверку базовых функций и тестирование вызовов API.
Тестирование основных функций
Давайте протестируем две базовые функции, например, операцию сложения двух чисел. Этот пример отлично подойдет для того, чтобы начать использовать тест-раннер, особенно если вы новичок в области тестирования или работаете над простыми проектами. Шаг за шагом мы создадим проект, установим тест-раннер, напишем необходимый скрипт и запустим его для проверки.
Настройка проекта Vite (необязательно). Если у вас еще нет проекта, вы можете быстро создать его с помощью официального интерфейса командной строки Vite:
- Создайте новый проект с названием my-vite-project и настройками по умолчанию.
- Установите фреймворк: добавьте тест-раннер в качестве зависимости разработки, выполнив команду npm install.
3. Напишем базовые тесты: Создадим файл для тестов с именем math.test.js, в котором продемонстрируем написание тестов. Ниже приведен код:
Этот фрагмент кода определяет тест, чтобы убедиться, что sum функция правильно складывает два числа. Он импортирует необходимые функции тестирования, определяет sum функцию, которая складывает два числа и использует методы утверждения для проверки того, что sum(2, 3) возвращает 5.
4. Запуск тестов: чтобы запустить тест, выполните следующую команду в терминале:
Тестовый раннер выполнит тест math.test.js и выведет результаты. В случае успешного прохождения утверждения будет отображено сообщение об успехе. В случае неудачи вы увидите сообщение об ошибке, которое указывает на проблему.
Преимущество этого фреймворка заключается в его нативной интеграции с существующим конвейером сборки Vite. По умолчанию Vite автоматически распознает файлы тестов с расширениями .test.js или .spec.js. Vite запускает эти файлы тестов вместе с кодом вашего приложения во время процесса сборки. Это обеспечивает выполнение ваших тестов при сборке продакшн-версии приложения, что позволяет выявить потенциальные проблемы до развертывания.
👨💻🎨 Библиотека фронтендера
Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека фронтендера»
Тестирование вызовов API
При работе с реальными приложениями важное значение имеет тестирование взаимодействия с API. Рассмотрим процесс тестирования различных операций API с помощью нашего тестового исполнителя. Для начала создадим комплексный файл userAPI.js, который будет включать несколько методов HTTP и обработку ошибок.
Сначала рассмотрим функцию getUser:
Этот метод извлекает информацию о пользователе по его идентификатору. Он отправляет GET-запрос к конечной точке API, проверяет успешность ответа и возвращает распарсенные JSON-данные. В случае неположительного ответа, метод генерирует ошибку.
Далее рассмотрим функцию createUser:
Этот метод создает нового пользователя. Он отправляет POST-запрос к конечной точке API с данными пользователя в теле запроса. Данные преобразуются в JSON-строку. В случае успешного ответа, метод возвращает информацию о новом пользователе. В случае неудачного ответа, метод генерирует ошибку.
Теперь рассмотрим функцию updateUser:
Этот метод обновляет информацию о существующем пользователе. Он отправляет PUT-запрос в конечную точку API с обновленными данными пользователя в теле запроса. Если обновление прошло успешно, возвращаются обновленные данные пользователя. В случае неудачи, метод генерирует ошибку.
Наконец, рассмотрим функцию deleteUser:
В файле userAPI.js определяются функции взаимодействия с пользовательским API, включая операции по получению, созданию, обновлению и удалению пользователей.
Этот метод удаляет пользователя по его ID. Он отправляет DELETE-запрос в конечную точку API. Если удаление проходит успешно, возвращается значение true. В случае возникновения ошибки, метод генерирует соответствующее сообщение.
Давайте напишем комплексные тесты для этих методов API в файле api.test.js.
Этот первый тестовый случай сосредоточен на функции getUser. Давайте его рассмотрим:
- В наших тестах мы имитируем функцию fetch, чтобы контролировать ее поведение.
- Мы настраиваем фиктивный объект пользователя, который должен возвращаться при вызове API.
- Мы используем mockFetch.mockResolvedValueOnce(), чтобы задать наши фиктивные данные пользователя и смоделировать успешный ответ от API.
Затем мы вызываем userAPI.getUser(1) и используем expect() для проверки того, что данные пользователя, полученные из функции, соответствуют нашему фиктивному пользователю, а также проверяем, что функция fetch была вызвана с правильным URL.
Давайте рассмотрим тест для функции createUser:
Пояснение что делает тест createUser:
- Мы создаем фиктивный объект нового пользователя и фиктивный ответ.
- Мы моделируем успешный ответ от API при создании пользователя.
- Затем мы вызываем userAPI.createUser(newUser) и проверяем, что созданный пользователь соответствует нашему фиктивному ответу.
- Также мы проверяем, что функция fetch была вызвана с правильным URL, методом, заголовками и телом запроса.
Давайте перейдем к тесту функции updateUser:
Пояснение что делает тест updateUser:
- Устанавливает тестовые данные: идентификатор пользователя и обновленную информацию о нем.
- Создает фиктивный ответ, который обычно возвращает API.
- Настраивает функцию фиктивной выборки для возврата успешного ответа с фиктивными данными.
- Вызывает функцию updateUser с тестовыми данными.
- Проверяет, что данные, возвращаемые функцией, соответствуют ожидаемому фиктивному ответу.
- Проверяет, что функция fetch была вызвана с правильным URL, методом (PUT), заголовками и телом запроса.
Теперь давайте посмотрим на deleteUser тест:
Пояснение что делает тест deleteUser:
- Создает тестовый идентификатор пользователя.
- Настраивает функцию фиктивной выборки для возврата успешного ответа.
- Вызывает функцию deleteUser с тестовым идентификатором пользователя.
- Проверяет, что функция возвращает значение true, указывающее на успешное удаление.
- Наконец, проверяет, была ли вызвана функция fetch с правильным URL и методом (DELETE).
Статья по теме
⚡ Как занять первое место в поисковой выдаче: добавляем SSR в Vue 3 + Vite приложение
Наконец, давайте рассмотрим тесты обработки ошибок
Эти тесты моделируют ответы API на ошибки и проверяют, что каждая функция возвращает ошибку с ожидаемым сообщением, если запрос был неуспешным.
На изображении представлен отчет о тестировании, связанном с API. Отчет показывает несколько успешно пройденных тестов, каждый из которых отмечен зеленой галочкой. Для каждого теста представлено описание, например, "getUser: успешное получение пользовательских данных" и "createUser: отправка POST запроса с пользовательскими данными". Внизу отчета указано общее количество выполненных тестов, все из которых успешно пройдены, а также общее время выполнения тестов.
Тестирование DOM с помощью Vitest
Этот инструмент тестирования обладает высокой мощностью в среде DOM-тестирования и способен имитировать все действия браузера, что значительно облегчает тестирование взаимодействия с пользователем. В данной статье мы рассмотрим шаги по настройке и запуску DOM-тестов.
Настройка jsdom
Тестирование манипуляций DOM
Давайте создадим простую функцию для управления DOM и затем проведем тестирование ее работы.
Эта функция createGreeting создает новый элемент div, устанавливает его текстовое содержимое и класс, а затем добавляет его в тело документа.
Давайте напишем тест для этой функции.
Этот тест проверяет корректность работы функции createGreeting, которая создает и добавляет элемент приветствия в DOM.
На данном изображении показан отчет о тестировании, связанном с DOM. Он отображает успешно пройденный тест, обозначенный зеленой галочкой. В отчете также указано общее количество выполненных тестов (1) и продолжительность теста.
Тестирование событий
Эта функция createCounter создает кнопку, которая, когда нажата, увеличивает счетчик. Давайте рассмотрим сразу тест.
Этот тест проверяет корректность увеличения значения компонента счетчика при клике.
Визуализация тестов с помощью графического интерфейса
Этот инструмент предоставляет вам опциональную графическую панель интерфейса пользователя (GUI) через пакет @vitest/ui. Хотя использование GUI не является обязательным, это может обогатить ваш опыт, предоставляя удобный интерфейс для управления и просмотра результатов тестирования.
Использование панели инструментов с графическим интерфейсом
После установки инструмента с флагом --ui:
Это запустит панель инструментов GUI в вашем веб-браузере. Используя эту панель, вы сможете управлять и просматривать результаты тестирования удобным образом.
Эта панель инструментов GUI показывает результаты всех тестов, рассмотренных в этой статье. Слева вы можете увидеть список тестовых файлов, включая основные функциональные тесты, тесты API, DOM-тесты и тесты счетчика. Каждый тест отображает свой статус прохождения/провала и время выполнения. В правой панели доступна более подробная информация о выбранных тестах, включая ошибки или вывод на консоль. Этот обширный обзор позволяет разработчикам быстро оценить работоспособность всего тестового набора и при необходимости изучить конкретные результаты тестов.
Настройка повторных попыток
По умолчанию фреймворк не повторяет неудачные тесты. Однако, вы можете настроить повторы с помощью опции retry в функции test:
Вот пример нестабильного теста с параметром повтора, установленным на 3. Если тест сначала не проходит, фреймворк будет повторять его до 3 раз, прежде чем отметить его как окончательный провал.
Заключение
Эта тестовая среда, легко интегрируемая с Vite, представляет собой мощное и гибкое решение для современной веб-разработки. Она способна обрабатывать различные типы тестов: вызовы API, обработку ошибок, манипуляции DOM и тестирование событий. Разработчики используют этот инструмент сегодня, чтобы гарантировать, что их приложения всегда остаются сильными, стабильными и качественными.
Этот инструмент идеально интегрируется с быстрым рабочим процессом Vite, делая тестирование легким для начала и простым в использовании с минимальной настройкой. Для тестирования как front-end, так и back-end функционала этот фреймворк является отличным выбором, поскольку способен создавать среды браузера с помощью jsdom, что делает его идеальным решением для тестирования в современной веб-разработке. Такой подход делает модульное тестирование естественной частью процесса разработки, способствуя общему качеству и надежности ваших проектов.
