Jest テストパターンとモックの連動関係

Jest でテストしている間は、次のパターンと実践に従って動作を分離し、単体テストの効率を最大化します。

プロパティ変更のテスト

簡単なプロパティ変更を見てみましょう。プロパティ変更後のコンポーネントの表示は非同期なので、DOM に何かが追加される順序は、いつも予測どおりとは限りません。テストは、期待される動作を確認する前に、値の変更が DOM に反映されるまで待機することをお勧めします。Promise.resolve() ステートメントを使用して、ページ要素が変更された後に値を確認する手法を次に示します。

コンポーネントを DOM に追加する。
プロパティ値を変更する。
Promise.resolve() 値を返して、コンポーネントが表示されるのを待機する。

1it("Renders with Hello Matt", () => {
2  const element = createElement("c-hello-component", {
3    is: HelloComponent,
4  });
5  document.body.appendChild(element);
6
7  element.person = "Matt";
8
9  return Promise.resolve().then(() => {
10    const pTag = element.shadowRoot.querySelector("p");
11    expect(pTag.textContent).toEqual("Hello, Matt!");
12  });
13});

詳細は、Vlocity の Matt Goldspink 氏によるブログ投稿「Testing Lightning Web Components (Lightning Web コンポーネントのテスト)」を参照してください。

Tip

属性を使用したコンポーネントのテスト

先ほどの例を発展させて、属性を追加してみましょう。属性を使えば、テストである値を変更して、その変更がどのようにレンダリングされるかを確認できます。Object.assign() ステートメントを使用して、次のように appendChild のコールの前に属性を設定します。

1Object.assign(element, attributes);
2document.body.appendChild(element);

たとえば、次のコードでは、最初のテストの背景色を赤に設定しています。

1it("Renders with Hello Matt", () => {
2  const element = createElement("c-hello-component", {
3    is: HelloComponent,
4  });
5  Object.assign(component, { backgroundColor: "red" });
6  document.body.appendChild(element);
7
8  element.person = "Matt";
9
10  return Promise.resolve().then(() => {
11    const pTag = element.shadowRoot.querySelector("p");
12    expect(pTag.textContent).toEqual("Hello, Matt!");
13  });
14});

モッキング

単体テストは、単純な UI 要素を更新するだけでは恐らく十分ではありません。コードによっては、インポートされたモジュール、Lightning 基本コンポーネント、イベントハンドラなど、特定の連動関係の動作に依存するものがあります。ただし、コードには、サーバへのコール、データベース要求、またはリモートアクセス API の不確定な動作やタイミングの影響を受けない一貫した環境が必要です。以下のセクションでは、単体テストでのこれらの連動関係のモッキング動作について説明します。モッキングは、テストするコードの動作を切り離す一般的なテスト方法です。

Lightning 基本コンポーネント

sfdx-lwc-jest リポジトリには Salesforce が提供するモックコンポーネントがあります。コンポーネントのソースは lightning-stubs ディレクトリにあります。Lightning 基本コンポーネントを含む、これらのモックコンポーネントをテストに使用します。モックコンポーネントは実際のコンポーネントの API と一致しますが、すべての機能を備えているわけではなく、テスト用のリソースとして機能します。これらのモックコンポーネントによってイベントが起動されることはありませんが、それらのイベントハンドラを呼びだすことができます。

たとえば、lwc-recipes リポジトリにある miscToastNotification.js の例を見てみましょう。ユーザ入力をシミュレーションするために、inputTitleEl 定数は sfdx-lwc-jest で提供されるモック <lightning-input> 要素を参照します。また DOM でこの要素を照会してイベントをディスパッチし、この要素に結び付けた change ハンドラを呼び出すこともできます。通知の動作をテストするだけなので、モックコンポーネントを使用して入力値の制御を維持します。

1// Select input field for simulating user input
2const inputMessageEl = element.shadowRoot.querySelector('lightning-input[data-id="messageInput"]');
3inputMessageEl.value = TOAST_MESSAGE;
4inputMessageEl.dispatchEvent(new CustomEvent("change"));

モックコンポーネントを使用するときには、次の点に留意してください。

テストが、スロットが表示される順序に依存しないようにすることをお勧めします。たとえば、actions と todos という名前の 2 つのスロットがあるとします。期待どおりのコンテンツがある場合は、モック (または実際の) コンポーネントでこれらのスロットが表示される順序が入れ替わったとしても、テストは合格します。
Lightning 基本コンポーネントには、DOM では属性として反映されないプロパティがいくつかあります。たとえば、<lightning-button> ではプロパティ iconPosition を設定できます。これは、ボタンに使用する SLDS クラスを判断するために使用され、表示される値ではありません。すべてのプロパティが属性として反映されるものと思い込まず、この動作を考慮に入れたテストケースを設計してください。
これらのモックコンポーネントからイベントは起動されませんが、これらに対して dispatchEvent() をコールできます。

