How to debug mocha unit tests in a vue application in VSCode? - unit-testing

Question

I have a vue application with unit tests using unit-mocha. Tests run fine, but I can't debug them using VSCode debugger.
Here is what I've done:
First, I created a vue app in VSCode:
vue create hello-world
Then, I added unit-mocha:
cd hello-world
vue add unit-mocha
This generates file tests/unit/example.spec.js:
import { expect } from 'chai'
import { shallowMount } from '#vue/test-utils'
import HelloWorld from '#/components/HelloWorld.vue'
describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'new message'
const wrapper = shallowMount(HelloWorld, {
propsData: { msg }
})
expect(wrapper.text()).to.include(msg)
})
})
I ran the tests:
npm run test:unit
This works just fine.
But now, I would like to add breakpoints in the file and run the debugger.
So I did the following based on this thread: Configuration for Debugging Mocha Unit Tests in Vue.js with VSCode
I switched to Run tab on VSCode and clicked create a launch.json file:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Debug Unit Tests",
"program": "${workspaceFolder}/node_modules/#vue/cli-service/bin/vue-cli-service.js",
"args": ["test:unit", "--inspect-brk", "--watch", "--timeout", "999999"],
"port": 9229,
"console": "integratedTerminal"
}
]
}
I also added vue.config.js as suggested in the thread:
module.exports = {
transpileDependencies: ["vuetify"],
chainWebpack: (config) => {
if (process.env.NODE_ENV === "test") {
config.merge({
devtool: "cheap-module-eval-source-map",
});
}
},
};
Finally I set a breakpoint on the first statement of example.spec.js. and clicked Start debugging (with "Debug Unit Tests" selected). I have the following output in the terminal console:
Debugger listening on ws://127.0.0.1:53241/2faf3b6b-dd6f-476a-80bc-51b99df90ec3
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
Debugger listening on ws://127.0.0.1:9229/ad9ccf9a-9e2c-4ed9-a379-3e942c68d185
For help, see: https://nodejs.org/en/docs/inspector
Debugger seems to start (even twice??) but the test code isn't executed. My breakpoint is not hit (it turned gray and say "Unbound breakpiont"). Then I stopped the debugger.
I then retried to rerun the tests (npm run test:unit) to make sure it's not broken but it's ok.
Can anyone tell me what I am doing wrong?

Answer 1

I've finally found the solution I was looking for:
launch.json (thanks to OmegaOdie):
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Unit Tests",
"type": "node",
"request": "launch",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "npx",
"console": "integratedTerminal",
"runtimeArgs": ["vue-cli-service", "test:unit", "--inspect-brk"]
}
]
}
vue.config.json (thanks to this thread):
module.exports = {
devServer: {
...
},
// should be false for production
productionSourceMap: true,
chainWebpack: (config) => {
if (process.env.NODE_ENV === "test") {
// if unit testing, keep original lines to make breakpoints in original source files work
config.merge({
devtool: "cheap-module-eval-source-map",
});
} else {
// if not unit testing, use normal source maps
config.merge({
devtool: "source-map",
});
}
},
};
With this configuration, no need of debugger; instruction for breakpoints to work.

Answer 2

It aint perfect but seems to be working for me, more details can be found #https://nodejs.org/en/docs/guides/debugging-getting-started/
but the launch.json config should look like this
{
"name": "TestBreak",
"type": "node",
"request": "launch",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "npx",
"console": "integratedTerminal",
"runtimeArgs": [
"vue-cli-service",
"test:unit",
"--inspect-brk"
],
}
I'm hitting breakpoints with this. However I have to add debugger statements like this
debugger; // eslint-disable-line no-debugger
The comment is required for me due to some unknown linter.