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

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

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

1. 起動設定ファイルを生成します。

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

      

   2. 表示されるドロップダウンで、独自の launch.json ファイルを作成する Node.js を選択します。launch.json のコンテンツを、sfdx-lwc-jest リポジトリの「Debugging in Visual Studio Code (Visual Studio Code でのデバッグ)」に示されている設定に置き換えます。

      The configuration is different for Mac and Windows users. Follow the directions in the sfdx-lwc-jest repository to find the configuration for your operating system.

      To customize your launch configuration for different debuggers and debugging scenarios, use VS Code's launch.json attributes.

2. Salesforce DX プロジェクトのルートに Jest 設定ファイル jest.config.js を追加します。このファイルに、sfdx-lwc-jest リポジトリの「Overriding Jest Config (Jest 設定の上書き)」に記載されている設定コードを含めます。設定コードは次のようになります。

3. テストコードとコンポーネントの JavaScript ファイルに debugger ステートメントを追加します。

   When debugging using the advanced configuration in VS Code, adding breakpoints isn't supported. The line number to which you add a breakpoint doesn’t match the line number in the compiled file. Use the debugger statement instead.

4. 設定ファイルを起動します。[Run (実行)] ビューに移動します。[Debug Jest Tests (Jest テストをデバッグ)] を選択し、[Start Debugging (デバッグを開始)] () をクリックします。

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