Angular × Vite ブラウザでテスト結果を確認する

この記事は「Angular × Vite ユニットテスト入門｜Vitestで始めるテスト完全ガイド」シリーズの一部です。

Angular × Vite環境でユニットテストを実行した際、「ブラウザ上で結果を確認したい」と感じることは多いです。

Vitestでは、ブラウザ実行機能を利用することで、実際のブラウザ環境でテスト結果を可視化できます。

本記事では、Angular × Vite環境でブラウザ上にテスト結果を表示する方法を解説します。

ブラウザ実行に必要なパッケージ

ブラウザ実行には「ブラウザプロバイダー」が必要です。
以下のような種類がありますが、今回はWebdriverIOをいれて、Chromeで実行します。

npm install --save-dev @vitest/browser-playwright

npm install --save-dev @vitest/browser-webdriverio

ブラウザ実行を有効にするには、angular.json を設定します。

        "test": {
          "builder": "@angular/build:unit-test",
          "options": {
            "browsers": ["chrome"]
          }

この状態で、ng testでテストを実行すると、
以下の添付画像のように、ブラウザで実行結果を確認できます。

jsdomでは再現できない動作も確認可能

console / network / DOMを直接確認できる

クリック・入力などのユーザー操作を検証しやすい

Angular × Vitestでブラウザテストを行うには以下の手順です。

ブラウザモードは、デバッグやUIテストに非常に有効です。

通常の高速テストと使い分けることで、効率的なテスト戦略を構築できます。