VS Code: Debugging with Jest

configure.md

VS Code: Debugging Jest

Sometimes, debugging with console.log is not enough to find out what is happening in the code, as console.log prints only plain objects but neither functions nor objects with circular references. Besides, it's possible you may need to know the context and flow of the code.

Read more about debugging with VS Code in VS Code: Debugging.

Getting started

The VS Code editor has built-in debugging support for the Node.js runtime and can debug any language transpiled into JavaScript. To configure the debugger, open the launch.json file located in your workspace's .vscode folder and add the following:

{
  "version": "1.0.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Jest: current file",
      //"env": { "NODE_ENV": "test" },
      "program": "${workspaceFolder}/node_modules/.bin/jest",
      "args": ["${fileBasenameNoExtension}", "--config", "jest.config.js"],
      "console": "integratedTerminal",
      "disableOptimisticBPs": true,
      "windows": {
        "program": "${workspaceFolder}/node_modules/jest/bin/jest"
      }
    }
  ]
}

Read more details about Debugging in VS Code and Node.js debugging in VS Code.

Start debugging

1. Open the unit test file you want to debug.
2. Set breakpoints or the debugger statement where you want to stop.
3. Press Ctrl + Shift + D, or click on the Debug icon in the left panel.
4. Select DEBUG ‣ Jest: current file option in the top panel.
5. Press F5 to start debugging.

See more recipes debugging Jest in vscode-recipes/debugging-jest-tests.

Another way to debug

As Jest is running under a Node environment, we can use its built-in debugger to inspect our code. So we can open a process to run Jest and allow an external debugger can connect to:

node --inspect-brk <node-args> <jest-cli-path> <jest-args>

If you have installed jest-cli in package.json, the command to run can be as follow:

node --nolazy --inspect-brk ./node_modules/jest-cli/bin/jest.js --runInBand --colors --verbose <path/to/file>

Or if you have installed jest, just change the path of the Jest executable:

node --nolazy --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --colors --verbose <path/to/file>

See more details about the arguments used in the previous command: cli options.

Jest with Chrome debugger

We can register in package.json the previous command so that we can run Jest debugger as a npm script:

"jest:debug": "node --nolazy --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --colors --verbose"

To debug in Google Chrome (or any Chromium-based browser), simply open your browser and follow the instructions below:

1. Place the debugger statement in any of your test files.
2. Run the command: npm run jest:debug path/to/file
3. Type chrome://inspect on any Chromium-based browser.
   • Click on Open Dedicated DevTools for Node...
   • Or select one of the Remote Target options you can connect to.

You should see the Chrome DevTools start, and that code execution is paused at the start of the executable jest.js, so you should click on ‣ Resume script execution button (looks like a "play").

Read more details about Jest Troubleshooting.

node-jest-cli.md

CLI Arguments

Node:

• --nolazy force Node’s V8 engine to compile your code ahead of time, so that breakpoints work correctly.
• --inspect-brk enable Node’s inspector agent which will allow you to connect a debugger.

Jest:

• --runInBand run test in the same process. Normally Jest parallelizes test runs across processes but it is hard to debug many processes at the same time.
• --verbose display individual test results with the test suite hierarchy.

I'm getting this error in vscode, am I doing something wrong here?

Error: Cannot find module '/home/js/project/node_modules/.bin/jest'
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

Node.js v17.9.0

I'm getting this error in vscode, am I doing something wrong here?

Error: Cannot find module '/home/js/project/node_modules/.bin/jest'
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

Node.js v17.9.0

@ALiwoto You need to have installed Jest locally in your workspace.

Here's a one-liner you can add to your projects for debugging Jest with Chrome Debugger:

1. add this script to package.json:

  "test:debug": "open -a \"Google Chrome\" chrome://inspect && node --nolazy --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --colors --verbose",

2. run the script within your project:

yarn test:debug insert/path/to/file

here a more robust command that use notify & also re-run the debugger in case of a file change in the tests
run:

npm install --save-dev node-notifier

than add to package.json:

    "test:debug": "open -a \"Google Chrome\" chrome://inspect && node --nolazy --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --colors --verbose --watchAll --notify"

I had this error after following @jherax note 👇
Error: Can't find a root directory while resolving a config file path.

My project didn't have any custom configuration related to Jest. I simply removed the jest.config.js from the arguments. Which gives me this launch.json file 👇

{
  "version": "1.0.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Jest: Current file",
      "program": "${workspaceFolder}/node_modules/.bin/jest",
      "args": ["${fileBasenameNoExtension}"], /* The change is on this line, there's no config passed ! */
      "console": "integratedTerminal",
      "disableOptimisticBPs": true,
      "windows": {
        "program": "${workspaceFolder}/node_modules/jest/bin/jest"
      }
    }
  ]
}

In case someones faces the same issue ... 😃

Thank you for your note @jherax , helped me a lot :)

Amazing! Thanks.