テスト

Angularアプリケーションをテストすると、アプリケーションが期待どおりに動作していることを確認できます。

テストの設定

Angular CLIは、Jasmineテストフレームワークを使用してAngularアプリケーションをテストするために必要なものをすべてダウンロードしてインストールします。

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

      
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が3つのテストを実行し、すべてが合格したことを示しています。

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

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

一方、ng testコマンドは変更を監視しています。

これが実際にどのように機能するかを確認するには、app.component.tsを少し変更して保存します。 テストが再び実行され、ブラウザが更新され、新しいテスト結果が表示されます。

設定

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

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

      
ng generate config karma
    

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

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

テストファイル名と場所

Angular CLIは、src/appフォルダ内にAppComponentのテストファイルをapp.component.spec.tsという名前で生成しました。

app.component.tsとapp.component.spec.tsファイルは、同じフォルダ内の兄弟です。 ルートファイル名（app.component）は、両方のファイルで同じです。

あらゆる種類のテストファイルに対して、これらの2つの規則を独自のプロジェクトで採用してください。

テストするファイルの横にspecファイルを配置する

ユニットテストのspecファイルを、 テストするアプリケーションソースコードファイルと同じフォルダに入れることをお勧めします。

• このようなテストは簡単に検索できます。
• アプリケーションの一部にテストがないかどうかをひと目で確認できます。
• 近くのテストは、一部がコンテキストでどのように機能するかを示すことができます。
• ソースを移動すると（不可避ですが）、テストも移動することを思い出します。
• ソースファイルを名前変更すると（不可避ですが）、テストファイルの名前も変更することを思い出します。

specファイルをテストフォルダに配置する

アプリケーションの統合specは、 フォルダとモジュールにまたがる複数の部分の相互作用をテストできます。 それらは、特にどの部分にも属していないため、 特定のファイルの横に自然な場所がありません。

多くの場合、それらに対してtestsディレクトリに適切なフォルダを作成する方が良いでしょう。

もちろん、テストヘルパーをテストするspecは、 対応するヘルパーファイルの隣のtestフォルダに入ります。

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

プロジェクトをバグなしに保つ最良の方法の1つは、テストスイートを使用することですが、常にテストを実行することを忘れてしまうかもしれません。

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

Angular CLIアプリケーションを継続的インテグレーション（CI）でテストするには、次のコマンドを実行します。

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

テストに関する追加情報

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