詳細ガイド
テスト

KarmaとJasmineを使用したテスト

新しいAngularプロジェクトではVitestがデフォルトのテストランナーですが、Karmaも引き続きサポートされており、広く使われているテストランナーです。このガイドでは、KarmaテストランナーとJasmineテストフレームワークを使用して、Angularアプリケーションをテストする手順を説明します。

KarmaとJasmineのセットアップ

KarmaとJasmineは、新規プロジェクトでセットアップすることも、既存のプロジェクトに追加できます。

新規プロジェクトの場合

KarmaとJasmineが事前設定された新規プロジェクトを作成するには、ng newコマンドを--test-runner=karmaオプション付きで実行します:

ng new my-karma-app --test-runner=karma

既存のプロジェクトの場合

既存のプロジェクトにKarmaとJasmineを追加するには、次の手順に従います:

  1. 必要なパッケージをインストールします:

  2. angular.jsonでテストランナーを設定します:

    angular.jsonファイルでtestターゲットを見つけ、runnerオプションをkarmaに設定します:

    {  // ...  "projects": {    "your-project-name": {      // ...      "architect": {        "test": {          "builder": "@angular/build:unit-test",          "options": {            "runner": "karma",            // ... other options          }        }      }    }  }}

  3. Jasmineの型定義のためにtsconfig.spec.jsonを更新します:

    TypeScriptがdescribeやitのようなグローバルなテスト関数を認識できるように、tsconfig.spec.jsonのtypes配列に"jasmine"を追加します:

    {  // ...  "compilerOptions": {    // ...    "types": [      "jasmine"    ]  },  // ...}

テストの実行

プロジェクトの設定が完了したら、ng testコマンドを使用してテストを実行します:

ng test

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

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

02 11 2022 09:08:28.605:INFO [karma-server]: Karma v6.4.1 server started at http://localhost:9876/02 11 2022 09:08:28.607:INFO [launcher]: Launching browsers Chrome with concurrency unlimited02 11 2022 09:08:28.620:INFO [launcher]: Starting browser Chrome02 11 2022 09:08:31.312:INFO [Chrome]: Connected on socket -LaEYvD2R7MdcS0-AAAB with id 31534482Chrome: Executed 3 of 3 SUCCESS (0.193 secs / 0.172 secs)TOTAL: 3 SUCCESS

テスト出力はKarma Jasmine HTML Reporterを使用してブラウザに表示されます。

ブラウザに表示されたJasmine HTML Reporter

テスト行をクリックしてそのテストだけを再実行するか、説明をクリックして選択したテストグループ（「テストスイート」）のテストを再実行します。

その間、ng testコマンドは変更を監視しています。これを実際に確認するには、ソースファイルに小さな変更を加えて保存します。テストが再実行されてブラウザが更新され、新しいテスト結果が表示されます。

設定

Angular CLIがJasmineとKarmaの設定を代行します。angular.jsonファイルで指定されたオプションに基づいて、完全な設定をメモリ内に構築します。

Karma設定のカスタマイズ

Karmaをカスタマイズしたい場合は、次のコマンドを実行してkarma.conf.jsを作成できます:

ng generate config karma

HELPFUL: Karmaの設定については、Karma設定ガイドで詳しく説明されています。

angular.jsonでのテストランナーの設定

プロジェクトのテストランナーとしてKarmaを明示的に設定するには、angular.jsonファイル内のtestターゲットを見つけ、runnerオプションをkarmaに設定します:

{  // ...  "projects": {    "your-project-name": {      // ...      "architect": {        "test": {          "builder": "@angular/build:unit-test",          "options": {            "runner": "karma",            // ... other options          }        }      }    }  }}

コードカバレッジの強制

最小コードカバレッジレベルを強制するには、karma.conf.jsファイルのcoverageReporterセクションにあるcheckプロパティを使用できます。

たとえば、最小80%のカバレッジを要求するには:

coverageReporter: {  dir: require('path').join(__dirname, './coverage/<project-name>'),  subdir: '.',  reporters: [    { type: 'html' },    { type: 'text-summary' }  ],  check: {    global: {      statements: 80,      branches: 80,      functions: 80,      lines: 80    }  }}

指定されたカバレッジのしきい値が満たされない場合、これによりテスト実行は失敗します。

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

CI環境でKarmaテストを実行するには、次のコマンドを使用します:

ng test --no-watch --no-progress --browsers=ChromeHeadless

NOTE: CI環境において、Karmaでテストを一度だけ実行して正常に終了させるためには、--no-watchと--no-progressフラグが不可欠です。また、--browsers=ChromeHeadlessフラグは、グラフィカルインターフェースを持たないブラウザ環境でテストを実行するために必須です。

テストのデバッグ

テストが期待どおりに動作しない場合は、ブラウザで検査およびデバッグできます。

Karmaテストランナーでアプリケーションをデバッグするには:

  1. Karmaブラウザウィンドウを表示します。このステップでヘルプが必要な場合は、テストのセットアップを参照してください。
  2. DEBUGボタンをクリックして新しいブラウザタブを開き、テストを再実行します。
  3. ブラウザの開発者ツールを開きます。Windowsでは、Ctrl-Shift-Iを押します。macOSでは、Command-Option-Iを押します。
  4. Sourcesセクションを選択します。
  5. Control/Command-Pを押し、テストファイルの名前を入力して開きます。
  6. テストにブレークポイントを設定します。
  7. ブラウザを更新すると、ブレークポイントで停止することがわかります。
Karmaのデバッグ