Webstorm: Debugging Mocha tests written in ES6

Question

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

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

Answer 1

In WebStorm go to Run/Edit Configurations.../Templates/Mocha/Extra Mocha options and insert the following (depends on version of babel: https://git.io/vdcSr).

Babel 7

--require @babel/register

Babel 6

--require babel-core/register

Answer 2

Webstorm debugger won't work with runtime babel compilation. You need to first compile your ES6 files using babel with sourcemaps and place them let's say in dist directory. You can use this gulp task to do so.

In webstorm's debug mocha configuration point working directory to the above created dist directory. Also point test directory to your tests in dist directory. Put a breakpoint in the original ES6 test file and start your debug session.

Answer 3

This works now in at least WebStorm 2017.1. JetBrains has marked this issue as fixed

From terminal:

> npm install --save-dev babel-core babel-preset-es2015

Under the menu Run/Edit Configurations...Mocha Run/Debug configuration, enter this option:

Extra Mocha options: --compilers js:babel-core/register

Also, have a .babelrc file (or put in package.json)

{
  "presets": [
    "es2015"
  ]
}

You should now be able to run and debug your ES6 unit tests See this article as well