Use with VS Code

[notenoughneon]

I'd like to use Visual Studio Code's debugger with mocha-webpack tests. VS Code can debug mocha tests, but you have to tell it to use "node_modules/mocha/bin/_mocha" and not "mocha".

For mocha-webpack I tried both "node_modules/mocha-webpack/bin/mocha-webpack" and "node_modules/mocha-webpack/bin/_mocha" and it would run the tests but not attach the debugger. Not sure what is going wrong. Possibly related to #19

[zinserjan]

I don't use VS Code, but it's perhaps similiar to Intellij's mocha plugin.

The following config works for me. Have a look at devtoolModuleFilenameTemplate, devtoolFallbackModuleFilenameTemplate and devtool.

webpack.config.test.js

module.exports = {
  ....
  output: {
    devtoolModuleFilenameTemplate: '[absolute-resource-path]',
    devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
  }
  target: 'node',
  devtool: "source-map"
};

Moreover i had to include source-map-support with --require source-map-support/register in my mocha-webpack.opts or as command argument.

[notenoughneon]

Thanks for the suggestion. The devtool- options fixed VS Code debugging of my manual test build, but Code still doesn't attach to mocha-webpack.

I tried "--require source-map-support/register", but it breaks both mocha and mocha-webpack with the following error:

node_modules/source-map-support/source-map-support.js:411
      var hasStack = (arguments[1] && arguments[1].stack);
                                                  ^
SyntaxError: 

[notenoughneon]

I managed to fix the source-map-support syntax error by adding the 'node' environment option: evanw/node-source-map-support#137

The VS Code attachment issue remains though.

[correttojs]

+1 it would be useful to have a --debug-brk option to run mocha in debug mode The workaround is to compile with webpack, run mocha with --debug-brk and the attach VS Code debugger

[zinserjan]

--debug-brk option isn't necessary. Mocha have this option only cause they are spawning another mocha process (see here). mocha-webpack does not spawn another process, so --debug-brk should work without further adjustments.

[doronbrikman]

Are you manage to run it? I'm getting an error:

Module parse failed: Unexpected token You may need an appropriate loader to handle this file type

but it's the same webpack config that I run in the console. what can be the problem here?

[rosieks]

Does anybody have any success with that?

[xugao]

+1, not been able to debug tests in vscode using mocha-webpack. Any updates?

[lpreterite]

I have tried the following code is feasible, but I don't know why.

webpack.config.js

if (process.env.NODE_ENV === "test") {
    //If you would to use breakpoint in vscode, then must be set devtool to "eval" base
    config.devtool = "eval"; 
    config.output = Object.assign(config.output, {
        devtoolModuleFilenameTemplate: "[absolute-resource-path]",
    });
}

.vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
    {
        "type": "node",
        "request": "launch",
        "name": "Mocha-webpack Tests",
        "program": "${workspaceFolder}/node_modules/mocha-webpack/bin/mocha-webpack",
        "args": [
            "--full-trace",
            "--timeout",
            "999999",
            "--colors",
            "tests/**/*.js"
        ],
        "sourceMaps": true,
        "env": {
            "NODE_ENV": "test"
        },
        "internalConsoleOptions": "openOnSessionStart"
    }]
}