Martin Dawson
Martin Dawson

Reputation: 7656

VSCode How do I debug with es6 mocha unit tests and jsx files

I manage to hit my breakpoint, but I have a few problems.

Mocha options that seem to stop it working completely:

--require babel-register
--require test/util/dom.js
--require expect
--compilers jsx:babel-register

Launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "request": "launch",
      "name": "Debug Mocha Test",
      "type": "node",
      "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
      "args": [
        "test/**/*.spec.js", //I need to get this working with .jsx files
        "--require", "babel-register"
        ],
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": null,
      "env": { }
    }
  ]
}

Upvotes: 4

Views: 1725

Answers (1)

Martin Dawson
Martin Dawson

Reputation: 7656

Turns out that this is a bug with the node debugger. I fixed all of the problems by changing:

"type": "node" to "type": "node2".

Launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "request": "launch",
      "name": "Debug Mocha Test",
      "type": "node2",
      "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
      "args": [
        "test/**/*.spec.jsx",
        "--colors", "--no-timeouts"
        ],
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": null,
      "env": { }
    }
  ]
}

mocha.opts:

--require babel-register
--require test/util/dom.js
--require expect
--compilers jsx:babel-register

Answer taken from weinand.

You also need a .babelrc file in your root app with the "retainLines": true. Here is my .babelrc file for example:

{
    "presets": [
        "es2015",
        "stage-2",
        "react"
    ],
    "plugins": [
        "transform-es2015-modules-umd"
    ],
        "retainLines": true
}

If you get bad option: --inspect=..., try and installing a newer version of node.

Upvotes: 8

Related Questions