Vitest UI

Vite を搭載した Vitest はテストの実行時にデブサーバーもバックグラウンドで動作させます。これにより、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 カバレッジを確認してください。

警告

ターミナルでテストがリアルタイムにどのように実行されているかを確認したい場合は、reporters オプションにdefault レポーターを追加することを忘れないでください。['default', 'html']

ヒント

HTML レポートをプレビューするには、vite preview コマンドを使用できます。

npx vite preview --outDir ./html

outputFile 設定オプションを使用して出力を設定できます。そこに.html パスを指定する必要があります。たとえば、./html/index.html がデフォルト値です。

Vitest UI ​