Hi folks!
Yesterday I spent a lot of time to enable debugging for my unit tests in Visual Studio Code. Unfortunatelly I did not find anything out of the box in the web, that made it work for me. Therefore I want to share it with you now, that you save this time.
I am using jest as testing framework and my Vue project contains both, typescript and javascript files. I set the Vue project up with the Vue.cli 3.0, so there is a lot already configured right from the start, like Typescript, Jest and Babel, which is quite convenient! Therefore I will not mention this part of the setup, but only the missing pieces, mainly how to integrate this into the debugging feature of Visual Studio Code?
But before that there is also one small additional change that I had to apply to jest configuation file (jest.config.js). As I use both Typescript and Javascript I had to add the transformation for Javascript to the file. Because Vue.cli 3.0 only added this for Typescript. So the transform property finally looks like this:
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
'^.+\\.tsx?$': 'ts-jest',
"^.+\\.js$": "<rootDir>/node_modules/babel-jest"
},
After reading lots of documents I finally created this configuration for the VSCode Debugger that luckily works now. I hope it works for you, too. You need to enter it in the ālaunch.jsonā file in VSCode.
For this, open the Debug perspective, click on the options sign on the upper left with the tooltip "Configure or fix ālaunch.jsonā " and choose for example ānode.jsā from the drop down menu.
Then the launch.json file is opened in the editor. Here just replace the example configuration with the following:
"version": "0.2.0",
"configurations": [
{
"name": "vscode-jest-tests",
"type": "node",
"request": "launch",
"runtimeArgs": [
"--inspect-brk",
"./node_modules/@vue/cli-service/bin/vue-cli-service.js",
"test:unit",
"--runInBand"
],
"cwd": "${workspaceFolder}",
"protocol": "inspector",
"disableOptimisticBPs": true,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"outFiles": [ "${workspaceFolder}/src/**/*.js"],
"port": 9229
},
]
Now a new configuration āvscode-jest-testsā will show up in the debug view next to the āsettingsā icon in VSCode. You can start to run and debug your unit tests with the ārunā-sign (arrow) next to your new configuration.
So this works for me but I am not an expert. So there might still be issues in your environment with that script that I canāt help with. However for a fresh project created with Vue.cli 3.0 this works.