Vitest UI を導入して ブラウザからテストの実行結果やカバレッジを確認する

はじめに

Vitest には Vitest UI と呼ばれるテスト実行をサポートしてくれるツールが存在します。
今回 Vitest UI のセットアップから実際に利用している状態までを簡単にまとめます。

Vitest UI とは

Vitest 用のブラウザでテストの実行結果等を確認できるツールです。
通常コンソールで確認するテスト結果をブラウザ上で確認することができることはもちろん、テストが失敗した場合はスタックトーレス等も確認することができます。

Vitest UI のセットアップ

インストール

@vitest/ui を devDependencies に追加します。

npm install --save-dev @vitest/ui

設定の追加

Vitest UI で結果を確認するには html を追加してください。
default は記載する必要はありませんが、 コンソールでも確認したい場合は default も追加することを推奨します。

vitest.config.ts

export default {
  test: {
    reporters: ['default', 'html'],
  }
}

Vitest UI の起動

Vitest を実行する際に --ui オプションを付与して起動します。

vitest --ui

実行するとブラウザが自動的に立ち上がりテスト結果を確認することができます。

また、ブラウザ上から実行対象のテストをフィルターすることも可能です。
加えて、テストの再実行も行うことができます。

Ref