ワイヤサービスを使用する 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 を使用することをお勧めします。

Note

テストを制御するために、Salesforce からデータを取得する代わりに、JSON ファイルを作成してコンポーネントが期待するデータを定義します。

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

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

テストするコンポーネント

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

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

1<!-- productCard.html -->
2<template>
3  <div class="content">
4    <template lwc:if={product}>         
5        <div class="name">         
6          <div>Name:</div>
7          <div>{name}</div>
8        </div>
9    </template>
10  </div>
11</template>

コンポーネントの JavaScript ファイルで、@wire デコレータは、getRecord ワイヤアダプタを使用してレコードデータをプロビジョニングするように、ワイヤサービスに指示します。このデコレータは wiredRecord 関数をデコレートし、この関数は error プロパティまたは data プロパティを持つオブジェクトを受け取ります。

1// productCard.js
2import { LightningElement, wire } from "lwc";
3
4// Wire adapter to load records.
5import { getRecord } from "lightning/uiRecordApi";
6
7export default class ProductCard extends LightningElement {
8  // Id of Product__c to display.
9  recordId;
10
11  // Product__c to display
12  product;
13
14  // Product__c field values to display
15  name = "";
16
17  @wire(getRecord, { recordId: "$recordId", fields: ["Product.Name"] })
18  wiredRecord({ data }) {
19    if (data) {
20      this.product = data;
21      this.name = data.fields.Name.value;
22    }
23  }
24}

lwc-recipes リポジトリには、Jest テストが含まれるワイヤサービスを使用するいくつかのコンポーネントの例があります。

Tip

データのモック

__tests__ フォルダに、data というフォルダを作成します。data フォルダ内に、ワイヤアダプタと名前が同じ、getRecord.json というファイルを作成します。コンポーネントがサーバから期待するデータを定義します。JSON を自分で作成することもできますが、難しかったり、エラーが発生しやすい場合があります。ベストプラクティスは、UI API にアクセスする REST クライアントを使用してデータのスナップショットを取得することです。たとえば、次のデータは /ui-api/records/{recordId} からの応答です。これは、getRecord ワイヤアダプタを含むリソースです。

モックしたデータでは、レコードの Name 項目のみが定義されます。実際のテストでは、コンポーネントが期待するすべてのデータをモックします。

1{
2  "fields": {
3    "Name": {
4      "value": "DYNAMO X1"
5    }
6  }
7}

JavaScript テストの作成

単体テストでは、商品カードに商品名が表示されることを確認します。

テストでは、テストするコンポーネントで使用されるワイヤアダプタをインポートする必要があります。この場合は、lightning/uiRecordApi モジュールから getRecord ワイヤアダプタをインポートします。テストでは、ワイヤアダプタを介して送信するモックデータをインポートする必要もあります。

テストではコンポーネントを作成し、それを DOM に追加します。コンポーネントは、DOM に接続されている場合にのみデータに関する更新を受信します。コンポーネントが接続した後、ワイヤアダプタの emit 関数にモックしたデータを渡します。

モックしたデータを生成した後、product または name が変更されれば、コンポーネントが表示されます。Promise を解決し、DOM が新しいデータで更新された後にテストコードが実行されるようにします。次のコードでは、モックデータの商品名項目が DOM に適切に出力されることを確認します。

1// productCard.test.js
2import { createElement } from "lwc";
3import ProductCard from "c/productCard";
4import { getRecord } from "lightning/uiRecordApi";
5
6// Import mock data to send through the wire adapter.
7const mockGetRecord = require("./data/getRecord.json");
8
9test("displays product name field", () => {
10  const element = createElement("c-product_filter", { is: ProductCard });
11  document.body.appendChild(element);
12
13  // Emit mock record into the wired field
14  getRecord.emit(mockGetRecord);
15
16  // Resolve a promise to wait for a rerender of the new content.
17  return Promise.resolve().then(() => {
18    const content = element.shadowRoot.querySelector(".content");
19    const nameField = mockGetRecord.fields.Name.value;
20    expect(content.textContent).toBe(`Name:${nameField}`);
21  });
22});

Spring ’21 以前のリリースでは、テストするワイヤアダプタを登録する必要がありました。コードは引き続き動作しますが、使用はお勧めしません。

Note

関連トピック

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。