在 Visual Studio Code 中进行测试
软件测试是软件开发过程中至关重要的一环。它有助于确保代码按预期工作,并在开发周期的早期发现错误。Visual Studio Code 提供了一系列丰富的功能用于测试你的代码。你可以自动发现项目中的测试,运行和调试测试,并获取测试覆盖率结果。
在本文中,你将学习如何在 VS Code 中开始测试,发现流行的测试扩展,并探索测试功能。
在 VS Code 中开始测试
VS Code 中的测试支持是特定于语言的,取决于你安装的扩展。语言扩展或独立扩展可以实现特定语言或测试框架的测试功能。要在 VS Code 中开始测试,首先安装适合你项目的扩展。
安装扩展后,你可以开始在项目中发现和运行测试。 测试资源管理器提供了一个中心位置来管理和运行你的测试。
运行测试后,你可以在测试资源管理器视图、编辑器边栏和测试结果面板中查看测试结果。为诊断测试问题,你还可以运行和调试测试,并在测试和应用程序代码中设置断点。
你还可以运行测试并查看覆盖率,了解你的代码覆盖了多少测试。测试覆盖率有助于识别未被测试的代码区域,确保测试全面。你可以在编辑器和测试覆盖率面板中不同的视图中查看测试覆盖率结果。
要优化测试工作流,你可以创建任务来运行测试,并可选择在每次代码变化时后台运行测试。
测试扩展
你可以通过在 Visual Studio Marketplace 寻找支持测试的扩展。你也可以转到扩展视图(Ctrl+Shift+X
),并通过 Testing 类别进行筛选。
提示: 上面显示的扩展是动态查询的。选择一个扩展小块以阅读描述和评论,决定哪个扩展最适合你。
测试资源管理器中的自动测试发现
测试资源管理器视图提供了一个中心位置来管理和运行你的测试。你可以通过在活动栏中选择烧杯图标或使用命令面板中的 Testing: Focus on Test Explorer View 命令(Ctrl+Shift+P
)访问测试资源管理器视图。
如果你的项目中有测试,测试资源管理器视图会发现并列出工作区中的测试。默认情况下,发现的测试以树状视图显示在测试资源管理器中。树状视图匹配你的测试的层次结构,使得导航和运行测试更加容易。
你可以通过选择播放按钮从测试资源管理器运行测试。了解更多关于运行和调试测试的内容,请参见运行和调试测试部分。
树状视图通过用视觉指示器显示每个测试的测试结果状态,使你能够运行和调试测试,并导航到测试代码。
提示: 你可以通过双击测试资源管理器视图中的测试导航到测试代码。如果选择一个失败的测试,编辑器会打开测试文件,突出显示失败的测试,并显示错误消息。
如果你有很多测试,可以使用筛选选项快速找到感兴趣的测试。你可以使用 Filter 按钮按状态筛选测试或仅显示当前文件的测试。你还可以使用搜索框按名称搜索特定测试或使用 @
符号按状态搜索。
在 更多操作 菜单中,你可以访问其他功能,例如排序和显示选项。
如果添加了新测试或对测试进行了更改,使用 刷新测试 按钮刷新测试资源管理器中的测试列表。你也可以使用命令面板中的 Test Explorer: Reload tests 命令(Ctrl+Shift+P
)。
注意: 根据测试扩展,你可能需要先配置测试框架或测试运行器,以发现项目中的测试。请查阅测试扩展的文档以获取更多信息。
运行和调试测试
在项目中发现测试后,你可以运行和调试测试,并直接在 VS Code 中查看测试结果。你有多种运行和调试测试的选项:
- 使用测试资源管理器视图中的操作运行所有或部分测试
- 使用编辑器边栏中的控件在编辑测试代码时运行测试
- 使用命令面板中的命令运行测试(
Ctrl+Shift+P
)
在测试资源管理器中,使用节标题中的控件运行或调试所有测试。你还可以通过选择测试名称旁边的播放或调试图标运行或调试单个测试。在树状视图中,当你选择对特定节点进行运行或调试时,所有该节点下的测试都会被运行或调试。
在查看测试代码时,你可以使用边栏中的播放控件运行当前光标位置的测试。右键点击边栏控件查看其他操作,如调试测试。
提示: 你可以通过
setting(testing.defaultGutterClickAction)
设置配置默认的边栏控件测试操作。
运行测试后,编辑器边栏会显示测试状态。
运行测试时,测试结果状态会显示在测试资源管理器视图和编辑器边栏中。测试结果用颜色编码,以指示测试状态(通过或失败)。当测试失败时,测试错误消息会在编辑器中作为叠加显示。
使用 显示输出 按钮在测试资源管理器中查看测试输出,在 测试结果 面板中查看。
你可以通过命令面板访问测试资源管理器的命令,如运行或调试测试(Ctrl+Shift+P
)。输入 Test Explorer:
找到相应的命令。
测试覆盖率
测试覆盖率衡量了你的代码被测试覆盖的程度。它有助于识别未被测试的代码区域。VS Code 支持运行测试并查看覆盖率结果,前提是相应的测试扩展支持测试覆盖率。
类似于运行和调试测试,你可以通过测试资源管理器视图、编辑器边栏或命令面板中的命令运行覆盖率测试(kb(workbench.action.showCommands)
)。
运行覆盖率测试后,你可以在不同位置查看覆盖率结果:
-
在测试覆盖率视图
树状视图显示带有覆盖率百分比的测试。颜色指示器也提供了覆盖率百分比的视觉提示。悬停在每行上以查看更多关于覆盖率结果的详细信息。
-
在编辑器中的覆盖层
对于有测试覆盖率的代码文件,编辑器会在边栏显示颜色覆盖,以指示哪些行被测试覆盖或未被覆盖。当你悬停在边栏时,注意到对于覆盖的行,还有一个指示器显示该行执行的次数。你也可以选择编辑器标题栏中的 显示内联覆盖 按钮或使用 测试: 显示内联覆盖 命令(
Ctrl+; Ctrl+Shift+I
) 切换覆盖层。 -
在资源管理器视图中显示代码文件的覆盖率百分比
资源管理器视图显示代码文件的覆盖率百分比。悬停在资源管理器中的文件或节点上查看更多关于覆盖率结果的详细信息。
-
在差异编辑器中
如果你打开了差异编辑器,覆盖率结果也会在差异编辑器中显示,类似于在编辑器中的显示方式。
任务集成
VS Code 中的任务可以配置为运行脚本和启动进程,无需进入命令行或编写新代码。在 VS Code 中,你可以定义一个默认测试任务来运行你的测试,并可选择创建键盘快捷键来运行测试。
使用命令 Tasks: Configure Default Test Task 配置默认测试任务。VS Code 会尝试基于你的 package.json
文件自动检测测试任务。选择默认测试任务后,tasks.json
文件将会打开供你自定义任务。
以下代码片段显示了一个 tasks.json
文件,指定了 node --test
命令作为默认测试任务。
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "test",
"group": {
"kind": "test",
"isDefault": true
},
"problemMatcher": [],
"label": "npm: test",
"detail": "node --test src/tests/**.js"
}
]
}
要运行测试任务,使用命令 Tasks: Run Test Task 或者创建键盘快捷键 来运行相应的命令。
了解更多关于使用和配置任务 的内容。
注意:目前,任务没有特别集成到 VS Code 的测试功能中,因此在任务中运行测试不会更新用户界面。个别的测试扩展可以提供特定的测试自动化功能,并与 UI 集成。
测试配置设置
你可以配置多个设置来自定义 VS Code 中的测试体验。每个语言扩展可能提供额外的特定语言测试设置。以下是一些可以配置的常见设置:
设置 ID | 详情 |
---|---|
setting(testing.countBadge) | 控制活动栏上测试图标上的计数徽章 |
setting(testing.gutterEnabled) | 配置是否在编辑器边栏显示测试控件 |
setting(testing.defaultGutterClickAction) | 配置选择边栏测试控件时的默认动作 |
setting(testing.coverageBarThresholds) | 配置测试覆盖率视图中覆盖率条的颜色阈值 |
setting(testing.displayedCoveragePercent) | 配置在测试覆盖率视图中显示的覆盖率百分比(总计、语句或最低覆盖率) |
setting(testing.showCoverageInExplorer) | 配置是否在资源管理器视图中显示覆盖率百分比 |
你可以在设置编辑器中找到所有与测试相关的设置(Ctrl+,
)。