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

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

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

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

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

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

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

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

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

   VS Code の高度な設定を使用してデバッグする場合、ブレークポイントの追加はサポートされていません。ブレークポイントを追加する行番号は、コンパイルされたファイルの行番号と一致しません。代わりに debugger ステートメントを使用してください。

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

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