Debugging Mocha tests written in ES6
On using WebStorm 10 for Node.js dev, I am unable to step through the test cases (written in ES6) while debugging. I guess the transcompilation is making the test file go out of sync. Wondering if anyone has been able to debug successfully?
Here is my test.js file
| Test.js |
|---|
describe('TestFlow', function () {
"use strict";
it('Test Path', (done) => {
console.log("Testing_1 happy path\n");
console.log("Testing_2 happy path\n");
done();
});
}); |
And I have the Mocha options configured to use --compilers js:babel/register. Now when I try to debug the code, the step through process is unpredictable and it just doesn't work. The babel compilation is messing with the debugging process.
Could you please let me know if there is a work around to this issue? I thought the debugging ES6 code was a feature in WebStrom 10, but I have not had luck with it
Please sign in to leave a comment.
Debuggin Mocha specs written in ECMAScript 6 works for me (test project attached). But debugger doesn't always stop on correct lines - see https://youtrack.jetbrains.com/issue/WEB-16209
Attachment(s):
mocha_es6.zip
My debugging experience with WebStrom is similar to what you are seeing... The debugger does launch, but it breaks at random lines and it gets difficult to do any kind of meaningful debugging. The more the complex the project is, the more difficult it becomes to step through the code. Please check the attached video (link - https://www.youtube.com/watch?v=iotleEgXdGQ) on all the random lines the debugger hits when I try to step through my code (And note the long pause between hitting the debug button and the debugger actually launching.. is there anything I could do to speed things up?).
Regarding the bug https://youtrack.jetbrains.com/issue/WEB-16209, could you please let me know when I could expect a fix to it?
there is no ETA for this fix. Please vote for https://youtrack.jetbrains.com/issue/WEB-16209 to be notified on changes. See https://intellij-support.jetbrains.com/entries/23368682-How-to-follow-YouTrack-issues-and-receive-notifications for information about following youtrack tickets
I ran into this issue recently and found this post, the way to get it to work is to have a babel.config.js file in the working directory of where you are running your tests and as part of the options return sourceMaps: 'inline', in the config object. Afterwards all your debugging will be appropriately aligned.
Like so
module.exports = function (api) {
api.cache(true);
const presets = [
'@babel/preset-env',
'@babel/preset-typescript',
['@babel/preset-react', {modules: false}],
];
const plugins = [
'@babel/plugin-proposal-class-properties',
];
return {
presets,
plugins,
sourceMaps: 'inline',
};
};