Lightning Web コンポーネントの Jest テストの実行

コンポーネントの開発時には、単体テストを頻繁または継続的に実行します。

Visual Studio Code 向け Salesforce 拡張機能をインストールすると、VS Code 内からテストを実行し、デバッグして、Jest ファイルを監視できます。詳細は、「Salesforce Extensions for VS Code (VS Code 向け Salesforce 拡張機能)」を参照してください。

プロジェクトのすべてのテストを実行するには、プロジェクトのルートフォルダから Salesforce CLI コマンド sf force lightning lwc test run を使用します。または、Jest と連動関係をインストールするときに、プロジェクトの package.json ファイルの scripts ブロックに追加したコマンドを実行します。

変更を保存するたびに 1 つのコンポーネントですべてのテストを実行するには、コンポーネントディレクトリに移動し、--watch パラメータを指定して sfdx-lwc-jest コマンドを実行します。Jest と連動関係をインストールするときに、プロジェクトの package.json ファイルの scripts ブロックに追加したエントリを使用します。

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

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

  • VS Code Salesforce Extension Pack
  • Chrome デベロッパーツール
  • VS Code デバッガの高度な設定

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

詳細は、「Lightning Web コンポーネント用の Jest テストのデバッグ」を参照してください。

sfdx-lwc-jest は、何も変更せずに Jest テストを実行するように設定されています。ただし、Jest の高度なユーザは他の設定オプションを使用することができます。「github.com/salesforce/sfdx-lwc-jest#overriding-jest-config」を参照してください。

Jest テストの実行が遅く、別のフォルダからの連動関係がある場合は、解決策をスピードアップするための対応付けを提供します。lwc-recipes リポジトリmoduleNameMapper を参照してください。

関連トピック