Vitest UI

Vitest nutzt Vite und startet beim Ausführen von Tests im Hintergrund einen Entwicklungsserver. Dadurch kann Vitest eine ansprechende UI bereitstellen, mit der Sie Ihre Tests einsehen und interaktiv nutzen können. Die Vitest-UI ist optional und muss daher mit folgendem Befehl installiert werden:

bash

npm i -D @vitest/ui

Anschließend können Sie die Tests mit der UI starten, indem Sie die Option --ui verwenden:

bash

vitest --ui

Danach können Sie die Vitest-UI unter http://localhost:51204/__vitest__/ aufrufen.

Ab Vitest 0.26.0 kann die UI auch als Reporter verwendet werden. Verwenden Sie den 'html'-Reporter in Ihrer Vitest-Konfiguration, um eine HTML-Ausgabe zu generieren und die Ergebnisse Ihrer Tests in einer Vorschau anzuzeigen:

// vitest.config.ts

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

Seit Vitest 0.31.0 können Sie Ihren Coverage-Bericht in der Vitest-UI einsehen. Weitere Informationen finden Sie unter Vitest UI Coverage.

WARNING

Wenn Sie weiterhin in Echtzeit im Terminal sehen möchten, wie Ihre Tests ausgeführt werden, vergessen Sie nicht, den default-Reporter zu den reporters hinzuzufügen: ['default', 'html'].

TIP

Für eine Vorschau Ihres HTML-Berichts können Sie den Befehl vite preview verwenden:

npx vite preview --outDir ./html

Die Ausgabe lässt sich mit der Konfigurationsoption outputFile konfigurieren. Dort müssen Sie den Pfad .html angeben. Beispielsweise ist ./html/index.html der Standardwert.

Vitest UI ​

Vitest UI