詳細ガイド
テスト

ユニットテスト

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

NOTE: このガイドでは、Vitestを使用した新しいAngular CLIプロジェクトのデフォルトテスト設定について説明します。既存のプロジェクトをKarmaから移行する場合は、KarmaからVitestへの移行ガイドを参照してください。Karmaは引き続きサポートされています。詳細については、Karmaテストガイドを参照してください。

テストの設定

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

Vitestは、Node.js環境でユニットテストを実行します。ブラウザのDOMをシミュレートするために、Vitestはjsdomというライブラリを使用します。これにより、ブラウザを起動するオーバーヘッドを回避して、テストの実行を高速化できます。happy-domのような代替手段にjsdomを置き換えることもできます。happy-domをインストールしてjsdomをアンインストールすれば、置き換えられます。現在、jsdomとhappy-domがサポートされているDOMエミュレーションライブラリです。

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

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コマンドは、ファイルの変更も監視します。ファイルを変更して保存すると、テストが再び実行されます。

設定

Angular CLIは、Vitestの設定のほとんどを処理します。angular.jsonファイルのtestターゲットオプションを変更することで、テストの動作をカスタマイズできます。

Angular.jsonオプション

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

グローバルテスト設定とプロバイダー

setupFilesとprovidersFileオプションは、グローバルテスト設定を管理するのに特に役立ちます。

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

src/test-providers.ts

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": {            "providersFile": "src/test-providers.ts"          }        }      }    }  }}

HELPFUL: テスト設定やプロバイダー用にsrc/test-providers.tsのような新しいTypeScriptファイルを作成する場合は、プロジェクトのテスト用TypeScript設定ファイル（通常はtsconfig.spec.json）にそれらを含めるようにしてください。これにより、TypeScriptコンパイラがテスト中にこれらのファイルを適切に処理できるようになります。

高度なVitest設定

高度なユースケースでは、angular.jsonのconfigFileオプションを使用してカスタムVitest設定ファイルを提供できます。

IMPORTANT: カスタム設定を使用すると高度なオプションが有効になりますが、Angularチームは設定ファイルの内容やサードパーティプラグインについてサポートを提供していません。また、CLIは適切な統合を保証するために特定のプロパティ（test.projects、test.include）を上書きします。

Vitest設定ファイル（例: vitest-base.config.ts）を作成し、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ファイルが作成されます。

HELPFUL: Vitestの設定について詳しくは、Vitestの公式ドキュメントを参照してください。

コードカバレッジ

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

詳細については、コードカバレッジガイドを参照してください。

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

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

ブラウザでテストを実行するには、最初にブラウザプロバイダーをインストールする必要があります。Vitestのブラウザモードの詳細については、公式ドキュメントを参照してください。

プロバイダーがインストールされたら、angular.jsonのbrowsersオプションを設定するか、--browsers CLIフラグを使用してブラウザでテストを実行できます。テストは、デフォルトではヘッドフルブラウザが使用されます。CI環境変数が設定されている場合は、代わりにヘッドレスモードが使用されます。ヘッドレスモードを明示的に制御するには、ブラウザ名にHeadlessをサフィックスとして追加できます（例: chromiumHeadless）。

# Playwrightの例（ヘッドフル）ng test --browsers=chromium# Playwrightの例（ヘッドレス）ng test --browsers=chromiumHeadless# WebdriverIOの例（ヘッドフル）ng test --browsers=chrome# WebdriverIOの例（ヘッドレス）ng test --browsers=chromeHeadless

ニーズに基づいて、次のブラウザプロバイダーのいずれかを選択してください:

Playwright

Playwrightは、Chromium、Firefox、WebKitをサポートするブラウザ自動化ライブラリです。

WebdriverIO

WebdriverIOは、Chrome、Firefox、Safari、Edgeをサポートするブラウザとモバイル自動化テストフレームワークです。

Preview

@vitest/browser-previewプロバイダーは、StackBlitzなどのWebcontainer環境向けに設計されており、CI/CDでの使用を目的としていません。

HELPFUL: より高度なブラウザ固有の設定については、高度なVitest設定セクションを参照してください。

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

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

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

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

CIサーバーでAngularアプリケーションをテストするには、標準のテストコマンドを実行します:

ng test

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

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

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

テストに関する追加情報

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

詳細
コードカバレッジ テストがアプリケーションのどの部分をカバーしているか、および必要な量の指定方法。
サービスのテスト アプリケーションで使用しているサービスのテスト方法。
コンポーネントのテストの基本 Angularコンポーネントのテストの基本。
コンポーネントテストシナリオ さまざまな種類のコンポーネントテストシナリオとユースケース。
属性ディレクティブのテスト 属性ディレクティブのテスト方法。
パイプのテスト パイプのテスト方法。
テストのデバッグ 一般的なテストのバグ。
ユーティリティAPIのテスト Angularのテスト機能。