Vitest UI

Vite を利用する Vitest は、テスト実行時に内部で開発サーバーを起動します。このため、Vitest はテストの表示や操作を行うための洗練された UI を提供できます。Vitest UI はオプション機能であるため、以下の手順でインストールする必要があります。

bash

npm i -D @vitest/ui

次に、--ui フラグを指定して Vitest を実行することで、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 Coverage を参照してください。

WARNING

ターミナルでテストの実行状況をリアルタイムに確認したい場合は、reporters オプションに default レポーターを追加してください (['default', 'html'])。

TIP

HTML レポートの確認には、vite preview コマンドを使用できます。

npx vite preview --outDir ./html

outputFile 設定オプションで出力先を指定できます。このオプションには、.html ファイルへのパスを指定する必要があります。デフォルト値は ./html/index.html です。

Vitest UI ​