VS Code の高度な設定を使用した Jest テストのデバッグ

VS Code では、デバッグモードで Jest テストを実行する方法を設定できます。

高度な設定を使用する手順は、次のとおりです。

起動設定ファイルを生成します。
1. [Run (実行)] ビューで、[create a launch.json file (launch.json ファイルの作成)] リンクをクリックします。

[Run and Debug (実行とデバッグ)] タブから launch.json ファイルを生成

12. 表示されるドロップダウンで、独自の `launch.json` ファイルを作成する **Node.js** を選択します。`launch.json` のコンテンツを、sfdx-lwc-jest リポジトリの[「Debugging in Visual Studio Code (Visual Studio Code でのデバッグ)」](https://github.com/salesforce/sfdx-lwc-jest#debugging-in-visual-studio-code)に示されている設定に置き換えます。
2
3    :::note

この設定は、Mac ユーザと Windows ユーザで異なります。sfdx-lwc-jest リポジトリの指示に従って、各自のオペレーティングシステムの設定を見つけます。

さまざまなデバッガやデバッグシナリオに合わせて起動設定をカスタマイズするには、VS Code の launch.json 属性を使用します。

1:::

Salesforce DX プロジェクトのルートに Jest 設定ファイル jest.config.js を追加します。このファイルに、sfdx-lwc-jest リポジトリの「Overriding Jest Config (Jest 設定の上書き)」に記載されている設定コードを含めます。設定コードは次のようになります。
1const { jestConfig } = require("@salesforce/sfdx-lwc-jest/config"); 2module.exports = { 3 ...jestConfig, 4 // add any custom configurations here 5};
テストコードとコンポーネントの JavaScript ファイルに debugger ステートメントを追加します。

VS Code の高度な設定を使用してデバッグする場合、ブレークポイントの追加はサポートされていません。ブレークポイントを追加する行番号は、コンパイルされたファイルの行番号と一致しません。代わりに debugger ステートメントを使用してください。
Note
設定ファイルを起動します。[Run (実行)] ビューに移動します。[Debug Jest Tests (Jest テストをデバッグ)] を選択し、[Start Debugging (デバッグを開始)] () をクリックします。

このコマンドは、デフォルトでプロジェクト内のすべてのテストを実行し、テストコードとコンポーネントの JavaScript ファイルに追加したすべての debugger ステートメントで停止します。VS Code ターミナルで実行出力を表示し、デバッグコンソールを使用した変数の検査などの VS Code のデバッグ機能を使用できます。

VS Code デバッガの高度な設定使用した Jest テストのデバッグ

Jest に関する問題のトラブルシューティングについては、jestjs.io/docs/en/troubleshooting を参照してください。

Tip

The Japanese Summer '24 guide is now live

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