jest: Debugging in Visual Studio Code does not work unless you use --legacy-bundling

Do you want to request a feature or report a bug? Bug

What is the current behavior?

Jest debugging in Visual Studio Code does not work unless you use npm install --legacy-bundling.

This was a fun one to track down. I was not able to get Jest to debug properly to work on my primary laptop and, after several hours of mucking with it, I tried my second laptop. It worked! After comparing differences, I noticed npm was way out of date and ultimately I discovered the hack below.

If the current behavior is a bug, please provide the steps to reproduce and either a repl.it demo through https://repl.it/languages/jest or a minimal repository on GitHub that we can yarn install and yarn test.

Download VSCode and install.
Clone my debug-jest-in-vscode repo. It’s simply the getting started example but with my VSCode launch config.
Use npm install, put a breakpoint on __tests__/sum-test.js:2, and run.

What I see is, even though I have the sum-test.js file open, a new tab labeled c:\github\debug-jest-in-vscode\__tests__\sum-test.js is opened (note: I cloned to C:\github\debug-jest-in-vscode). If you hover over the tab, the full path it shows is \1000\c:\github\debug-jest-in-vscode\__tests__\sum-test.js. Also, my code is wrapped with ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){ + }});. The breakpoint is still respected and the program stops in the correct spot; however, neither placing new breakpoints nor editing code in the mystery tab seems to work.

Now, to get it to work:

Delete the node_modules folder entirely.
Use npm install --legacy-bundling, put a breakpoint on __tests__/sum-test.js:2, and run.

Now everything works as expected. Breakpoints cause my program to pause in the original source file, the source file is the same, and I can edit the source file while paused.

What is the expected behavior?

I would expect npm install’s --legacy-bundling not to be needed.

Please provide your exact Jest configuration and mention your Jest, node, yarn/npm version and operating system.

Jest: 18.1.0 Node: 4.6.0 NPM: 4.2.0 OS: Windows 10 Home (Windows_NT ia32 10.0.14393)

Note: I created an issue for VSCode team as well to hopefully get some dialog going.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 16 (3 by maintainers)

Most upvoted comments

For anyone interested - I think I have a simple fix for this. I commented on the VS Code issue here: https://github.com/Microsoft/vscode/issues/19566#issuecomment-301254539

clintjhill on May 13, 2017

Any thoughts?

jbsulli on Feb 8, 2017

Found it!

I contacted NPM and they told me to try moving the module folders one by one and see if I could track down what module was causing the issue. I wrote a program to do this for me and narrowed it down to babel-jest inside of jest-runtime. Now, it works with --legacy-bundling so I had to assume another module was picking it up and changing things as a result. After searching all modules for “babel-jest”, only one file had it: jest-config in build/normalize.js.

Now that I had the potential source, I removed the node_modules folder, did npm install the normal way, and confirmed the problem still exists. After several tests, I found that changing line 279 to if(false) fixed everything. So, for whatever reason, setting config.transform to { '^.+\.jsx?$': 'babel-jest' } breaks debugging in VSCode.

This only happens when using npm install without --legacy-bundling or --global-style because normalize.js is doing a weird check for installed modules and finds babel-jest. With the flags, babel-jest is nested in a way that normalize.js cannot find it.

So, anyway… the problem seems to start here.

jbsulli on Feb 2, 2017