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.

did you find a solution in the meantime ?

nico1510
– nico1510

2017-01-04 20:09:26 +00:00
Commented Jan 4, 2017 at 20:09 — nico1510
– nico1510, Commented Jan 4, 2017 at 20:09

Stephen J. Collings · Accepted Answer · 2016-12-16 16:39:47Z

6

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

answered Dec 16, 2016 at 16:39

Stephen J. Collings

611 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mike Lischke · Accepted Answer · 2023-03-18 15:55:27Z

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:

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).
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 launch.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

M. Herold · Accepted Answer · 2017-02-16 22:03:42Z

0

What is your jest configuration? I was seeing weird transpiled output related to coverage until I added the following config value:

"testRegex": "src/.*\\.test\\.js$"

answered Feb 16, 2017 at 22:03

M. Herold

7141 gold badge8 silver badges18 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related