首页 文章

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

提问于
浏览
1

Question

  • 如何让WebStorm达到断点?

  • 是否需要设置%NODE_DEBUG_OPTION%?如果是,我该如何与vue-cli.service结合使用?

Steps to reproduce:

  • vue创建myapp

  • 将选项设置为:

  • ?请选择预设: Manually select features

  • ?检查项目所需的功能: Babel, Unit

  • ?选择单元测试解决方案: Jest

  • ?你喜欢在哪里为Babel,PostCSS,ESLint等配置? In package.json

  • ?将此保存为未来项目的预设? No

  • 在WebStorm中打开myapp

  • 打开npm工具窗口

  • 在tests / unit / example.spec.js中设置断点

  • 右键单击测试:unit-> Debug test:unit

console output:

要调试“test:unit”脚本,请确保将%NODE_DEBUG_OPTION%字符串指定为您要调试的node命令的第一个参数 . 例如:“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

Configuration:

  • WebStorm 2018.2.4

  • Vue CLI v3.0.5

1 回答

  • 2

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

相关问题