Vitest UI

Vitest 以 Vite 為基礎，在執行測試時，也具備開發伺服器的功能。這使得 Vitest 可以提供一個美觀的 UI，以便檢視並與您的測試互動。 Vitest UI 是可選的，因此您需要使用以下命令安裝它：

bash

npm i -D @vitest/ui

然後，您可以透過傳遞 --ui 標誌來啟動 UI 並執行測試：

bash

vitest --ui

接著，您可以訪問 http://localhost:51204/__vitest__/ 上的 Vitest UI。

從 Vitest 0.26.0 開始，UI 也可以作為報告器使用。在您的 Vitest 配置中使用 'html' 報告器來生成 HTML 輸出，並預覽測試結果：

// vitest.config.ts

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

從 Vitest 0.31.0 開始，您可以在 Vitest UI 中檢視覆蓋率報告：請參考 Vitest UI 覆蓋率以取得更多詳細資訊。

WARNING

如果您仍然希望在終端中即時檢視測試的執行情況，請不要忘記將 default 報告器加入 reporters 選項：['default', 'html']。

TIP

要預覽您的 HTML 報告，您可以使用 vite preview 指令：

npx vite preview --outDir ./html

您可以使用 outputFile 配置選項來設定輸出路徑。需在其中指定 .html 檔案路徑。例如，./html/index.html 是預設值。

Vitest UI ​