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.

Answer 3

After much struggling, here's how I got Jest with Babel debugging to consistently work and break on the correct lines.

Mainly, I used the excellent Jest plugin for VSCode by developer ' Orta ', and via searching 'Jest' in the extensions pane of VSCode:

From there I just hit the Debug link that appears in my test, which allows me to correctly hit breakpoints in both my tests and application code.

Breakpoint successfully hit in the test file:

Breakpoint successfully hit in the source code file:

Answer 4

The correct config which works for babel-jest 25.0.0 & jest 25.0.0 is the following:

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

For more information I took my config from the following repository

Answer 5

What worked for me is the turning off sourcemap by adding "sourceMaps": false to the launch config. I don't fully understand why it works though.

Example:

{
  "type": "node",
  "request": "launch",
  "name": "Jest Current File",
  "program": "${workspaceFolder}/node_modules/.bin/jest",
  "args": [
    "${relativeFile}",
    "--config",
    "jest.config.js",
    "--no-cache"
  ],
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen",
  "disableOptimisticBPs": true,
  "sourceMaps": false,
  "windows": {
    "program": "${workspaceFolder}/node_modules/jest/bin/jest",
  }
}

Answer 6

Install node:

https://nodejs.org/en/download/

Install Chrome Plugin:

https://chrome.google.com/webstore/detail/nodejs-v8-inspector-manag/gnhhdgbaldcilmgcpfddgdbkhjohddkj?hl=en

In your terminal run the following script

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

More reference for troubleshooting in vs code follow instruction in

https://jestjs.io/docs/en/troubleshooting

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

Babel will be converting es6 to es5, so its not dependent for inspecting. For inspecting you need node and node chrome extension.

Enjoy Coding