Vitest UI

Vitest 採用 Vite，在執行測試時也會在幕後使用開發伺服器。這讓 Vitest 能夠提供一個美觀的 UI 來檢視和與你的測試互動。Vitest UI 是選用的，因此你需要使用以下指令安裝它

bash

npm i -D @vitest/ui

然後你可以透過傳遞 --ui 旗標來啟動有 UI 的測試

bash

vitest --ui

然後你可以瀏覽 https://127.0.0.1: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 涵蓋範圍以取得更多詳細資訊。

警告

如果你仍想在終端機中即時查看你的測試執行狀況，請別忘了將 default 報告員新增至 reporters 選項：['default', 'html']。

提示

若要預覽 HTML 報告，可以使用 vite preview 指令

npx vite preview --outDir ./html

可以使用 outputFile 組態選項來設定輸出。您需要在那裡指定 .html 路徑。例如，./html/index.html 是預設值。

Vitest UI ​