Debugging Jest Tests in VS Code: Breakpoints Move

Question

When debugging Jest tests in VS-Code my breakpoints move a few lines as soon as I start the debugger.

I use the officially recommended configuration with plain JavaScript (not Babel).

I think it has something to do with source maps. Setting "sourceMaps": false in the configuration makes my breakpoints not move anymore but shift the 'real' source code a few lines.

Minimal Example:

// hello_world.test.js

funTest = require('./hello_world.js')

const x = 15

test('this is a test', () => {
    expect(funTest(5)).toBe(9)
})

// hello_world.js
const funTest = () => {
    return 9 
}

module.exports= funTest

Now if you set a breakpoint at const x = 15 you will see that it is shifted to expect(funTest(5)).toBe(9) during the debugging session.

Used Software VS Code: 1.27.0, no extensions ; Jest: 23.5.0 ; Node: 8.10.0 ; Ubuntu Linux 16.04

Can you add a minimal code example? – Jeroen Heier Sep 05 '18 at 18:49 — Jeroen Heier, Sep 05 '18 at 18:49
Sure thing, I'll paste it. – Arno Nymous Sep 05 '18 at 19:18 — Arno Nymous, Sep 05 '18 at 19:18

score 29 · Answer 1 · answered Sep 06 '18 at 07:59

29

I found out the 'solution' myself. Add a .babelrc file into your root folder with the following content:

{
  "sourceMap": "inline",
  "retainLines": true
}

Then the problems are gone.

Even though I do not use Babel specifically, VS Code somewhat does.

answered Sep 06 '18 at 07:59

Arno Nymous

399
3
7

I've been searching for two days... thank you!! – Raph117 Sep 01 '21 at 10:02
Has no effect with ts-jest. – Mike Lischke Oct 30 '22 at 11:14

score 12 · Answer 2 · answered Mar 22 '19 at 12:44

12

Add the following to your vscode-jest-tests config in launch.json:

{
  "disableOptimisticBPs": true
}

This worked for me and several other people.

answered Mar 22 '19 at 12:44

Daniel

3,115
5
28
39

3

I wish I could upvote this over nine-thousand times. – Adam Prax Aug 23 '19 at 16:51
3

maybe vscode should rename the option "disablePullingHairOut" and make `true` be the default value. – cyrf Dec 07 '19 at 16:27
1

This worked for a while and then stopped working with recent vscode updates. Infuriating. – robross0606 Aug 04 '21 at 18:26
2

Can confirm, this option no longer works as of 2020 updates – redditmerc Feb 03 '22 at 23:43

Mike Lischke · Answer 3 · 2022-11-21T12:25:12.303

This is a long standing question and searching for a solution leads to old or wrong answers, like that suggestion to add "disableOptimisticBPs: true", which is no longer supported. I couldn't even find a note saying that it was removed and why.

The main problem here is clearly the source map. For some reasons the generated source maps don't match the actual TS code. And for me not even breakpoints in the normal code worked (outside of test code). But in another project I have a working Mocha configuration, which finally brought me to a solution here.

You don't need ts-jest for debugging! It's the culprit for the entire trouble, which caused not only for me to lose days, searching for a solution. Instead let tsc generate your JS code (as you probably do anyway) and make it generating source maps too. Then just give Jest the path to the JS files, not the TS files. VS Code will automatically find the sidecar source maps and step with you through your TS code just fine.

As launch configuration to debug the current spec file use:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Run current Jest test",
            "runtimeExecutable": null,
            "runtimeArgs": [
                "--inspect-brk",
                "${workspaceRoot}/node_modules/.bin/jest",
                "--runInBand",
                "${fileBasenameNoExtension}.js",
            ],
            "console": "integratedTerminal",
            "stopOnEntry": false,
            "preLaunchTask": "tsc",
            "outFiles": [
                "${workspaceFolder}/output/src/**/*.js"
            ],
            "env": {
                "NODE_ENV": "testing"
            }
        }
    ]
}

This needs a task to run the TS compiler:

{
    "version": "2.0.0",
    "tasks": [
        {
            "command": "tsc",
            "label": "tsc",
            "type": "shell",
            "args": [
                "-w",
                "-p",
                "."
            ],
            "isBackground": true,
            "problemMatcher": "$tsc-watch",
            "presentation": {
                "echo": true,
                "reveal": "silent",
                "focus": false,
                "panel": "shared",
                "showReuseMessage": true,
                "clear": false
            }
        }
    ]
}

which builds all file on first test debug run and then watches for any changes in the TS files and recompiles those changed immediately.

Now select any of your spec files, set a breakpoint (and maybe also in your source code) and start debugging.

score 0 · Answer 4 · answered Nov 29 '22 at 16:42

0

If you use VSCode, what I have found extremely easy is to open Javascript Debug Terminal(instead of Run and Debug) and then run your jest test and it will work like a charm.

answered Nov 29 '22 at 16:42

Giorgos Ntymenos

361
2
13

Debugging Jest Tests in VS Code: Breakpoints Move

4 Answers4

Linked