Vitest UI

Mivel a Vitest a Vite-re épül, a tesztek futtatásakor egy fejlesztői szervert is elindít. Ez lehetővé teszi a Vitest számára, hogy egy elegáns felhasználói felületet (UI) biztosítson a tesztek megtekintéséhez és kezeléséhez. A Vitest UI használata opcionális, ezért külön kell telepíteni a következő paranccsal:

npm i -D @vitest/ui

Ezt követően a teszteket a felhasználói felülettel együtt indíthatja el a --ui jelző átadásával:

vitest --ui

A Vitest UI ekkor a http://localhost:51204/__vitest__/ címen lesz elérhető.

WARNING

A felhasználói felület interaktív, és futó Vite szervert igényel, ezért a Vitestet watch módban kell futtatni (ez az alapértelmezett beállítás). Alternatív megoldásként generálhat egy statikus HTML jelentést, amely a Vitest UI-hoz hasonlóan néz ki, ha az html értéket adja meg a konfiguráció reporters opciójában.

Az UI riporterként is használható. Használja az 'html' riportert a Vitest konfigurációjában a HTML kimenet generálásához és a teszteredmények előnézetéhez:

import { defineConfig } from 'vitest/config';

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

A lefedettségi jelentést a Vitest UI-ban is ellenőrizheti; további részletekért lásd a Vitest UI – Lefedettség részt.

WARNING

Ha továbbra is látni szeretné, hogyan futnak a tesztek valós időben a terminálban, feltétlenül adja hozzá a default riportert a reporters opcióhoz: ['default', 'html'].

TIP

A HTML jelentés előnézetéhez használhatja a vite preview parancsot:

npx vite preview --outDir ./html

A kimeneti fájl helyét az outputFile konfigurációs opcióval állíthatja be. Itt kell megadnia a .html kiterjesztésű elérési utat. Például a ./html/index.html az alapértelmezett.