その他のコンポーネントのモック

学習の目的

この単元を完了すると、次のことができるようになります。

sfdx-lwc-jest パッケージに付属するスタブについて説明する。
Jest 設定を上書きする方法を理解する。
コンポーネントを開発環境外でテストする。
外部コンポーネントのスタブを作成する。

基本コンポーネントのモック

sfdx-lwc-jest パッケージを使用すれば、Lightning Web コンポーネントで Jest を実行できます。このパッケージによってテストを実行するために必要な Jest 設定が行われ、一切変更する必要がありません。以前のモジュールでも広く使用されています。このパッケージには、Lightning 名前空間のすべてのコンポーネントに対応する一連のスタブ (テストされるモジュールと連動するコンポーネントをシミュレートするプログラム) が含まれます。Lightning 基本コンポーネントもすべてこの対象です。これにより、Lightning 環境でなくてもテストを実行できます。スタブは node-modules/@salesforce/sfdx-lwc-jest ディレクトリの src/lightning-stubs ディレクトリにインストールされます。

test-lwc プロジェクトの lightning-stubs ディレクトリ

付属のデフォルトスタブを上書きする必要のあることがあります。その場合は、Jest 設定を上書きしてから、カスタムスタブを作成します。では、Lightning ボタンでこの操作を実行する手順を見ていきましょう。

最初に、Visual Studio Code でカスタムスタブのディレクトリを設定します。

force-app ディレクトリを右クリックし、[New Folder (新しいフォルダー)] を選択します。
新しいディレクトリの名前に「test」と入力します。
新しい test ディレクトリを右クリックし、[New Folder (新しいフォルダー)] を選択します。
新しいディレクトリの名前に「jest-mocks」と入力します。
新しい jest-mocks ディレクトリを右クリックし、[New Folder (新しいフォルダー)] を選択します。
新しいディレクトリの名前に「lightning」と入力します。

これが Lightning 基本コンポーネントのスタブのルートになります。

次に、Salesforce DX プロジェクトのルートにある jest.config.js というファイルを更新して、Jest 設定を上書きします。

jest.config.js ファイルを開きます。
...jestConfig, 行の後に次のコードブロックを入力します。
```
  moduleNameMapper: {
    '^lightning/button$': '<rootDir>/force-app/test/jest-mocks/lightning/button'
  },
```
moduleNameMapper に注意します。これは Jest に lightning-button のスタブがある場所を伝えるものです。最初のダッシュがスラッシュに変換され、残りのコンポーネント名がケバブケースからキャメルケースになります。スラッシュを使用する理由は、モジュールリゾルバーが 1 つ目のダッシュの前のすべてを名前空間として処理するためです。ここでは、<rootDir> が Salesforce DX ワークスペースのルートに対応付けられます。

ファイルは次のようになります。
```
const { jestConfig } = require('@salesforce/sfdx-lwc-jest/config');
  
module.exports = {
    ...jestConfig,
    moduleNameMapper: {
        '^lightning/button$': '/force-app/test/jest-mocks/lightning/button'
    },
    modulePathIgnorePatterns: ['/.localdevserver']
};
  
```
ファイルを保存します。

次は、button スタブを先ほど作成した lightning ディレクトリに追加しましょう。

先行の手順で作成した lightning ディレクトリを右クリックし、[New File (新しいファイル)] を選択します。
新しいファイルの名前に「button.html」と入力します。
新しいファイルに次のコードブロックを入力します。
```
<template></template>
```
ファイルを保存します。
lightning ディレクトリを右クリックし、[New File (新しいファイル)] を選択します。
新しいファイルの名前に「button.js」と入力します。

新しいファイルに次のコードブロックを入力します。

import { LightningElement, api } from 'lwc';
    
export default class Button extends LightningElement {
  @api disabled;
  @api iconName;
  @api iconPosition;
  @api label;
  @api name;
  @api type;
  @api value;
  @api variant;
}

ファイルを保存します。

この 2 つのファイルは、lightning-stubs フォルダーにある lightning-button ファイルのコピーです。必要に応じて、Jest テストの基本の lightning-button をこのコピーで上書きできます。

これで、sfdx-lwc-jest に付属するデフォルトスタブを上書きできるようになりました。では、コンポーネントが他の名前空間にある場合はどうなるのでしょうか? 数か所を調整するだけでこうしたケースにも対応できます。これらのコンポーネントについて見ていきましょう。