如何在Visual Studio Code中使用Karma/Jasmine调试单元测试?

编程入门行业动态更新时间:2024-10-23 17:39:14

本文介绍了如何在Visual Studio Code中使用Karma/Jasmine调试单元测试?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

我希望能够在Visual Studio Code中调试单元测试，但到目前为止，情况还很复杂.

I'd like to be able to debug unit tests in Visual Studio Code, but so far it has been a mixed bag.

我的设置:

launch.json

{ "version": "0.2.0", "configurations": [ { "name": "Debug tests", "type": "chrome", "request": "attach", "port": 9222, "sourceMaps": true, "webRoot": "${workspaceRoot}" } ] }

karma.config.js

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

这似乎确实可以用某种方式工作，如果我启动VS Code调试器，它似乎会附上(底部栏变为橙色).如果进行更改，Karma也将启动并启动调试器-但它总是在zone.js(顺便说这是一个Angular项目)中暂停，而无需我进行任何干预:

This does seem to work in a way, if I launch the VS Code debugger it appears to attach (bottom bar turns orange). If I make a change, Karma kicks in and the debugger, too - but it invariably pauses in zone.js (this is an Angular project by the way) without me interfering in any way:

如果我点击继续"，它实际上会达到我的断点

If I hit 'Continue' it actually hits my breakpoint

我可以检查一些变量，但不能检查所有变量，

and I can inspect some variables but not all of them,

例如，我看不到Jasmine的expect方法中传递的actual值.

For example, I can't see the value of actual passed into Jasmine's expect method.

所以a)调试器为什么总是在zone.js内暂停-测试的代码来自Redux reducer，并且在任何Angular上下文外部调用，并且b)关于无法检查本地代码，我缺少了什么变量(现在是排行榜)?

So a) Why does the debugger always pause inside zone.js - the tested code is from a Redux reducer and is invoked outside of any Angular context, and b) What am I missing in regards to not being able to inspect local variables (which is a showstopper right now)?

推荐答案

在karma.conf.js中，我在您的版本中更新了添加的调试选项.

In karma.conf.js I updated added debug option in your version.

customLaunchers: { Chrome_with_debugging: { base: 'Chrome', flags: ['--remote-debugging-port=9222'], debug: true }}

launch.json 在以下代码段中添加作为启动配置，

launch.json Add below snippet as launch configuration,

{ "name": "Debug tests", "type": "chrome", "request": "attach", "port": 9222, "sourceMaps": true, "webRoot": "${workspaceRoot}" }

然后使用以下命令触发测试

Then triggered the tests using below command,

ng test --browsers Chrome_with_debugging

使用Visual Studio Code调试选项调试测试"将其附加到UT.这样，我就可以使用"Visual Studio Code + Debugger for Chrome extension"中的断点来调试单元测试.

Use Visual Studio Code debug option "Debug tests" to get attached to UT. With this I am able to debug unit tests using breakpoints in "Visual Studio Code + Debugger for Chrome extension".