ユニットテスト

Angularアプリケーションをテストすると、期待どおりに動作していることを確認できます。ユニットテストは、バグを早期に発見し、コード品質を確保し、安全なリファクタリングを促進するために不可欠です。

テストの設定

Angular CLIは、Vitestテストフレームワークを使用してAngularアプリケーションをテストするために必要なものをすべてダウンロードしてインストールします。デフォルトでは、新しいプロジェクトにはvitestとjsdomが含まれています。

Vitestは、jsdomを使用してDOMをエミュレートするNode.js環境でユニットテストを実行します。これにより、ブラウザを起動するオーバーヘッドを回避して、テストの実行を高速化できます。happy-domをインストールしてjsdomを削除することで、代替としてhappy-domを使用できます。CLIはhappy-domが存在する場合、自動的に検出して使用します。

CLIで作成したプロジェクトは、すぐにテストできます。ng test CLIコマンドを実行するだけです:

ng test

ng testコマンドはアプリケーションを_監視モード_でビルドし、Vitestテストランナーを起動します。

コンソールの出力は次のようになります:

 ✓ src/app/app.spec.ts (3)   ✓ AppComponent should create the app   ✓ AppComponent should have as title 'my-app'   ✓ AppComponent should render title Test Files  1 passed (1)      Tests  3 passed (3)   Start at  18:18:01   Duration  2.46s (transform 615ms, setup 2ms, collect 2.21s, tests 5ms)

ng testコマンドは変更も監視します。これが実際にどのように機能するかを確認するには、app.tsを少し変更して保存します。テストが再び実行され、新しい結果がコンソールに表示されます。

設定

Angular CLIは、Vitestの設定のほとんどを処理します。多くの一般的なユースケースでは、angular.jsonファイルのオプションを直接変更することで、テストの動作を調整できます。

組み込み設定オプション

angular.jsonファイルのtestターゲットで次のオプションを変更できます:

• include: テストに含めるファイルのGlobパターン。デフォルトは['**/*.spec.ts', '**/*.test.ts']です。
• exclude: テストから除外するファイルのGlobパターン。
• setupFiles: テストの前に実行されるグローバルセットアップファイル（ポリフィルやグローバルモックなど）へのパスのリスト。
• providersFile: テスト環境用のAngularプロバイダーのデフォルト配列をエクスポートするファイルへのパス。これは、テストに注入されるグローバルテストプロバイダーをセットアップするのに役立ちます。
• coverage: コードカバレッジレポートを有効または無効にするブール値。デフォルトはfalseです。
• browsers: テストを実行するブラウザ名の配列（例: ["chromium"]）。ブラウザプロバイダーのインストールが必要です。

たとえば、src/test-providers.tsファイルを作成して、すべてのテストにprovideHttpClientTestingを提供できます:

import { Provider } from '@angular/core';import { provideHttpClient } from '@angular/common/http';import { provideHttpClientTesting } from '@angular/common/http/testing';const testProviders: Provider[] = [  provideHttpClient(),  provideHttpClientTesting(),];export default testProviders;

次に、このファイルをangular.jsonで参照します:

{  "projects": {    "your-project-name": {      "architect": {        "test": {          "builder": "@angular/build:unit-test",          "options": {            "include": ["src/**/*.spec.ts"],            "setupFiles": ["src/test-setup.ts"],            "providersFile": "src/test-providers.ts",            "coverage": true,            "browsers": ["chromium"]          }        }      }    }  }}

高度: カスタムVitest設定

高度なユースケースでは、カスタムVitest設定ファイルを提供できます。

Vitest設定ファイル（例: vitest-base.config.ts）を作成し、runnerConfigオプションを使用してangular.jsonで参照できます。

{  "projects": {    "your-project-name": {      "architect": {        "test": {          "builder": "@angular/build:unit-test",          "options": {            "runnerConfig": "vitest-base.config.ts"          }        }      }    }  }}

CLIを使用して基本設定ファイルを生成できます:

ng generate config vitest

これにより、カスタマイズ可能なvitest-base.config.tsファイルが作成されます。

コードカバレッジ

ng testコマンドに--coverageフラグを追加することで、コードカバレッジレポートを生成できます。レポートはcoverage/ディレクトリに生成されます。

前提条件、カバレッジしきい値の適用、高度な設定の詳細については、コードカバレッジガイドを参照してください。

ブラウザでのテストの実行

デフォルトのNode.js環境はほとんどのユニットテストで高速ですが、実際のブラウザでテストを実行できます。これは、ブラウザ固有のAPI（レンダリングなど）に依存するテストやデバッグに役立ちます。

ブラウザでテストを実行するには、最初にブラウザプロバイダーをインストールする必要があります。 ニーズに基づいて、次のブラウザプロバイダーのいずれかを選択してください:

• Playwright: @vitest/browser-playwright (Chromium、Firefox、WebKit用)
• WebdriverIO: @vitest/browser-webdriverio (Chrome、Firefox、Safari、Edge用)
• Preview: @vitest/browser-preview (StackBlitzなどのWebcontainer環境用)

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

yarn add --dev @vitest/browser-playwright playwright

pnpm add -D @vitest/browser-playwright playwright

bun add --dev @vitest/browser-playwright playwright

プロバイダーがインストールされたら、--browsersフラグを使用してブラウザでテストを実行できます:

# Playwrightの例ng test --browsers=chromium# WebdriverIOの例ng test --browsers=chrome

CI環境変数が設定されている場合、ヘッドレスモードが自動的に有効になります。それ以外の場合、テストはヘッド付きブラウザで実行されます。

その他のテストフレームワーク

Angularアプリケーションは、他のテストライブラリとテストランナーでもユニットテストできます。各ライブラリとランナーには、それぞれ独自のインストール手順、設定、構文があります。

継続的インテグレーションでのテスト

堅牢なテストスイートは、継続的インテグレーション（CI）パイプラインの重要な部分です。CIサーバーを使用すると、プロジェクトリポジトリを設定して、すべてのコミットとプルリクエストでテストを実行できます。

継続的インテグレーション（CI）サーバーでAngularアプリケーションをテストするには、通常、標準のテストコマンドを実行します:

ng test

ほとんどのCIサーバーはCI=true環境変数を設定しており、ng testはこれを検出します。これにより、適切な非対話型のシングルランモードでテストが自動的に実行されます。

CIサーバーがこの変数を設定しない場合、または手動でシングルランモードを強制する必要がある場合は、--no-watchおよび--no-progressフラグを使用できます:

ng test --no-watch --no-progress

テストに関する追加情報

アプリケーションのテストを設定したら、次のテストガイドが役立つ場合があります。