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

4 comments
Comment actions Permalink

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
0
Comment actions Permalink

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?

0
Comment actions Permalink

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

0
Comment actions Permalink

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',
};
};
0

Please sign in to leave a comment.