React Native ExpoとJestとVS Codeの組み合わせでテストをデバッグ 全体/ファイル単位

React Native ExpoとJestとVS Codeの組み合わせでテストをデバッグするときのlaunch.jsonの設定です。

テストがうまくいかないときにテストをデバッグしたい時があります。

そんな時全体のテストのデバッグと、一つのファイルのみをデバッグするときのlaunch.jsonの設定です。

Windows 10 Home
React Native Expo SDK 39
Expo CLI 3.28.2
Jest 26.6

Jestの公式リファレンスはこちらから

jestjs.io

launch.jsonファイルがまだない場合は、VS Code左側の[デバッグ]ビューから作成してください。

公式リファレンスに従い、launch.jsonを下記内容にすれば[Debug Tests]でテスト全体の実行とデバッグができるようになります。
WindowsやExpo以外の場合は内容が変わるので、上記公式リファレンスを見てください。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Tests",
      "type": "node",
      "request": "launch",
      "runtimeArgs": [
        "--inspect-brk",
        "${workspaceRoot}/node_modules/jest/bin/jest.js",
        "--runInBand"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "port": 9229
    }
  ]
}

また、内容付け加えて下記のようにすれば[Debug Current Test File]で現在開いているテストファイルのみを実行してデバッグできます。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Tests",
      "type": "node",
      "request": "launch",
      "runtimeArgs": [
        "--inspect-brk",
        "${workspaceRoot}/node_modules/jest/bin/jest.js",
        "--runInBand"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "port": 9229
    },
    {
      "name": "Debug Current Test File",
      "type": "node",
      "request": "launch",
      "runtimeArgs": [
        "--inspect-brk",
        "${workspaceRoot}/node_modules/jest/bin/jest.js",
        "--runInBand"
      ],
      "args": [
        "${fileBasename}"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "port": 9229
    }
  ]
}

${fileBasename}VS Codeにより現在開いているファイル名に置き換えられます。
詳しくは下記公式ページを見てください。

Visual Studio Code Variables Reference