Jest + Babel in VS Code debugger causes breakpoints to move

Question

I am trying to debug a simple project using babel, jest, and vs code. When I set a breakpoint and then start debugging, my breakpoints jump around and are no longer where they were when I started. A sample repo can be seen here - https://github.com/RyanHirsch/starter-node

I've updated my launch.json to contain

{   "name": "Jest",   "type": "node",   "request": "launch",   "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",   "stopOnEntry": false,   "args": ["-i", "${file}"],   "cwd": "${workspaceRoot}",   "runtimeExecutable": null,   "sourceMaps": true,   "protocol": "inspector" } 

And my .babelrc looks like:

{   "plugins": ["@babel/plugin-proposal-object-rest-spread"],   "sourceMaps": "inline",   "presets": [     [       "@babel/preset-env",       {         "targets": {           "node": "6.10"         }       }     ]   ] } 

I thought that the source map options were enough to get this to work but I was wrong. What needs to change in order to keep my breakpoints in their original locations? Specifically when trying to debug my tests.

==== Edit ====

Before my breakpoints are on test line 10 and implementation line 4:

When I start debugging by selection my test file and then run Jest in the VS Code debug pane, my breakpoints jump to test line 9 and implementation line 6:

Running on Node 9.6.1 with the following extensions:

DavidAnson.vscode-markdownlint EditorConfig.EditorConfig Orta.vscode-jest PKief.material-icon-theme PeterJausovec.vscode-docker Shan.code-settings-sync bungcip.better-toml dbaeumer.vscode-eslint dracula-theme.theme-dracula dzannotti.vscode-babel-coloring eamodio.gitlens esbenp.prettier-vscode gerane.Theme-FlatlandMonokai humao.rest-client mauve.terraform mikestead.dotenv mjmcloug.vscode-elixir mohsen1.prettify-json ms-vscode.Theme-MaterialKit ms-vscode.azure-account ms-vscode.cpptools ritwickdey.LiveServer sbrink.elm shanoor.vscode-nginx vscodevim.vim 

Answer 1

Got this issue (using jest 23.6.0), checked that this was a known issue on create react app, resolved on this pull request:

https://github.com/facebook/create-react-app/pull/3605/files

Applied the following config to my launch.json

{ "type": "node", "request": "launch", "name": "Jest All", "program": "${workspaceFolder}/node_modules/jest/bin/jest", "args": [ "test", "--runInBand", "--no-cache"
], "sourceMaps": false, "console": "integratedTerminal", "internalConsoleOptions": "neverOpen" },

Managed to get it breaking on the right breakpoints.

Answer 2

@RyanHirsch ; just use retainLines": true alongside sourceMap: "inline" in your babelrc and It will work.