Vitest UI

Vitest basiert auf Vite und verfügt beim Ausführen der Tests über einen integrierten Dev-Server. Dies ermöglicht Vitest, eine ansprechende Benutzeroberfläche zur Anzeige und Interaktion mit Ihren Tests bereitzustellen. Die Vitest UI ist optional und muss wie folgt installiert werden:

bash

npm i -D @vitest/ui

Anschließend können Sie die Tests mit der UI starten, indem Sie das --ui-Flag übergeben:

bash

vitest --ui

Danach ist die Vitest UI unter http://localhost:51204/__vitest__/ aufrufbar.

WARNING

Die UI ist interaktiv und erfordert einen laufenden Vite-Server. Stellen Sie daher sicher, Vitest im watch-Modus (Standardmodus) laufen zu lassen. Alternativ können Sie einen statischen HTML-Bericht generieren, der der Vitest UI gleicht, indem Sie html in der reporters-Option der Konfiguration angeben.

Die UI kann auch als Reporter eingesetzt werden. Nutzen Sie den 'html'-Reporter in Ihrer Vitest-Konfiguration, um HTML-Ausgaben zu generieren und Testergebnisse anzuzeigen:

import { defineConfig } from 'vitest/config';

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

Sie können Ihren Coverage-Bericht in der Vitest UI einsehen: Details dazu finden Sie unter Vitest UI Coverage.

WARNING

Falls Sie weiterhin verfolgen möchten, wie Ihre Tests in Echtzeit im Terminal ausgeführt werden, fügen Sie unbedingt den default-Reporter zur reporters-Option hinzu: ['default', 'html'].

TIP

Zur Vorschau Ihres HTML-Berichts können Sie den Befehl vite preview verwenden:

npx vite preview --outDir ./html

Sie können die Ausgabe mit der Konfigurationsoption outputFile konfigurieren. Dort ist ein .html-Pfad anzugeben. Zum Beispiel ist ./html/index.html der Standardwert.

Vitest UI ​

Vitest UI