NG Test 中的调试测试

Question

我正在使用 Angular CLI 和 VSCode，但当我运行时，我的规范文件中的断点似乎都没有被击中

ng test

？

我需要做一些配置吗？

Answer 1

Angular 版本 9 的更新

源文件已被移动，但如果执行以下步骤，您仍然可以通过这种方式进行调试

• 在开发工具中，选择“源”选项卡
• 按 CTRL + P
• 输入要调试的文件名

适用于 9 以下版本

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

运行 ng test，然后运行 f12 并通过 webpack 上下文找到规范文件。添加断点并刷新，它将命中所述断点。根据截图

Answer 2

这对我有用：

• Angular 9.0.6 + Visual Studio 代码 1.43.2
• Angular 8.2.13 + Visual Studio 代码 1.39.2
• Windows 7 上的 Angular 7、Angular CLI 1.0.* 和 Chrome。

---

更改配置文件

在项目根目录中打开

karma.conf.js

。在

singleRun: false

之后添加

,

，然后添加此部分：

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

将配置添加到

.vscode/launch.json

。

• 对于版本 8.* - 9.*（注意

  "pathMapping

  部分！）：

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

• 对于版本 7.*：

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

---

开始调试

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 Code 中选择

   Unit tests

   调试配置并按 F5（“开始调试”按钮）。

5. 按

   Shift+Ctrl+F5

   或刷新 Chrome 窗口以重新运行测试并命中断点。

---

为了方便

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

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

然后下次你想启动

ng test

进行调试时只需运行：

npm run test-debug

---

参考资料：

• 在 VS Code 中调试使用 Karma runner 运行的 Jasmine 单元测试
• 使用 VSCode 调试 Karma 测试
• Angular CLI 8.1.3

  Debug Unit Tests

  配置 - 未经验证的断点
• microsoft/vscode-recipes - 使用 Angular CLI 进行 Chrome 调试

Answer 3

在新版本的 VSCode (1.14.0) 中，他们遵循以下食谱：

您可以完全调试 Angular 应用程序（包括单元测试），方法很简单。

Answer 4

只是添加到其他答案：

• 遵循@titusfx提到的说明。
• 在终端运行

  ng test

  。
• 在 Visual Studio Code 调试视图中，从下拉列表中选择

  ng test

  。
• 如果第一次无法命中断点，您可能需要刷新浏览器。

Answer 5

这是对 Andrei Sinitson 回应的补充

karma.conf.js

在

singleRun: false

之后添加 ，然后添加此部分：

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

package.json

添加新脚本。

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

.vscode/tasks.json

添加配置。

{
    "version": "2.0.0",
    "tasks": [
        ...,
        {
            "label": "Run Test",
            "type": "shell",
            "command": "npm run test-debug",
            "isBackground": true,
            "problemMatcher": {
                "pattern": {
                    "regexp": "^$"
                },
                "background": {
                    "activeOnStart": true,
                    "beginsPattern": "Starting browser Chrome",
                    "endsPattern": "Connected on socket"
                }
            },
            "options": {
                "cwd": "${workspaceFolder}"
            }
        },
        {
            "label": "Close Tests",
            "command": "echo ${input:closePowerSales}",
            "type": "shell",
        }
    ],
    "inputs": [
        {
            "id": "closePowerSales",
            "type": "command",
            "command": "workbench.action.tasks.terminate",
            "args": "terminateAll"
        }
    ]
}

“运行测试”任务执行命令“npm run test-debug”。
“关闭测试”最终完成。

.vscode/launch.json

添加配置。

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

“preLaunchTask”：“运行测试”，在运行调试之前调用“运行测试”任务。
“postDebugTask” 在 VSCode 中按“停止”后关闭任务。

开始调试

只需按“开始调试 (f5)”按钮或在选择“单元测试”时按 f5。

Answer 6

您可以简单地添加一个“调试器” 你想要调试和运行的地方

ng test

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