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

Answer 1

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.

Answer 2

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

{
  "disableOptimisticBPs": true
}

This worked for me and several other people.