How do you debug Jest Tests?

Question

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

How do you debug Jest Tests ?

I know this is post is aged. However, I wanted to add an update that might be helpful. There now exists a VSC extension simply called [Jest](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest). It adds real-time feedback when working in `.test.js` files. Hope this helps. — Mike S., Nov 13 '19 at 16:35

score 257 · Answer 1 · edited Feb 16 '22 at 13:50

257

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.

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

Run tests in that terminal in a Watch mode npm test --watch.
Set a break-point in your file.
Make any change in a file you want to debug and save.
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(...)

edited Feb 16 '22 at 13:50

mikemaccana

110,530
99
389
494

answered Sep 15 '20 at 20:52

v-andrew

21,939
6
36
41

6

perfect..this should be the answer – gsb22 Jul 13 '21 at 08:53
8

I had to use `npm test -- --watch` but otherwise perfect answer! – derpedy-doo Jan 30 '22 at 14:36
thrown: "Exceeded timeout of 5000 ms for a test. Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test." – PirateApp Jun 13 '22 at 09:19
Like @PirateApp mentioned, Jest has a max. default timeout so tests should run within 5s, but we need more than that to debug. We can change this max. timeout on jest.setup.js, but wondering if there's better alternative? – Stanley Sathler Jun 23 '22 at 20:32
@PirateApp I never had a problem with timeout, so it could be something specific to your settings. – v-andrew Dec 19 '22 at 16:10

Yuci · Answer 2 · 2020-06-25T13:05:12.257

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:

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

You find the simple demo project on my GitHub repo.

Hi @Yuci, can you explain how to add the source code folder to the workspace in chrome-devtools? — Sam Kah Chiin, Jun 25 '20 at 12:05
@SamKahChiin, see my update on adding the source code folder to the workspace in chrome-devtools — Yuci, Jun 25 '20 at 13:06

score 13 · Answer 3 · answered Mar 18 '21 at 21:42

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.

score 10 · Answer 4 · answered Dec 26 '21 at 23:59

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
    }
  ]
}

Still, working in 2023 with jest version 29.5 – tiennsloit May 02 '23 at 19:38 — tiennsloit, May 02 '23 at 19:38

score 9 · Answer 5 · answered Apr 29 '19 at 12:30

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",
      ]
    }
  ],
},

score 3 · Answer 6 · answered Jul 14 '22 at 18:23

Here's a one-liner you can add to your projects to use debugger; in your Jest test files:

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",

run the script within your project:

yarn test:debug insert/path/to/file

Now you can use debugger; within your test files to trigger line-of-code breakpoints in Google Chrome!

The script has two parts. First, it opens Chrome — to: chrome://inspect — and then it will start a Node process (where we can use debugger) that runs a jest file (from node modules) on a specific test file. As a result, you must have Jest installed in your project dependencies!

score 2 · Answer 7 · answered Dec 18 '20 at 09:57

2

@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>

answered Dec 18 '20 at 09:57

MsieurKris

387
1
4
14

This is a useful answer in that it covers docker and various other remote scenarios but using it haphazardly is a potential security hole. See https://nodejs.org/en/docs/guides/debugging-getting-started/#enabling-remote-debugging-scenarios for alternatives. – Richard Wheeldon May 06 '22 at 14:14

score 1 · Answer 8 · answered Nov 05 '15 at 20:40

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.

score 1 · Answer 9 · answered Jan 19 '17 at 03:53

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.

score 1 · Answer 10 · answered Dec 27 '21 at 00:52

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

score 1 · Answer 11 · answered Nov 04 '22 at 07:14

If you're rendering content with a frontend library like react-testing-library, you probably need a visual feedback of your test to debug it.

While Jest uses a virtual DOM, jest-preview adds a browser rendering, so you can actually see what your test is doing.

import { render } from '@testing-library/react';
import { debug } from 'jest-preview';

describe('App', () => {
  it('should work as expected', () => {
    render(<App />);
    debug();
  });
});

And if you're using Vitest, the equivalent library is called vitest-preview

score 0 · Answer 12 · answered Jul 27 '23 at 08:54

The following worked for me:

We set breakpoints in the test and the code under test if necessary
Right-click on the icon next to the name of the test in the test file. In the menu that opens, click on Debug Test.

3. After that, the interpreter will start stopping at the places where you have set breakpoints. Good luck to everyone

score 0 · Answer 13 · answered Jul 28 '23 at 06:36

0

for some cases it might be enough to gather debug logs.
it's possible to activate them with environment variables as explained in the doc

Linux/MacOS: export TS_JEST_LOG=ts-jest.log

Windows: set TS_JEST_LOG=ts-jest.log

answered Jul 28 '23 at 06:36

til

832
11
27

How do you debug Jest Tests?

13 Answers13

Linked