NG测试中的调试测试

Question

我正在使用Angular CLI和VS代码,但是当我运行测试时,我的spec文件中的所有断点似乎都没有受到影响？

我需要做一些配置吗？

Answer 1

其他答案是完全有效的答案,但现在已经使用Angular大约18个月了,我倾向于在浏览器中使用它 - chrome工具!

运行ng测试然后f12并通过webpack上下文找到spec文件.添加断点并刷新,它将触发所述断点.截至截图

Answer 2

这对我使用Angular CLI 1.0.*和Windows 7上的Chrome有用.

更改配置文件

在你的项目根目录中打开_karma_webpack_.在pathMapping添加.vscode/launch.json后跟随此部分:

    {
      "type": "chrome",
      "request": "attach",
      "name": "Unit tests",
      "address": "localhost",
      "port": 9333,
      "sourceMaps": true,
      "webRoot": "${workspaceFolder}",
      "pathMapping": {
        "/_karma_webpack_": "${workspaceFolder}"
      }
    },

添加配置到karma.conf.js:

    customLaunchers: {
      ChromeDebug: {
        base: 'Chrome',
        flags: [ '--remote-debugging-port=9333' ]
      }
    }

开始调试

1. 跑 singleRun: false

2. 等待Chrome浏览器启动.您将在命令行中看到类似的内容:

       {
         "type": "chrome",
         "request": "attach",
         "name": "Unit tests",
         "address": "localhost",
         "port": 9333,
         "sourceMaps": true,
         "webRoot": "${workspaceFolder}"
       },
   

3. 在其中一个,文件中设置断点.

4. 在Visual Studio Code中选择.vscode/launch.jsondebug configuration并按F5("Start Debugging"按钮).

5. 按ng test --browsers ChromeDebug或刷新Chrome窗口以重新运行测试并点击断点.

为了方便

您还可以修改package.json并添加新脚本:

01 06 2017 16:07:29.276:INFO [launcher]: Launching browser ChromeDebug with unlimited concurrency

然后下次你想开始.spec.ts调试就运行:

"test-debug": "ng test --browsers ChromeDebug",

参考文献:

• 调试在VS Code中使用Karma runner运行的Jasmine Unit测试
• 使用VSCode调试Karma测试

Answer 3

在VSCode(1.14.0)的新版本中,他们遵循以下配方:

您可以完全调试Angular App(包括单元测试),配方很简单.

Answer 4

只是添加到其他答案：

• 按照 @titusfx 提到的说明进行操作。
• 在终端运行ng test.
• 在 Visual Studio Code 调试视图中ng test从下拉列表中选择。
• 如果第一次无法到达断点，您可能需要刷新浏览器。