デバッグテスト

Jest テスト用のデバッガーを設定する方法はいくつかあります。Chrome と Visual Studio Code でのデバッグについて説明します。

Chrome でのテストのデバッグ

プロジェクトの package.json の scripts セクションに次を追加します

"scripts": {
    "test:debug": "react-scripts --inspect-brk test --runInBand --no-cache"
  }

任意のテストに debugger; ステートメントを配置して実行します

$ npm run test:debug

Jest テストの実行が開始されますが、デバッガーがプロセスにアタッチできるように、実行前に一時停止します。

Chrome で以下を開きます

about:inspect

そのリンクを開くと、Chrome DevTools が表示されます。プロセスで inspect を選択すると、React スクリプトの最初の行にブレークポイントが設定されます（これは開発者ツールを開き、Jest がそれを行う前に実行する時間を確保するために行われます）。画面右上にある「再生」ボタンのようなボタンをクリックして、実行を続行します。Jest がデバッガー ステートメントを含むテストを実行すると、実行が一時停止され、現在のスコープとコールスタックを確認できます。

注: --runInBand cli オプションにより、個々のテスト用のプロセスを生成するのではなく、Jest がテストを同じプロセスで実行します。通常、Jest は処理を超えてテストの実行を並列化しますが、一度に多くの処理をデバッグすることは困難です。

Visual Studio Code でのテストのデバッグ

Jest テストのデバッグは、Visual Studio Code ではすぐにサポートされています。

次の launch.json 構成ファイルを使用します

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug CRA Tests",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
      "args": ["test", "--runInBand", "--no-cache", "--watchAll=false"],
      "cwd": "${workspaceRoot}",
      "protocol": "inspector",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "env": { "CI": "true" },
      "disableOptimisticBPs": true
    }
  ]
}