Jest テストのフレームワークの設定

学習の目的

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

Jest テストフレームワークについて説明する。
Node.js と npm の役割を説明する。
Node.js と npm をインストールする。
Salesforce DX プロジェクトに @salesforce/sfdx-lwc-jest JavaScript モジュールをインストールする。

始める前に

このモジュールを受講するためには、Salesforce CLI、Visual Studio Code、Visual Studio Code 向け Salesforce 拡張機能がインストールされ、更新されている必要があります。これらの前提条件を満たすために、「クイックスタート: Salesforce DX」、「クイックスタート: Salesforce 開発のための Visual Studio Code」、「クイックスタート: Lightning Web コンポーネント」プロジェクトを修了したうえで受講することをお勧めします。

ここでは、テスト主導型開発 (TDD) アプローチを使用し、テストするコンポーネントを記述する前に Jest テストを記述します。そのため各テストは最初失敗しますが、その後で、Jest テストに合格するようにコンポーネントを更新します。

Salesforce DX プロジェクトの作成

テストに取りかかる前の最初のステップは、Lightning Web コンポーネントと Jest テストを保存するための Salesforce DX プロジェクトを作成することです。

Visual Studio Code で、Ctrl+Shift+P (Windows) または Cmd+Shift+P (macOS) を押して、コマンドパレットを開きます。
「sfdx」と入力します。
[SFDX: Create Project (SFDX: プロジェクトの作成)] を選択します。このオプションが表示されない場合は、先に進む前にこのモジュールの 1 つ目の単元の前提条件を満たしてください。
[Standard (標準)] を選択します。
プロジェクト名に「test-lwc」と入力します。
Enter キーを押します。
プロジェクトを保存するフォルダーを選択します。
[Create Project (プロジェクトの作成)] をクリックして、Visual Studio Code の新しいウィンドウが開くまで待機します。
[View (表示)] をクリックして、[Terminal (ターミナル)] を選択します。Visual Studio Code 内にターミナルウィンドウが開きます。このターミナルはデフォルトでプロジェクトの最上位ディレクトリに設定されます。後々このプロジェクトの作業ディレクトリでコマンドを実行するためにターミナルが必要になります。

Node.js と npm とは?

Node.js は Chrome の V8 JavaScript エンジン上に構築された JavaScript ランタイムで、npm は再利用可能なコードモジュールを配信するパッケージマネージャーです。Node.js と npm の世界では、こうした再利用可能なコードモジュールを Node モジュールといいます。Node モジュール (複数のプロジェクトに簡単に配信できる再利用可能なコード) に近い Salesforce 用語は、ロック解除済みパッケージです。

Node.js と npm は、昨今の JavaScript 開発者の多くが習得している人気のツールです。最新の JavaScript についての詳細は、「JavaScript の操作方法」トレイルを参照してください。

Node.js と npm のインストール

Jest は Node モジュールであるため、使用するためには Node と npm をインストールする必要があります。ではやってみましょう。

https://nodejs.org/en/download/ から Node.js をインストールします。LTS (長期サポート) バージョンを使用することをお勧めします。
Node.js がインストールされたことを確認します。先ほど開いた Visual Studio Code のターミナルに次のコマンドを入力します。
```
node --version
```
v16.13.0 以降のバージョンの出力が表示されます。
Node.js をインストールすると、npm も自動的にインストールされます。
ターミナルで次のコマンドを入力します。
```
npm --version
```
8.1.0 以降のバージョンの出力が表示されます。npm を更新することをお勧めします。

npm を更新する必要がある場合は、npmjs ドキュメントで各種のオペレーティングシステムに応じた npm のアップグレードに関する詳細を確認してください。

Jest とは?

Jest は JavaScript テストを記述する豊富な機能を備えた強力なツールです。Jest はコードカバー率情報を収集でき、複雑な連動関係からテストを切り離すためのモックをサポートしています。Jest テストはブラウザーで実行されることも、組織に接続されることもないため、迅速に処理されます。どの Lightning Web コンポーネントも、Jest を使用して単体テストを記述します。Lightning Web コンポーネントに Jest テストを実行するには、Salesforce DX プロジェクトに @salesforce/sfdx-lwc-jest Node モジュールが必要です。

