How do you debug Jest Tests?

TypescriptUnit TestingDebuggingJestjsVscode Debugger

Typescript Problem Overview


I can't find any information on debugging my unit tests written with Jest.

How do you debug Jest Tests ?

Typescript Solutions


Solution 1 - Typescript

You do not need Chrome for Jest tests.

The simplest solution I found is to use VS Code JavaScript Debug Terminal.

And it works with Typescript and Nrvl.Nx work-spaces out of the box.

  1. Open the command palette and start Debug: JavaScript Debug Terminal:

enter image description here

  1. Run tests in that terminal in a Watch mode npm test --watch.
  2. Set a break-point in your file.
  3. Make any change in a file you want to debug and save.
  4. watch will run Jest tests against modified files.

When you want to narrow down the number of files run by the --watch, press p in the terminal and enter a pattern, which is just a part of the file name you want to test and hit [Enter]

To limit it to a single test in a file - focus it with f, so change it(...) to fit(...)

Solution 2 - Typescript

You can use Chrome DevTools to debug Jest tests.

First, start Node debugger in your project:

node --inspect-brk <path to jest.js> --runInBand <path to your test file>

Examples:

  • If you install Jest locally (Linux example):

    node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand mymodule/test.js

  • If you install Jest globally (Windows example):

    node --inspect-brk "C:\\Program Files\\nodejs\\node_modules\\jest\\bin\\jest.js" --runInBand mymodule\\test.js

Then, you can open the Google Chrome browser, and type in the address bar:

chrome://inspect

Now click the inspect link under "Remote Target" to open Chrome DevTools.

Note that you probably need to add the source code folder to the workspace in chrome-devtools, so as to be able to set breakpoints.

Now you can press F8 to start debugging.

[FYI]:

  • My Node version: v10.11.0
  • My Jest version: 23.6.0
  • My Google Chrome version: 71.0.3578.98

[Update] Regarding the step of adding the source code folder to the workspace in chrome-devtools (as asked by Sam), it looks like below:

enter image description here

And then you can open your script files and set the breakpoints:

enter image description here

You find the simple demo project on my GitHub repo.

Solution 3 - Typescript

I wrote a blog post on 7 ways to debug Jest tests in terminal. Here's the fastest way to do it from it.

You can install ndb, an improved debugging experience for Node.js, enabled by Chrome DevTools, with

npm install -g ndb

Then you can run:

ndb npm run test

which will open the DevTools for you and run the tests.

Or you can just put in one command with:

npx ndb npm run test

and you're good to go. But do check out the blog post where I go into details of different ways to debug Jest tests.

Solution 4 - Typescript

This is my basic config for debugging Jest in VSCode, add to your launch configurations within settings.json

"launch" : {
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Jest",
      "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
      "args": [
          "-i"
      ],
       "skipFiles": [
        "<node_internals>/**/*.js", "node_modules",
      ]
    }
  ],
},

Solution 5 - Typescript

As of 2021, check Debugging in VS Code from Jest docs. Add the configurations below to your .vscode/launch.json file.

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

Solution 6 - Typescript

For anyone seeking an answer, you debug jest with node-inspector. However this is a very slow process (2-5 minutes to debug a single test), and wasn't very useful in actual usage.

I haven't found a better way to debug Jest, however I have seen a lot of people doing the extra work to make jasmine or mocha work with react components. So that may be a more viable option until node-inspector is actually usable.

Solution 7 - Typescript

@Yuci answer was perfect for me.

I'm just precising it in case of you're using jest inside local Docker container. You need to precise --inspect-brk=0.0.0.0:9229

node --inspect-brk=0.0.0.0:9229 <path to jest.js> --runInBand <path to your test file>

Solution 8 - Typescript

Adding jest configuration would work only if there is only one project. However, if there are multiple projects within its own folder (i.e. rootfolder/project1, rootfolder/project2), running "jest --watchAll --runInBand --coverage" with breakpoint either in the test file or the file under test would be good option

Solution 9 - Typescript

Run

node --debug-brk node_modules/.bin/jest

in your project directory. It should start the node process paused an listening (usually at port 5858) for a debugger. Visual Studio Code is an example of a nice graphical debugger for node.js that can be used to connect to the listening node process.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBentOnCodingView Question on Stackoverflow
Solution 1 - Typescriptv-andrewView Answer on Stackoverflow
Solution 2 - TypescriptYuciView Answer on Stackoverflow
Solution 3 - TypescriptNikola ĐuzaView Answer on Stackoverflow
Solution 4 - TypescriptLeigh MathiesonView Answer on Stackoverflow
Solution 5 - TypescriptFrancisco GomesView Answer on Stackoverflow
Solution 6 - TypescriptBentOnCodingView Answer on Stackoverflow
Solution 7 - TypescriptKristofDcuView Answer on Stackoverflow
Solution 8 - Typescriptuser2067967View Answer on Stackoverflow
Solution 9 - TypescriptczernyView Answer on Stackoverflow