Configuration for Debugging Mocha Unit Tests in Vue.js with VSCode - vue.js

Question

I am currently facing some problems getting my tests to debug properly with VSCode in Vue.js (I am using Mocha and Webpack)
The first configuration I found which got me a bit closer was this one.
Configuration in .vscode/launch.json
{
"type": "node",
"request": "launch",
"name": "Unit Tests",
"program": "${workspaceFolder}/node_modules/#vue/cli-service/bin/vue-cli-service.js",
"args": [
"test:unit"
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
Now this solution did attach but the problem is it was only debuggin inside of the vue-cli-service.js (node_modules/#vue/cli-service/bin/vue-cli-service.js). I tries alot around here but did not came alot closer. So I thought I'd just write a Configuration myself as Vue is just using Webpack and Mocha and this should be possible. Now I got closer but still not to a version that is actually usable. Right now this is the configuration that I have
Configuration in .vscode/launch.json
{
"name": "Run mocha-webpack",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/mocha-webpack/bin/mocha-webpack",
"args": [
"--debug-brk", "5858",
"--timeout", "120000",
"--require", "node_modules/#vue/cli-plugin-unit-mocha/setup.js",
"--webpack-config", "node_modules/#vue/cli-service/webpack.config.js",
"tests"
],
"sourceMapPathOverrides": {
"webpack:///./~/*": "${workspaceRoot}/node_modules/*",
"webpack:///./*": "${workspaceRoot}/*",
"webpack:///*": "*"
},
"stopOnEntry": false,
"sourceMaps": true,
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
],
"env": { "NODE_ENV": "test"},
"console": "integratedTerminal",
"outFiles": []
}
Now this got me one step closer. I can now at least set a debugger statement in my code and the debugger will stop there. However it will still not react to Breakpoints I have set using VSCode. I guess this must have to do something with the compilation of the code and the sourceMapping but I am so far unable to make this work.

Answer 1

Alright so TLDR
vue.config.js
module.exports = {
"transpileDependencies": [
"vuetify"
],
chainWebpack: config => {
if (process.env.NODE_ENV === 'test') {
config.merge({
devtool: 'cheap-module-eval-source-map',
});
}
}
}
launch.json
{
"type": "node",
"request": "launch",
"name": "Run Unit Tests",
"program": "${workspaceFolder}/node_modules/#vue/cli-service/bin/vue-cli-service.js",
"args": ["test:unit", "--inspect-brk", "--watch", "--timeout", "999999"],
"port": 9229
}
What you want to do is to chain the webpack config so that if you are in testing you change your devtool to one that does not transpile your code like "cheap-module-eval-source".
Thanks to rustyx for pointing that out on GitHub.

Answer 2

Configure webpack to conditional behaviour depending on the environment. This is described in the documentation Working with Webpack and Modes and Environment Variables
of Vue CLI.
For the test-mode, which is used by vue-cli-service test:unit, mutate the devtool to not transpile the code e.g. cheap-module-eval-source or eval-source-map.
vue.config.js
module.exports = {
configureWebpack: config => {
if ((process.env.NODE_ENV === 'development') || (process.env.NODE_ENV === 'production')) {
config.devtool = 'source-map'
}
else if (process.env.NODE_ENV === 'test') {
config.devtool = 'cheap-module-eval-source-map'
}
}
}
launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
},
{
"type": "node",
"request": "launch",
"name": "test:unit debug",
"program": "${workspaceFolder}/node_modules/#vue/cli-service/bin/vue-cli-service.js",
"args": ["test:unit", "--inspect-brk", "--timeout", "900000"],
"port": 9229
}
]
}