如何使用 WebStorm 调试 Vue CLI 3 单元测试？调试器没有命中断点

Question

问题

我该怎么做才能让 WebStorm 命中断点？
是否需要设置%NODE_DEBUG_OPTION%？如果是，我该如何结合 vue-cli.service?

重现步骤：

vue 创建我的应用程序
- 将选项设置为：
  - ？请选择一个预设：手动 select 功能
  - ？检查项目所需的功能：Babel，Unit
  - ？选择一个单元测试解决方案：Jest
  - ？你更喜欢把 Babel、PostCSS、ESLint 等的配置放在哪里？ 在package.json
  - ？将其保存为未来项目的预设？没有
在 WebStorm 中打开 myapp
打开 npm 工具 Windows
设置断点在tests/unit/example.spec.js
右键单击 test:unit->调试 test:unit

控制台输出：

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"  
 }
myapp@0.1.0 test:unit C:\Users\c-jay\myapp vue-cli-service test:unit

PASS tests/unit/example.spec.js

配置：

WebStorm 2018.2.4
Vue CLI v3.0.5

Answer 1

根据 cli-plugin-jest and npm tasks debug in WebStorm，我已将 package.json 的脚本部分中的 npm test:unit 调用编辑为：

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

并且 webstorm 按预期命中断点。这是为了 Windows。在 Mac 上应该是：

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

如何使用 WebStorm 调试 Vue CLI 3 单元测试？调试器没有命中断点

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

unit-testing

webstorm

vue.js

jestjs

vue-cli-3