ワイヤサービスを使用する Lightning Web コンポーネントの Jest テストの記述
コンポーネントは、ワイヤサービスを使用して Salesforce のデータを取得します。これらのコンポーネントによるワイヤサービスのデータおよびエラーの処理方法をテストするには、@salesforce/sfdx-lwc-jest
テストユーティリティを使用します。
テストで使用される入力は、外部のコードやデータに依存すべきではなく、あなたが完全に制御できなければなりません。リモート呼び出しやサーバ遅延などの予測できない要因にテストが依存しないように、sfdx-lwc-jest
からテストユーティリティ API をインポートしてデータをモックします。
sfdx-lwc-jest
ユーティリティには、ワイヤサービスデータをモックするために、汎用ワイヤアダプタ、Lightning Data Service (LDS) ワイヤアダプタ、Apex ワイヤアダプタという 3 つのアダプタがあります。
emit()
API をコールすると、汎用アダプタによってデータがオンデマンドで生成されます。データ自体に関する追加情報は含まれません。- LDS アダプタは Lightning Data Service の動作を模倣し、データのプロパティに関する情報が含まれます。
- Apex ワイヤアダプタは Apex メソッドへのコールを模倣し、エラー状況が含まれます。
Salesforce DX を操作するために sfdx-lwc-jest
ユーティリティを使用していない場合は、@salesforce/wire-service-jest-util
テストユーティリティを使用してアダプタをインポートすることができます。ただし、統合された開発環境には sfdx-lwc-jest
を使用することをお勧めします。
テストを制御するために、Salesforce からデータを取得する代わりに、JSON ファイルを作成してコンポーネントが期待するデータを定義します。
ワイヤサービステストユーティリティを使用する手順の概要は、次のとおりです。
- コンポーネントバンドルに、
__tests__
というフォルダとcomponentName.test.js
という JavaScript クラスを作成します。ファイルの命名は、コンポーネントにちなんだ名前の後に.test.js
を追加するのがベストプラクティスです。 __tests__
フォルダに、data
フォルダと_wireAdapter_.json
という JSON ファイルを作成します。- JSON ファイルで、ワイヤアダプタによって生成されるデータをモックします。
- ワイヤアダプタが LDS ワイヤアダプタである場合、ワイヤアダプタが基づいている UI API にアクセスする REST クライアントを使用してデータのスナップショットを取得します。この方法のほうが、JSON を手動で記述するよりも正確です。
componentName.test.js
ファイルで、次の手順を実行します。- テストするコンポーネントとそのワイヤアダプタをインポートする。テストは、テストするコンポーネントと同じワイヤアダプタを参照する必要があります。
- JSON ファイルからモックデータをインポートします。
- モックデータを生成する。
- コンポーネントがモックデータを受け取ったことを確認する。
使用するサンプルコンポーネントは、商品カードコンポーネントです。
商品カードコンポーネントには、商品とその名称が表示されます。
コンポーネントの JavaScript ファイルで、@wire
デコレータは、getRecord
ワイヤアダプタを使用してレコードデータをプロビジョニングするように、ワイヤサービスに指示します。このデコレータは wiredRecord
関数をデコレートし、この関数は error プロパティまたは data プロパティを持つオブジェクトを受け取ります。
lwc-recipes リポジトリには、Jest テストが含まれるワイヤサービスを使用するいくつかのコンポーネントの例があります。
__tests__
フォルダに、data
というフォルダを作成します。data
フォルダ内に、ワイヤアダプタと名前が同じ、getRecord.json
というファイルを作成します。コンポーネントがサーバから期待するデータを定義します。JSON を自分で作成することもできますが、難しかったり、エラーが発生しやすい場合があります。ベストプラクティスは、UI API にアクセスする REST クライアントを使用してデータのスナップショットを取得することです。たとえば、次のデータは /ui-api/records/{recordId}
からの応答です。これは、getRecord
ワイヤアダプタを含むリソースです。
モックしたデータでは、レコードの Name
項目のみが定義されます。実際のテストでは、コンポーネントが期待するすべてのデータをモックします。
単体テストでは、商品カードに商品名が表示されることを確認します。
テストでは、テストするコンポーネントで使用されるワイヤアダプタをインポートする必要があります。この場合は、lightning/uiRecordApi
モジュールから getRecord
ワイヤアダプタをインポートします。テストでは、ワイヤアダプタを介して送信するモックデータをインポートする必要もあります。
テストではコンポーネントを作成し、それを DOM に追加します。コンポーネントは、DOM に接続されている場合にのみデータに関する更新を受信します。コンポーネントが接続した後、ワイヤアダプタの emit
関数にモックしたデータを渡します。
モックしたデータを生成した後、product
または name
が変更されれば、コンポーネントが表示されます。Promise を解決し、DOM が新しいデータで更新された後にテストコードが実行されるようにします。次のコードでは、モックデータの商品名項目が DOM に適切に出力されることを確認します。
Spring ’21 以前のリリースでは、テストするワイヤアダプタを登録する必要がありました。コードは引き続き動作しますが、使用はお勧めしません。
関連トピック
- Github リポジトリ: salesforce/sfdx-lwc-jest
- ワイヤサービスについて
- lightning/ui*Api ワイヤアダプタと関数
- GitHub リポジトリ: lwc-recipes