イベントハンドラ

同じ miscToastNotification.js の例を見ると、モックイベントハンドラもあることがわかります。このテストではまずいくつかの定数値を定義し、次に ShowToastEventName イベントによって jest.fn() がトリガされ、lightning-input 要素に定数が挿入されます。

1const TOAST_TITLE = "The Title";
2const TOAST_MESSAGE = "The Message";
3const TOAST_VARIANT = "warning";
4
5// Create initial element
6const element = createElement("c-misc-toast-notification", {
7  is: MiscToastNotification,
8});
9document.body.appendChild(element);
10
11// Mock handler for toast event
12const handler = jest.fn();
13// Add event listener to catch toast event
14element.addEventListener(ShowToastEventName, handler);

テストの最後に、イベントハンドラが期待どおりにコールされ、正しいパラメータが使用されていることを確認します。

1return Promise.resolve().then(() => {
2  // Check if toast event has been fired
3  expect(handler).toHaveBeenCalled();
4  expect(handler.mock.calls[0][0].detail.title).toBe(TOAST_TITLE);
5  expect(handler.mock.calls[0][0].detail.message).toBe(TOAST_MESSAGE);
6  expect(handler.mock.calls[0][0].detail.variant).toBe(TOAST_VARIANT);
7});

モジュールのインポート

コンポーネントの動作をより詳細に制御するためにモックコンポーネントへの参照を作成するには、jest.config.js ファイルに moduleNameMapper 設定を追加します。例として、lwc-recipes リポジトリにある jest.config.js では、次のようにモックコンポーネントがモジュール名で参照されています。

1const { jestConfig } = require("@salesforce/sfdx-lwc-jest/config");
2module.exports = {
3  ...jestConfig,
4  moduleNameMapper: {
5    "^@salesforce/apex$": "<rootDir>/force-app/test/jest-mocks/apex",
6    "^lightning/navigation$": "<rootDir>/force-app/test/jest-mocks/lightning/navigation",
7    "^lightning/platformShowToastEvent$":
8      "<rootDir>/force-app/test/jest-mocks/lightning/platformShowToastEvent",
9    "^lightning/uiRecordApi$": "<rootDir>/force-app/test/jest-mocks/lightning/uiRecordApi",
10  },
11};

では、この設定が lwc-recipes リポジトリの miscToastNotification.test.js でどのように使用されているのかを見てみましょう。import ステートメントがあります。

1import { ShowToastEventName } from "lightning/platformShowToastEvent";

moduleNameMapper エントリがない場合、この import ステートメントはスタブ https://github.com/salesforce/sfdx-lwc-jest/blob/master/src/lightning-stubs/platformShowToastEvent/platformShowToastEvent.js に解決されます。

moduleNameMapper エントリがある場合、この import ステートメントは jest-mocks カスタムスタブ https://github.com/trailheadapps/lwc-recipes/blob/master/force-app/test/jest-mocks/lightning/platformShowToastEvent.js に解決されます。モックスタブには、他のプロパティをイベントオブジェクトに追加するカスタムロジックがあります。

デフォルトの jest.config.js ファイルをカスタム setupFilesAfterEnv オプションで上書きする場合は、その値を @salesforce/sfdx-lwc-jest/config で定義されている値とマージします。

Note

@salesforce 範囲指定インポート

テスト環境では、コンポーネントが本番スキーマにアクセスできない可能性があります。名前空間への参照をインポートする場合、テスト中は戻り値をプレースホルダとしてモックします。

Jest テストでは、jest-transformer を使用して @salesforce/label インポートステートメントを変数宣言に変換します。値は label パスに設定されます。デフォルトで、myImport には c.specialLabel の文字列値が割り当てられます。jest.mock() を使用して、インポートに独自の値を指定できます。次の例では、c.specialLabel の代わりに文字列 value set in test が返されます。

1import myImport from "@salesforce/label/c.specialLabel";
2
3jest.mock(
4  "@salesforce/label/c.specialLabel",
5  () => {
6    return { default: "value set in test" };
7  },
8  { virtual: true },
9);

その他の例

lwc-recipes リポジトリの lwc ディレクトリを参照してください。多数のレシピに、コメント付きの jest テストを含む __tests__ ディレクトリがあります。

関連トピック

ワイヤサービスを使用する Lightning Web コンポーネントの Jest テストの記述

The Japanese Summer '24 guide is now live

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