Vitest UI

Vitest, основанный на Vite, использует встроенный dev-сервер при запуске тестов. Это позволяет Vitest предоставлять удобный пользовательский интерфейс для просмотра тестов и взаимодействия с ними. Vitest UI является опциональным и требует установки:

bash

npm i -D @vitest/ui

Затем вы можете запустить тесты с UI, передав флаг --ui:

bash

vitest --ui

После запуска вы можете получить доступ к Vitest UI по ссылке http://localhost:51204/__vitest__/

WARNING

Пользовательский интерфейс интерактивен и требует запущенного сервера Vite. Убедитесь, что Vitest работает в режиме watch (это режим по умолчанию). В качестве альтернативы можно сгенерировать статический HTML-отчет, который выглядит идентично Vitest UI, указав html в опции reporters конфигурации.

UI также может быть использован в качестве репортера. Используйте репортер 'html' в конфигурации Vitest для генерации HTML-отчета и просмотра результатов тестов:

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    reporters: ['html'],
  },
});

Вы можете просмотреть отчет о покрытии в Vitest UI: см. Покрытие Vitest UI для получения более подробной информации о покрытии.

WARNING

Если вы хотите видеть выполнение тестов в реальном времени в терминале, не забудьте добавить репортер default к опции reporters: ['default', 'html'].

TIP

Для предварительного просмотра HTML-отчета вы можете использовать команду vite preview:

npx vite preview --outDir ./html

Вы можете настроить путь вывода с помощью опции конфигурации outputFile. Там необходимо указать путь к файлу .html. Например, ./html/index.html используется по умолчанию.

Vitest UI ​

Vitest UI