Jest debugging in Angular project pausing on incorrect line

Permanently deleted user

Created January 09, 2020 22:02

I'm in the process of adding Jest to an existing Angular web app so I can write some unit tests. I've got everything working, except debugging in the IDE itself. When I debug a Jest test in the IDE and put a breakpoint into my production code, the debugger pauses on my breakpoints correctly but the highlighted line is incorrect.

Even more bizarrely, once I step through several lines and on the second line of a method, the highlighted line jumps to the correct line. Then if I step out of that method, it goes back to highlighting the wrong line. The code in question is inside a loop and once I get back to the second line of the same method, it fixes itself again. Super weird.

Once the debugger has paused, the stacktrace does show that I am paused in the correct method, it's just that the line number is incorrect.

Note: I don't think this is a sourcemap issue, because when I debug the same code in Chrome, it works fine.

Wondering if anyone out there has ever experienced this or knows what might be the cause of it.

Thanks.

4 comments

Elena Pogorelova

Created January 10, 2020 11:17

please check your jest.config.js - what does it look like? Do you have collectCoverage enabled in it?
If the source file is instrumented for coverage, the generated code can't be correctly mapped to source, causing issues like yours.

If disabling coverage doesn't help, please provide a sample project the issue can be reproduced with

Permanently deleted user

Created January 10, 2020 15:55

Hi Elena,

I don't have collectCovered enabled nope, I actually tried explicitly setting it to false (even though that's the default) but it had no effect.

I whittled down my existing project to something smaller that still reproduces the issue. It's here: https://drive.google.com/file/d/1Y1UtzFjOtE0Kj17XakAi6zQHkqNbIVv3/view?usp=sharing

If I put breakpoints on lines 21, 28, 31, 39 in alert.component.ts and then run the first test in alert.component.spec.ts in debug mode, I see the issue with the wrong lines being highlighted. When I run the test, my first breakpoint to be hit is on line 21, but the highlighted line is empty space on line 17. The stacktrace correctly identifies that the debugger has paused in ngOnInit, but lists the incorrect line number. This continues for a while, until it eventually corrects itself inside the add method.

This is using IDEA 2019.3.1.

Thanks,

Jeff

Elena Pogorelova

Created January 10, 2020 16:59

Thanks, submitted to developers as https://youtrack.jetbrains.com/issue/WEB-43248; please follow it for updates

Permanently deleted user

Created January 10, 2020 17:07

Thanks Elena, I'll keep an eye on it.

Please sign in to leave a comment.