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。

UI 也可以用作一個報告器。在你的 Vitest 配置中使用 'html' 報告器可以生成 HTML 輸出並預覽你的測試結果：

// vitest.config.ts

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

你可以在 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 ​