How to debug Vue CLI 3 unit tests with WebStorm? Debugger doesn't hit breakpoint

Question

Question

1. What do I have to do to make WebStorm hit the breakpoint?
2. Is it necessary to set the %NODE_DEBUG_OPTION%? If yes, how do I do this in combination with vue-cli.service?

Steps to reproduce:

1. vue create myapp
   • Set options to:
     • ? Please pick a preset: Manually select features
     • ? Check the features needed for your project: Babel, Unit
     • ? Pick a unit testing solution: Jest
     • ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
     • ? Save this as a preset for future projects? No
2. Open myapp in WebStorm
3. Open npm Tool Windows
4. Set breakpoint in tests/unit/example.spec.js
5. Rightclick on test:unit->Debug test:unit

console output:

To debug the "test:unit" script, make sure the %NODE_DEBUG_OPTION% string is specified as the first argument for the node command you'd like to debug. For example:

 "scripts": {
   "start": "node %NODE_DEBUG_OPTION% server.js"  
 }

[email protected] test:unit C:\Users\c-jay\myapp vue-cli-service test:unit

PASS tests/unit/example.spec.js

Configuration:

• WebStorm 2018.2.4
• Vue CLI v3.0.5

Answer 1

According to cli-plugin-jest and npm tasks debug in WebStorm I've edited the npm test:unit call in the scripts-section of my package.json to:

"test:unit": "node %NODE_DEBUG_OPTION% node_modules/@vue/cli-service/bin/vue-cli-service.js test:unit"

And webstorm hits the breakpoints as expected. This is for Windows. On Mac should it be:

"test:unit": "node $NODE_DEBUG_OPTION node_modules/@vue/cli-service/bin/vue-cli-service.js test:unit"