Jest テストは Salesforce DX プロジェクトの Lightning Web コンポーネントに対してのみ機能し、Aura コンポーネントには機能しません。Aura コンポーネントについては、「Lightning Testing Service を使用したコンポーネントのテスト」を参照してください。

sfdx-lwc-jest Node モジュールのインストール

@salesforce/sfdx-lwc-jest Node モジュールでは、Lightning Web コンポーネントの Jest テストを記述して実行し、デバッグすることができます。Salesforce CLI を使用すると、Jest とその連動関係をプロジェクトに簡単にインストールできます。

コマンドラインから次のコマンドを実行して、CLI が適切にインストールされていて最新バージョンであることを確認します。
```
sf update
```
cli: Updating CLI... のような出力が返されます。
Visual Studio Code ターミナルの Salesforce DX プロジェクトの最上位ディレクトリで、次のコマンドを実行します。
```
sf force lightning lwc test setup
```
このコマンドは npm と @salesforce/sfdx-lwc-jest をプロジェクトにインストールします。次のような結果になります:

「No matching version found for prettier-plugin-apex@^1.10.1 (prettier-plugin-apex@^1.10.1 に一致するバージョンが見つかりません)」というエラーが表示された場合は、package.json ファイルの devDependencies pretier-plugin-apex を ^1.10.0 に更新してください。

このプロセスで一定の脆弱性が検出される可能性がありますが、ここでは関係ありません。ここに表示される脆弱性は、このモジュールで求めているものではありません。

Jest Node モジュールをインストールする他の方法として、Salesforce では @salesforce/sfdx-lwc-jest Node モジュールを、npm (https://www.npmjs.com/package/@salesforce/sfdx-lwc-jest) で JavaScript パッケージとして、さらに GitHub (https://github.com/salesforce/sfdx-lwc-jest) でオープンソースプロジェクトとして公開しています。
Salesforce DX プロジェクトの最上位ディレクトリで、次のコマンドを実行します。
npm install
さらに次を実行します。
npm install @salesforce/sfdx-lwc-jest --save-dev

Jest テストの実行

ここまで順調に Salesforce DX プロジェクトを設定し、このモジュールの後半で記述する Jest テストを実行できるようになりました。これですべて設定されたため、Jest テストを数通りの方法で実行できます。たとえば、スクリプトを直接コールする、npm コマンドを使用する、Visual Studio Code のクリック操作を使用するなどの方法があります。また、1 つのテストを実行することも、ファイルやプロジェクトのすべてのテストを実行することも可能です。さらには、テストがカバーするコードが変更されたときに自動的にテストを実行することもできます。

では、Jest テストを実行するさまざまな方法を見ていきましょう。

sfdx-lwc-jest Node コマンド

次の Node コマンドを使用すると、スクリプトがインストールされているプロジェクト内の場所から直接スクリプトを実行できます。

Visual Studio Code ターミナルで、Salesforce DX プロジェクトの最上位ディレクトリに次のコマンドを入力します。
```
node node_modules/@salesforce/sfdx-lwc-jest/bin/sfdx-lwc-jest
```
まだ Jest テストが存在しないため、No tests found, exiting with code 1 (テストが見つかりません。コード 1 で終了します) のような出力が表示されます。
「Invalid sourceApiVersion」(無効な sourceApiVersion) エラーが発生する場合は、最新の Salesforce リリースで VS Code 拡張機能が更新されたことが原因です。
error Invalid sourceApiVersion found in sfdx-project.json. Expected 51.0, found 52.0

Visual Studio Code の最上位ディレクトリで sfdx-project.json を開きます。

「sourceApiVersion」が含まれているコード行を、受信したエラーメッセージに記載されている想定されるバージョンに変更します。
"sourceApiVersion": "51.0"

ファイルを保存します。

好調な滑り出しですが、ここで自動化を使用するとさらに便利になることを見てみましょう。

Package.json と npm を使用したテストスクリプトの自動化

単体テストを設定する目的は、開発や継続的インテグレーションプロセスの中で、開発者が単体テストを記述し実行しやすくすることで、その結果バグが早い段階で特定され、修正されることになります。上記のような長いコマンドを記憶して何度も入力しなければならないのであれば、その目的に反します。ここで役に立つのが自動化です。

npm は柔軟で優れたスクリプト自動化機能を標準装備しています。先ほど install を実行した際に、プロジェクトのルートにある package.json ファイルの scripts プロパティに一連のオプションが追加されています。

{
  "name": "test-lwc",
  ...  "scripts": {
    ...
    "test:unit": "sfdx-lwc-jest",
    "test:unit:watch": "sfdx-lwc-jest --watch",
    "test:unit:debug": "sfdx-lwc-jest --debug",
    "test:unit:coverage": "sfdx-lwc-jest --coverage",
    ...
  },
  ...}

プロジェクトのすべてのテストを実行する場合は、プロジェクトのベースディレクトリからこの npm コマンドを実行します。

npm run test:unit

特定のディレクトリのテストを実行する場合は、特定のディレクトリで上記のコマンドを実行すると、そのディレクトリのテストのみが実行されます。この場合は、テストする対象を切り離すことができます。

開発中の継続的なテストの実行

このオプションでは、Node は Git がコードを「監視」することを前提としています。このオプションを使用するには、プロジェクト用に必ず Git を初期化してください。変更を保存するたびに 1 つのコンポーネントのすべてのテストを実行するには、ディレクトリをコンポーネントディレクトリに変更し、--watch パラメーターを指定した sfdx-lwc-jest を使用する次の npm コマンドを実行します。前述のとおり、プロジェクトのベースからこのコマンドを実行し、変更が行われるたびにプロジェクトのすべてのテストを実行することも可能です。

npm run test:unit:watch

Jest はすべてのコンポーネントファイルの更新を監視し、変更を検出するたびに関連するすべてのテストを実行します。

Jest デバッグモードでのテストの実行

デバッグモードでの Jest テストの実行は、テストとアプリケーションコードをステップごとに実行して、テストまたはコードが期待どおりに動作しない理由を確認する場合に役立ちます。次のツールを使用して、Jest テストをデバッグできます。

Visual Studio Code Salesforce 拡張機能パック
Chrome デベロッパーツール
Visual Studio Code デバッガーの高度な設定

Visual Studio Code Salesforce Extension Pack は、最もシンプルかつ簡単なオプションが提供され、Chrome DevTools は経験豊富な Web 開発者を対象としています。さらに、VS Code デバッガーの高度な設定は、さまざまなデバッガーやデバッグシナリオで使用できます。高度な設定では、Jest テストをデバッグするための最も柔軟なオプションが提供されます。

詳細については、「Lightning Web コンポーネント用の Jest テストのデバッグ」を参照してください。または、Jest の問題のトラブルシューティングについては、「Jest: トラブルシューティング」を参照してください。

テストの実行とコードカバー率の表示

テストのコードカバー率を確認するには、--coverage オプションを次のように使用します。

npm run test:unit:coverage

Visual Studio Code のクリック操作によるテストの実行

Salesforce Visual Studio Code の拡張機能によって Jest テストの実行に対するコントロールやビジュアルフィードバックが強化されます。また、1 つのテスト、複数のテスト、あるいはすべてのテストを実行することを選択できます。さらに、Git が Visual Studio Code に事前インストールされているため、ファイルで --watch オプションを使用できるようになります。

ビーカーアイコンをクリックすると、テストサイドバーが開きます。このアイコンが表示されない場合、新しい SFDX プロジェクトを作成しなければならないことがあります。テストサイドバーに、プロジェクトの Jest テストを表示する [LWC Tests (LWC テスト)] セクションがあります。テストサイドバーに各自のプロジェクトのテストが次のように表示されます。

test-lwc プロジェクトのテストサイドバーの [LWC Tests (LWC テスト)]。

再生ボタンをクリックすると、プロジェクトの 1 つのテストまたは複数のテストが実行されます。ディレクトリまたは個々のテストにマウスポインターを置くと、再生ボタンが表示されます。テストが実行されると、ターミナルに結果が表示されます。サイドバーにも結果が色分けして示されます。緑は合格を意味します。青はテストが実行されていないことを示し、オレンジはテストがスキップされたこと、赤はテストに失敗したことを示します。サイドバーのテストをクリックするとファイルが開き、そのテストに直接移動します。