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

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

TIP

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

npx vite preview --outDir ./html

outputFile設定オプションで出力を設定することが可能です。そのオプションで.htmlパスを指定する必要があります。例えば、./html/index.htmlがデフォルト値です。

Vitest UI ​

Vitest UI