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.

Die Benutzeroberfläche kann auch als Reporter verwendet werden. Verwenden Sie den Reporter 'html' in Ihrer Vitest-Konfiguration, um HTML-Ausgabe zu generieren und die Ergebnisse Ihrer Tests zu überprüfen:

// vitest.config.ts

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

Sie können Ihren Abdeckungsbericht in Vitest UI überprüfen: siehe Vitest UI Coverage für weitere Details.

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