Angular Testing Library
Angular Testing Library は、DOM Testing Library を基盤としてAngularコンポーネントを扱うためのAPIを追加しています。ATLバージョン17以降、@testing-library/dom もインストールする必要があります。
- npm
- Yarn
npm install --save-dev @testing-library/angular @testing-library/dom
yarn add --dev @testing-library/angular @testing-library/dom
または、ng add コマンドを使用できます。これは、プロジェクトをAngular Testing Libraryを使用するように設定し、@testing-library/dom のインストールも含みます。
ng add @testing-library/angular
問題点
Angularコンポーネントの保守性の高いテストを作成したいと考えています。この目標の一環として、テストにコンポーネントの実装の詳細を含めず、テストが意図した通りの信頼性を提供することに焦点を当てたいと考えています。そのため、コンポーネントのリファクタリング（機能ではなく実装の変更）によってテストが壊れたり、チームの作業が遅延したりしないように、テストベースを長期的に保守できるようにしたいと考えています。
このソリューション
Angular Testing Library は、Angularコンポーネントをテストするための非常に軽量なソリューションです。より良いテストプラクティスを促進する方法で、DOM Testing Library の上に軽量なユーティリティ関数を提供します。その主要な指針となる原則は次のとおりです。
そのため、レンダリングされたAngularコンポーネントのインスタンスを扱うのではなく、テストは実際のDOMノードを扱います。このライブラリが提供するユーティリティは、ユーザーと同じ方法でDOMをクエリすることを容易にします。ユーザーと同じようにラベルテキストでフォーム要素を見つけたり、ユーザーと同じようにテキストからリンクやボタンを見つけたりします。また、テキストコンテンツとラベルが意味をなさない場合や実用的でない場合の要素の「エスケープハッチ」として、`data-testid` で要素を見つけるための推奨される方法も公開しています。
このライブラリは、アプリケーションのアクセシビリティを向上させ、ユーザーが使用するのと同じ方法でコンポーネントを使用するテストに近づけることができます。これにより、実際のユーザーがアプリケーションを使用するときにアプリケーションが動作するという、より大きな自信をテストから得ることができます。
Angular Testing Library は
DOM Testing LibraryからqueryおよびfireEventユーティリティ関数を再エクスポートします。- コンポーネントの
fireEvent関数をカプセル化して、イベント発生後に自動的にdetectChanges()を呼び出します。 - テストフレームワークに依存せず、すべてのテストフレームワークで動作します.