ワイヤーサービスの Jest テストの記述
学習の目的
この単元を完了すると、次のことができるようになります。
- ワイヤーサービスの主なアダプターを 3 つ挙げる。
- ワイヤーサービスのデータのモックについて説明する。
- リアクティブ変数とその影響を理解する。
@wire サービスのテスト
Lightning Web コンポーネントは、Lightning データサービス上に構築されたリアクティブワイヤーサービスを使用して、Salesforce データを読み取ります。コンポーネントは JavaScript クラスの @wire
を使用して、lightning/ui*Api
モジュールのいずれかのワイヤーアダプターからデータを読み取ります。
このワイヤーサービスがリアクティブである理由の 1 つは、リアクティブ変数をサポートしていることです。リアクティブ変数には $
のプレフィックスが付いています。リアクティブ変数が変更されると、ワイヤーサービスが新しいデータをプロビジョニングします。データがクライアントのキャッシュに存在する場合は、ネットワークリクエストを伴わないことがあります。
ここでは、@salesforce/sfdx-lwc-jest
テストユーティリティを使用して、これらのコンポーネントがワイヤーサービスからのデータやエラーをどのように処理するかをテストします。
テストをする場合、テストで使用する入力を完全に制御できることが求められます。外部のコードやデータとの連動関係は認められません。ここでは、sfdx-lwc-jest
からデータをモックするテストユーティリティ API をインポートして、テストがリモート呼び出しやサーバー遅延といった予測不能な要因に左右されないようにします。
ワイヤーサービスのデータのモックに使用するアダプターには次の 3 種類があります。
- 汎用ワイヤーアダプター: emit() API をコールすると、汎用アダプターがデータをオンデマンドで生成します。データ自体に関する追加情報は含まれません。
- Lightning データサービス (LDS) ワイヤーアダプター: LDS アダプターは Lightning データサービスの動作を模倣します。データのプロパティに関する情報が含まれます。
- Apex ワイヤーアダプター: Apex ワイヤーアダプターは Apex メソッドへのコールを模倣します。エラー状況が含まれます。
では、典型的な @wire
デコレーターを見てみましょう。指定したインポート構文を使用して、ワイヤーアダプターをインポートします。プロパティや関数を @wire
でデコレートして、ワイヤーアダプターを指定します。各ワイヤーアダプターがデータ型を定義します。
次のコードは、Account.Name 項目をインポートして、ワイヤーアダプターの設定オブジェクトで使用します。
詳しく見てみましょう。
- 8 行目は
@wire
デコレーターを使用して、インポート済みのgetRecord
メソッドにアクセスし、$recordId
リアクティブ変数を 1 つ目の引数として渡しています。2 つ目の引数は、3 行目のスキーマからインポートされたAccount.Name
への参照です。 - 9 行目は、ワイヤーサービスからデータのストリームを受信する非公開のプロパティまたは関数です。プロパティの場合は、結果がそのプロパティの data プロパティまたは error プロパティに返されます。関数の場合は、結果が data プロパティと error プロパティが指定されているオブジェクトで返されます。
では、各種のアダプターを見ていきましょう。
汎用ワイヤーアダプターの使用
最初に、CurrentPageReference を設定した @wire
サービスを使用します。
lightning-navigation サービスには、URL を生成したり、ページ参照に移動したりするためのワイヤーアダプターや関数が用意されています。ここでは CurrentPageReference
を使用して Salesforce の現在のページへの参照を取得し、そのテストを作成します。
- Visual Studio Code で、
lwc
フォルダーを右クリックし、[SFDX: Create Lightning Web Component (SFDX: Lightning Web コンポーネントの作成)] を選択します。 - 新しいコンポーネントの名前に
「wireCPR」
と入力します。 - Enter キーを押します。
- Enter キーを押して、デフォルトの
force-app/main/default/lwc
を受け入れます。 - 新しい
wireCPR/__tests__
フォルダーで、wireCPR.test.js
ファイルを開きます。 - 新しいファイルを次のコードで上書きします。
- ファイルを保存して、テストを実行します。
詳しく見てみましょう。
- 3 行目は、
CurrentPageReference
の新しいインポートです。 - 6 行目は、
PageReference
というモックデータを記載したファイルを取得します。このファイルはまだ作成していないため、テストでエラーが発生する 1 つ目の理由になります。 後でこのエラーを修正します。 - 26 行目で、
emit()
を使用してモックデータを入力します。 - 28 行目以降は、モックデータが
preElement
に更新されることを想定する Promise です。
では、テストデータファイルを作成して、テストに合格するようコードを更新しましょう。まず、__tests__
ディレクトリにモックデータファイルを保存するディレクトリを作成します。
__tests__
ディレクトリを右クリックし、[New Folder (新しいフォルダー)] を選択します。- 新しいディレクトリの名前に
「data」
と入力します。 - Enter キーを押します。
data
ディレクトリを右クリックし、[New File (新しいファイル)] を選択します。「CurrentPageReference.json」
と入力します。- Enter キーを押します。
- 新しいファイルに次の json コードブロックを入力します。
- ファイルを保存して、テストを実行します。
- テストで次のエラーメッセージを取得します。 できました! テストに失敗することで、コードを順に確認しながら問題をいち早く特定して処理を促進できます。
次は、HTML コードと JavaScript コードを追加します。
wireCPR.html
を開きます。- 次のコードを
template
タグの内側に追加します。 - ファイルを保存します。
wireCPR.js
を開いて、コードを次のコードに置換します。- ファイルを保存して、テストを実行します。
- このテストに合格します。
何が行われたのかを確認しましょう。@wire
アダプターが使用されている場合、サービスから返された情報が検索されます。そのデータのモックを作成し、実際にサービスをコールしてデータを取得する代わりにモックを使用する必要があります。モックがあれば、現時点で存在する項目のみがテストされ、範囲外の事項はテストされません。また、テストが迅速に実行されるようになります。
Lightning データサービスワイヤーアダプターの使用
次に、Lightning データサービス (LDS) に @wire
を使用します。LDS を使用すると、カスタムオブジェクトや標準オブジェクトにすばやくアクセスできます。コンポーネントは、LDS を使用して Salesforce からデータを取得し、表示します。LDS アダプターを使用してデータが期待どおりに表示されることを検証するテストを作成します。
- Visual Studio Code で新しい Lightning Web コンポーネントを作成します。
「wireLDS」
という名前を設定します。wireLDS.test.js
テストファイルのコードを次のコードで上書きします。- ファイルを保存して、テストを実行します。
- モックデータがないため、テストに失敗します (この後でモックデータを作成します)。
その前に、何が行われたのかをテストコードで確認しましょう。
- 3 行目は、
getRecord
の新しいインポートです。getRecord
は LDS API から取得されます。 - 6 行目で再び
data
ディレクトリのgetRecord.json
ファイルからデータをモックしています。 - 23 行目で、
mockGetRecord
を引数として設定したgetRecord
で emit メソッドを使用します。 - 25 行目以降は
Promise
戻り値で、ここではさまざまな要素がモックデータを使用して更新されていることを確認します。
次に、テストに合格するためにモックデータファイルと残りのファイルを作成します。ファイルを作成するたびにテストを実行し、合格するまでテストエラーの解消状況を確認します。
__tests__
ディレクトリにdata
ディレクトリを作成します。getRecord.json
という名前のテストデータファイルを作成します。- 次のコードを追加します。
- ファイルを保存して、テストを実行します。
- テストに失敗します。
wireLDS.html
を開き、テンプレートタグの内側に次のコードを入力します。- ファイルを保存して、テストを実行します。
- 今回もテストに失敗しますが、合格まであと一息です。データを取得する JavaScript コントローラーを追加するだけです。
wireLDS.js
を開き、そのすべてのコードを次のコードで上書きします。- ファイルを保存して、テストを実行します。
- このテストに合格します。
ところで、データの取得中にエラーが発生した場合はどうなるのでしょうか? この点もテストできます。では、wireLDS.test.js
テストファイルに新しい describe ブロックを追加しましょう。
- 'getRecord @wire data’ describe ブロックの直後に次のコードを追加して、'c-wire-l-d-s’ describe ブロック内に配置されるようにします。テストを明確にするために、describe ブロックをネストすることもできます。
- ファイルを保存して、テストを実行します。
getRecordAdapter
でerror()
メソッドを使用しているため、テストに合格します。この結果、モックデータにエラーが生じるため、account.error
が true になります。
Apex ワイヤーアダプターの使用
Apex の説明に進み、@wire
を使用してテストするにはどうすればよいかを確認します。
LWC がインポートする Apex クラスは外部接続と見なされるため、モックする必要があります。つまり、Apex クラスを作成しなくてもテストできるということです。ここですべきことは、Apex コールからの予想される応答をモックするだけです。この場合、期待されるのは Apex クラスから返される取引先が表示されることです。取引先が返された場合にはその取引先が表示され、返されない場合はメッセージが表示されることを期待するテストを作成します。
では、Apex コールを使用する LWC を作成しましょう。
- Visual Studio Code で新しい Lightning Web コンポーネントを作成します。
「wireApex」
という名前を設定します。wireApex.test.js
テストファイルのコードを次のコードで上書きします。- ファイルを保存して、テストを実行します。
- モックデータが見つからないというエラーが表示されます。
このコードの大部分は以前と同じです。このクリーンアップコードには、テストの前後にモックをリセットする jest.clearAllMocks()
という新しい項目があります。2 種類のテストに 2 つのモックファイルがあるため、この項目が必要になります。1 つ目のテストは、6 つの取引先を提示する Apex コールを探します。2 つ目のテストは、取引先が見つからない場合にどうなるかをアサートします。最後のテストは、Apex でエラーが発生した場合にどうなるかをアサートします。
では、モックデータファイルと残りのコードを追加しましょう。
__tests__
ディレクトリにdata
ディレクトリを作成します。- 新しい
data
ディレクトリにgetAccountList.json
とgetAccountListNoRecords.json
という名前の 2 つのファイルを作成します。 getAccountList.json
に次のコードを入力します。getAccountListNoRecords.json
ファイルに次の空白の JSON オブジェクトが挿入されます。- 次に、
wireApex.html
のtemplate
タグの内側に次のコードを入力します。 - 最後に
wireApex.js
のコードを次のコードに置換します。 ここでは、AccountController
Apex クラスからgetAccountList
メソッドを取得しているに過ぎません。LWC でこのメソッドを機能させるためには、@AuraEnabled(cacheable=true)
アノテーションを付加する必要があります。@wire
がこのアノテーションを使用して、返されたerror
またはdata
を関数に入力します。 - すべてのファイルを保存して、テストを実行します。
- このテストに合格します。
次の単元では、他のコンポーネントのモックに挑戦し、Jest を使用して Lightning Web コンポーネントをテストするあらゆる方法を習得します。
リソース
- 開発者ガイド: Lightning Web コンポーネント: ワイヤーサービスを使用したデータの取得
- 開発者ガイド: Lightning Web コンポーネント: lightning/ui*Api ワイヤーアダプターと関数
- 開発者ガイド: ワイヤーサービスを使用する Lightning Web コンポーネントの Jest テストの記述
- User Interface API Developer Guide (ユーザーインターフェース API 開発者ガイド): Get a Record (レコードの取得)
- Visual Studio Code 向け Salesforce 拡張機能: Lightning Web コンポーネント: テスト
- GitHub: salesforce/wire-service-jest-util
- GitHub: trailheadapps/lwc-recipes
- GitHub: wire-service-jest-util/docs/Migrating from version 2.x to 3.x