Цели

Узнайте, как писать модульные тесты с помощью Vitest.

Что такое Витест?

Vitest — это нативная среда модульного тестирования Vite. С упором на скорость он создан как быстрая и легкая альтернатива Jest.

Базовый набор тестов

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

В приведенном ниже примере мы создали функцию, которая возвращает сумму списка чисел.

Затем мы создаем набор тестов, содержащий три тестовых примера.

Логика каждого тестового примера довольно проста. Мы просто вызываем функцию с некоторыми входными данными и проверяем, соответствует ли результат ожидаемому.

Чтобы запустить набор тестов, мы можем использовать команду npx vitest. И вы должны увидеть следующий вывод в терминале.

RERUN  sum.test.ts x1
✓ sum.test.ts (3)
  ✓ #SUM (3)
    ✓ should return 0 for empty array
    ✓ should return 1 for [1]
    ✓ should return sum of all numbers
Test Files  1 passed (1)
      Tests  3 passed (3)
  Start at  14:45:35
  Duration  11ms

PASS  Waiting for file changes...
      press h to show help, press q to quit

Как видите, все три тестовых случая пройдены. Отличная работа! Вы успешно создали свой первый набор тестов с помощью Vitest.

Тестирование в исходном коде

Давайте посмотрим, как мы можем писать тесты в том же файле, что и тестируемый код.

Тестирование в исходном коде — это способ написания тестов в том же файле, что и тестируемый код. Это полезно для небольших проектов, где затраты на поддержку отдельных тестовых файлов не стоят того. Одна из замечательных особенностей Vitest заключается в том, что он поддерживает тестирование исходного кода «из коробки».

Чтобы включить тестирование в исходном коде, вы можете просто добавить блок test после определения функции.

Если вы используете TypeScript, вам нужно будет добавить некоторую конфигурацию в ваш файл tsconfig.json, чтобы редактор не кричал на вас. Ознакомьтесь с документацией Vitest для получения более подробной информации о тестировании исходного кода и настройке TypeScript.

Покрытие кода

Vitest поставляется с поддержкой покрытия кода!

Покрытие кода — это мера того, какая часть вашего кода покрыта тестами. Это полезный показатель для отслеживания качества ваших тестов.

Чтобы включить покрытие кода, мы можем использовать флаг --coverage в CLI.

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

Мы также можем создать отчет о покрытии кода в формате HTML. Для этого мы можем отредактировать файл vite.config.ts и добавить следующий код.

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

Как видите, отчет о покрытии кода генерируется в формате HTML, и его гораздо проще читать, чем в терминале.

Снимок

Vitest также включает поддержку моментального тестирования! Давайте посмотрим, как это работает.

Тестирование моментальных снимков — это способ проверить правильность вывода функции. Посмотрим, как это выглядит в Витесте.

При использовании снимка Vitest сделает снимок заданного значения, а затем сравнит его с эталонным файлом снимка, хранящимся вместе с тестом. Тест завершится неудачей, если два снимка не совпадают: либо изменение является неожиданным, либо необходимо обновить эталонный снимок до новой версии результата.

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

Когда мы запускаем набор тестов в первый раз, Vitest создаст для нас файл моментального снимка.

Артефакт моментального снимка следует фиксировать вместе с изменениями кода и проверять в рамках процесса проверки кода. При последующих запусках теста Vitest будет сравнивать визуализированные выходные данные с предыдущим снимком. Если они совпадают, тест считается пройденным. Если они не совпадают, либо программа запуска тестов обнаружила ошибку в вашем коде, которую следует исправить, либо реализация изменилась и снимок необходимо обновить.

Чтобы узнать больше, я рекомендую вам ознакомиться с документацией Vitest для получения более подробной информации о тестировании снимков.

Заключение

Вот и все на сегодня! Мы научились использовать Vitest для тестирования нашего кода TypeScript, а также некоторых готовых функций, которые предоставляет Vitest. Надеюсь, вам понравится этот пост и увидимся в следующем!

Ознакомьтесь со всеми сообщениями в моем блоге



Сун-Цзе Хун | Блог
Изменить описаниеsungjiehung.com



Ресурсы

На простом английском языке

Спасибо, что вы являетесь частью нашего сообщества! Прежде чем уйти: