進行状況の追跡を始めよう
Trailhead のホーム
Trailhead のホーム

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 コンポーネント」プロジェクトを修了したうえで受講することをお勧めします。

Salesforce DX プロジェクトの作成

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

  1. Visual Studio Code で、Ctrl+Shift+P (Windows) または Cmd+Shift+P (macOS) を押して、コマンドパレットを開きます。
  2. 「sfdx」と入力します。
  3. [SFDX: Create Project (SFDX: プロジェクトの作成)] を選択します。このオプションが表示されない場合は、先に進む前にこのモジュールの 1 つ目の単元の前提条件を満たしてください。
  4. [Standard (標準)] を選択します。
  5. プロジェクト名に「test-lwc」と入力します。
  6. Enter キーを押します。
  7. プロジェクトを保存するフォルダを選択します。
  8. [Create Project (プロジェクトの作成)] をクリックして、Visual Studio Code の新しいウィンドウが開くまで待機します。
  9. [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 をインストールする必要があります。さっそく実行しましょう。

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

    メモ

    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 とその連動関係をプロジェクトに簡単にインストールできます。

  1. Visual Studio Code ターミナルの Salesforce DX プロジェクトの最上位ディレクトリで、次のコマンドを実行します。
    sfdx force:lightning:lwc:test:setup
    このコマンドは npm と @salesforce/sfdx-lwc-jest をプロジェクトにインストールします。次のような結果が表示されます。
    ターミナルの設定メッセージ。
    このプロセスで一定の脆弱性が検出される可能性がありますが、ここでは関係ありません。ここに表示される脆弱性は、このモジュールで求めているものではありません。
メモ

メモ

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

  1. 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 で終了します) のような出力が表示されます。

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

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

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

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

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

npm run test:unit:watch

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

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

プロジェクトの Jest テストをデバッグモードで実行するには、--debug パラメータを指定した sfdx-lwc-jest を使用して次の npm コマンドを実行します。 

npm run test:unit:debug

Jest の問題のトラブルシューティングについては、「Jest: Troubleshooting (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 つのテストまたは複数のテストが実行されます。ディレクトリまたは個々のテストにマウスポインタを置くと、再生ボタンが表示されます。テストが実行されると、ターミナルに結果が表示されます。サイドバーにも結果が色分けして示されます。緑は合格を意味します。青はテストが実行されていないことを示し、オレンジはテストがスキップされたこと、赤はテストに失敗したことを示します。サイドバーのテストをクリックするとファイルが開き、そのテストに直接移動します。

更新アイコン テスト更新ボタンアイコン。 をクリックすると、テスト結果がクリアされます。

テストファイルビューにも直接コントロールがあります。

Visual Studio Code のテストファイルビュー。

メインのツールバーの再生ボタン テスト再生ボタンアイコン。 をクリックすると、ファイルのすべてのテストが実行されます。特定のテストを実行する場合は、ファイルの各テストの上にある [Run Test (テストの実行)] をクリックします。

変更を保存するたびにファイルのすべてのテストを実行するには、メインのツールバーのウォッチアイコン テストウォッチボタンアイコン。 をクリックします。このアイコンはファイルのテストを作業中に使用すると便利なオプションです。

たくさんの情報を習得しました。 

次は、実際にテストをいくつか記述してみましょう。

リソース