Interfejs użytkownika Vitest

Vitest, bazując na Vite, zawiera wbudowany serwer deweloperski, który uruchamia się wraz z testami. Dzięki temu Vitest oferuje intuicyjny interfejs użytkownika do przeglądania i interakcji z testami. Interfejs użytkownika Vitest jest opcjonalny i wymaga instalacji:

npm i -D @vitest/ui

Następnie możesz uruchomić testy z interfejsem użytkownika, używając flagi --ui:

vitest --ui

Interfejs użytkownika Vitest będzie dostępny pod adresem http://localhost:51204/__vitest__/.

WARNING

Interfejs użytkownika jest interaktywny i wymaga działającego serwera Vite. Upewnij się, że Vitest jest uruchomiony w trybie watch (domyślnym). Alternatywnie, istnieje możliwość wygenerowania statycznego raportu HTML, który wygląda identycznie jak interfejs użytkownika Vitest, poprzez określenie html w opcji reporters konfiguracji.

Interfejs użytkownika może również służyć jako raport. Użyj reportera 'html' w konfiguracji Vitest, aby wygenerować plik HTML z podglądem wyników testów:

import { defineConfig } from 'vitest/config';

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

Raport pokrycia kodu można sprawdzić w interfejsie użytkownika Vitest. Więcej szczegółów znajdziesz w sekcji Pokrycie interfejsu użytkownika Vitest.

WARNING

Jeśli nadal chcesz widzieć postęp testów w czasie rzeczywistym w terminalu, pamiętaj, aby dodać reportera default do opcji reporters: ['default', 'html'].

TIP

Aby wyświetlić podgląd raportu HTML, możesz użyć polecenia vite preview:

npx vite preview --outDir ./html

Możesz skonfigurować ścieżkę pliku wyjściowego za pomocą opcji outputFile. Musisz tam określić ścieżkę do pliku .html. Na przykład, ./html/index.html jest wartością domyślną.