如何使用 WebStorm 调试 Vue CLI 3 单元测试？调试器未命中断点答案

【问题标题】：How to debug Vue CLI 3 unit tests with WebStorm? Debugger doesn't hit breakpoint如何使用 WebStorm 调试 Vue CLI 3 单元测试？调试器未命中断点
【发布时间】：2019-04-01 13:36:22
【问题描述】：

问题

我必须做些什么才能让 WebStorm 达到断点？
是否需要设置 %NODE_DEBUG_OPTION%？如果是，我该如何结合 vue-cli.service 做到这一点？

重现步骤：

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

控制台输出：

要调试“test:unit”脚本，请确保将 %NODE_DEBUG_OPTION% 字符串指定为您要调试的节点命令的第一个参数。例如：
 "scripts": {
   "start": "node %NODE_DEBUG_OPTION% server.js"  
 }
myapp@0.1.0 测试：单元 C:\Users\c-jay\myapp vue-cli-service 测试：单元

通过测试/单元/example.spec.js

配置：

WebStorm 2018.2.4
Vue CLI v3.0.5

【问题讨论】：

标签： unit-testing vue.js webstorm jestjs vue-cli-3

【解决方案1】：

根据cli-plugin-jest 和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"

【讨论】：