JEST | Debug with Google Chrome and/or VS Code

README.md

How to debug Jest tests with Chrome

Taken from Jest's troubleshooting page:

• Place a debugger; statement in any of your tests, and then, in your project's directory
• yarn test-debug
• open Chrome and go to chrome://inspect
• click on "Open Dedicated DevTools for Node"
• click on the address displayed in the terminal (usually something like localhost:9229)
• Chrome Developer Tools will be displayed, and a breakpoint will be set at the first line of the Jest CLI script
• Click the button that looks like a "play" button in the upper right hand side of the screen to continue execution
• When Jest executes the test that contains the debugger statement, execution will pause and you can examine the current scope and call stack.

When you are working with VS Code, you can simply open the debugger (with View: Show Debug) and execute the Debug Jest Tests script. This will launch the inspector (as described above) and allow advanced debugging without leaving VS Code.

The yarn test-debug script looks like this:

{
  "scripts": {
    "test-debug": "node --inspect-brk node_modules/.bin/jest --runInBand --detectOpenHandles"
  }
}

Screenshots

Open Chrome

Add the address

Result

launch.json

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