Vitest UI

Vitest 係由 Vite 驅動，其在執行測試時，內部會啟動一個開發伺服器。此機制讓 Vitest 能夠提供一個美觀的使用者介面（UI），以便您檢視並與測試進行互動。Vitest UI 係屬可選功能，因此您需要先行安裝：

bash

npm i -D @vitest/ui

接著，您可以透過傳遞 --ui 參數來啟動帶有 UI 的測試：

bash

vitest --ui

隨後，您即可透過以下網址存取 Vitest UI：http://localhost:51204/__vitest__/

WARNING

此 UI 具備互動性，且需依賴一個正在執行的 Vite 伺服器。因此，請務必確保 Vitest 在 watch 模式（預設）下運行。或者，您亦可透過在配置的 reporters 選項中指定 html，來產生一份與 Vitest UI 外觀相同的靜態 HTML 報告。

UI 亦可作為報告器使用。在您的 Vitest 配置中，使用 'html' 報告器來產生 HTML 輸出並預覽測試結果：

import { defineConfig } from 'vitest/config';

export default defineConfig({
  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 ​