ワイヤサービスを使用する 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 ファイルを作成してコンポーネントが期待するデータを定義します。

ワイヤサービステストユーティリティを使用する手順の概要は、次のとおりです。

  1. コンポーネントバンドルに、__tests__ というフォルダと componentName.test.js という JavaScript クラスを作成します。ファイルの命名は、コンポーネントにちなんだ名前の後に .test.js を追加するのがベストプラクティスです。
  2. __tests__ フォルダに、data フォルダと _wireAdapter_.json という JSON ファイルを作成します。
    1. JSON ファイルで、ワイヤアダプタによって生成されるデータをモックします。
    2. ワイヤアダプタが LDS ワイヤアダプタである場合、ワイヤアダプタが基づいている UI API にアクセスする REST クライアントを使用してデータのスナップショットを取得します。この方法のほうが、JSON を手動で記述するよりも正確です。
  3. componentName.test.js ファイルで、次の手順を実行します。
    1. テストするコンポーネントとそのワイヤアダプタをインポートする。テストは、テストするコンポーネントと同じワイヤアダプタを参照する必要があります。
    2. JSON ファイルからモックデータをインポートします。
    3. モックデータを生成する。
    4. コンポーネントがモックデータを受け取ったことを確認する。

使用するサンプルコンポーネントは、商品カードコンポーネントです。

商品カードコンポーネントには、商品とその名称が表示されます。

コンポーネントの 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 以前のリリースでは、テストするワイヤアダプタを登録する必要がありました。コードは引き続き動作しますが、使用はお勧めしません。

関連トピック