In this article we will configure a VueJs app to enable debugging jest unit tests inside vscode. I am assuming that you have a Vue app project generated from vue-cli and using webpack.

Add a debug task

For debugging we need to get node to execute unit tests with inspect-brk flag. Add following task to scripts section in package.json

"test:debug": "node --inspect-brk node_modules/.bin/vue-cli-service test:unit --no-cache --watch --runInBand"

Configure ES6 transformation

Unit-jest documentation provides detailed instructions on how to debug tests and transform ES6. To get babel to work on unit tests add following to jest.config.js

transformIgnorePatterns: ['/node_modules/(?!@babel)']

Add debug launch configuration in vscode

Now we will add a launch configuration named Debug Unit Tests to vscode. Open .vscode/launch.json and add following configuration.

{

"version": "0.2.0",

"configurations": [

{

"type": "node",

"request": "launch",

"name": "Debug Unit Tests",

"runtimeExecutable": "npm",

"runtimeArgs": [

"run-script",

"test:debug",

"${file}"

],

"port": 9229

}

]

}

Debugging jest unit test

Open the desired jest spec file in vscode and make it the active tab. Add debugger statement(s) in this spec file. Open Debug view (Ctrl+Shift+D). Set active configuration to Debug Unit Tests and click on Start Debugging (green arrow). Inside DEBUG CONSOLE you should see debugger listening and attaching. In some time execution should pause at debugger statement and you should be able to debug code :)

Check out vue-todo-app repository to see it in action.