How to configure source maps when using Jest within Visual Studio Code debugger

Question

I am writing an app using react native and I want to be able to test my code using the jest framework and use the visual studio code editor debugger to set breakpoints. The problem I am currently having is no matter how I run the debugger, whether it is through spawning a new instance or attaching it, I can't seem to get the source maps to work from babel. I have tried a variation of configurations within the .babelrc file but none seem to work.

VScode version - 1.6.0(latest)

My directory structure resembles this

-package.json -node_modules -.babelrc -dist -app  -myModule.js  -test    -myModule.spec.js 

then in my .babelrc I have the following

{     "presets" : ["react-native"],     "sourceMaps" : true,     "outDir" : "./dist" } 

I have tried setting the sourceMaps prop to both true and inline and both did not work with current launch.json configuration.

Here is my launch.json for running the Jest tester

{              "name" : "Launch via jest",             "type": "node",             "request": "launch",             "program" : "${workspaceRoot}/node_modules/jest/bin/jest.js",             "cwd": "${workspaceRoot}",             "args": [                 "--runInBand"             ],             "runtimeArgs": [                 "--harmony"             ],             "sourceMaps": true,             "outDir" : "${workspaceRoot}/dist" } 

Both --harmony and --runInBand are necessary to get the debugger working properly since Jest will spawn a child process which conflicts with the ports.

I also have additional Jest configuration within my package.json

"jest": {     "preset": "jest-react-native"   } 

Now whenever I run the debugger, It runs and it stops at the babel output's breakpoints instead of the original source which doesn't help much. I should also mention that the test itself is compiled by babel which I am unsure if it matters.

Any pointers or different configurations are all welcomed.

Answer 1

The .babelrc option is sourceMap singular. { "sourceMap" : "inline" } works for me.

Answer 2

I've been able to get VS Code proper source map and breakpoint placement in source files instead of transpiled to work with Jest + Babel by:

1. Making sure Babel generates sourceMaps, this is by setting sourceMap to inline in the babel section of my package.json (you might need to do it in your .babelrc.json instead).

2. In my VS Code launch.json file I replaced debugger from node to pwa-node. This allowed me to specify the resolveSourceMapLocations property and indicate to VS Code that the source files are in my workspace directory. I think this is needed because of Jest building the files in its own cache.

My full lunch.json config:

{     // Use IntelliSense to learn about possible attributes.     // Hover to view descriptions of existing attributes.     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387     "version": "0.2.0",     "configurations": [         {             "type": "pwa-node",             "request": "launch",             "name": "vscode-jest-tests",             "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",             "args": [                 "--no-cache",                 "--config",                 "${workspaceRoot}/jest.config.json",                 "--runInBand",                 "--detectOpenHandles"             ],             "internalConsoleOptions": "neverOpen",             "outFiles": [                 "${workspaceRoot}/dist/**/*"             ],             "env": {                 "NODE_ENV": "test"             },             "runtimeArgs": [                 "--nolazy"             ],             "console": "integratedTerminal",             "sourceMaps": true,             "smartStep": true,              "skipFiles": [                 "<node_internals>/**",                 "node_modules/**"             ],             "resolveSourceMapLocations": [                 "${workspaceFolder}/**",                 "!**/node_modules/**"             ],         }     ] } 

I'm using VS Code 1.53, Jest 25.5.4