如何使用WebStorm调试Vue CLI 3单元测试？调试器未达到断点

Question

问题

1. 如何使WebStorm达到断点？
2. 是否需要设置％NODE_DEBUG_OPTION％？如果是，该如何与vue-cli.service结合使用？

复制步骤：

1. vue创建myapp
   • 将选项设置为：
     • ？请选择一个预设：手动选择功能
     • ？检查项目所需的功能： Babel，单位
     • ？选择一个单元测试解决方案：开玩笑
     • ？您希望在哪里放置Babel，PostCSS，ESLint等的配置？ 在package.json中
     • ？将其保存为预设以供将来的项目使用吗？ 否
2. 在WebStorm中打开myapp
3. 打开npm工具窗口
4. 在tests / unit / example.spec.js中设置断点
5. 右键单击test：unit-> Debug test：unit

控制台输出：

  

要调试“ test：unit”脚本，请确保将％NODE_DEBUG_OPTION％字符串指定为要调试的node命令的第一个参数。   例如：

mongoose.set('useCreateIndex', true)

     

myapp@0.1.0测试：单元C：\ Users \ c-jay \ myapp   vue-cli-service测试：单位

     

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

配置：

• WebStorm 2018.2.4
• Vue CLI v3.0.5

Answer 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"