NG测试中的调试测试

Question

我正在使用Angular CLI和VS代码，但是当我运行测试时，我的规范文件中没有任何断点出现？

我需要做一些配置吗？

Answer 1

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

先执行ng test，然后再执行f12并通过webpack上下文找到规范文件。添加一个断点并刷新，它将达到所说的断点。按照屏幕截图

Answer 2

在 VSCode（1.14.0）的新版本中，他们遵循此recipe：

您可以完全调试Angular App（包括单元测试），配方很简单。

Answer 3

这适用于Angular CLI 1.0。*和Windows 7上的Chrome。

更改配置文件

在项目根目录中打开karma.conf.js。在singleRun: false之后添加,，然后是此部分：

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

将配置添加到.vscode/launch.json：

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

开始调试

1. 运行ng test --browsers ChromeDebug

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

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

3. 在您的.spec.ts个文件中设置断点。

4. 在Visual Studio代码中选择Unit tests调试配置，然后按F5（“开始调试”按钮）。

5. 按Shift+Ctrl+F5或刷新Chrome窗口以重新运行测试并点击断点。

为方便起见

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

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

然后下次你想通过调试启动ng test时运行：

npm run test-debug

参考文献：

• Debugging Jasmine Unit tests running with Karma runner in VS Code
• Debugging Karma tests with VSCode

Answer 4

只是添加其他答案：

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

Answer 5

您只需添加一个“调试器” 您要在其中调试和运行的地方

ng test

Chrome浏览器打开后，打开开发工具，它将在您的“调试器”上停止