现已发布!阅读有关 11 月份新功能和修复的信息。

测试

软件测试是软件开发过程中的一个重要方面。它有助于确保您的代码按预期工作,并在开发周期的早期发现错误。Visual Studio Code 提供了一组丰富的功能来测试您的代码。您可以自动发现项目中的测试,运行和调试测试,并获得测试覆盖率结果。

在本文中,您将学习如何在 VS Code 中开始进行测试、发现流行的测试扩展,并探索测试功能。

Testing in Visual Studio Code

开始在 VS Code 中进行测试

VS Code 中的测试支持特定于语言,并取决于您安装的扩展。语言扩展或独立扩展可以为特定语言或测试框架实现测试功能。要开始在 VS Code 中进行测试,请首先为您的项目安装相应的扩展。

安装扩展后,您可以开始发现和运行项目中的测试。测试资源管理器提供了一个集中管理和运行测试的位置。

运行测试后,您可以在“测试资源管理器”视图、编辑器装订线和“测试结果”面板中查看测试结果。要诊断测试问题,您还可以运行和调试测试并在测试和应用程序代码中设置断点。

您还可以运行具有覆盖率的测试,以查看您的代码有多少被测试覆盖。测试覆盖率有助于您识别代码中未被测试覆盖的区域,并确保您的测试是全面的。您可以在编辑器和“测试覆盖率”面板的不同视图中查看测试覆盖率结果。

要优化测试工作流,您可以创建任务以运行测试,并可以选择在每次代码更改时在后台运行测试。

测试扩展

您可以通过在 Visual Studio Marketplace 中查找来找到支持测试的扩展。您也可以转到“扩展”视图(⇧⌘X (Windows、Linux Ctrl+Shift+X)),并按“测试”类别进行筛选。

提示:上面显示的扩展是动态查询的。选择一个扩展磁贴以阅读描述和评论,以确定哪个扩展最适合您。

测试资源管理器中的自动测试发现

“测试资源管理器”视图提供了一个集中管理和运行测试的位置。您可以通过选择活动栏中的烧杯图标或使用命令面板中的“测试:聚焦于测试资源管理器视图”命令(⇧⌘P (Windows、Linux Ctrl+Shift+P))访问“测试资源管理器”视图。

如果您的项目有测试,“测试资源管理器”视图会发现并列出工作区中的测试。默认情况下,发现的测试会以树状视图显示在“测试资源管理器”中。树状视图与测试的层次结构匹配,使您可以轻松地导航和运行测试。

Test Explorer view

您可以通过选择播放按钮从“测试资源管理器”运行测试。有关运行和调试测试的更多信息,请参阅运行和调试测试部分。

树状视图使用视觉指示器显示每个测试的测试结果状态,并允许您运行和调试测试以及导航到测试代码。

Test Explorer view with test results

提示:您可以通过在“测试资源管理器”视图中双击测试来导航到测试代码。如果选择失败的测试,编辑器会打开测试文件,突出显示失败的测试并显示错误消息。

如果您有许多测试,则可以使用筛选选项快速找到您感兴趣的测试。您可以使用“筛选器”按钮按状态筛选测试或仅显示当前文件的测试。您还可以使用搜索框按名称搜索特定测试或使用 @ 符号按状态搜索。

Test Explorer view with filtering options

在“更多操作”菜单中,您可以访问其他功能,例如排序和显示选项。

如果您添加新测试或对测试进行更改,请使用“刷新测试”按钮刷新“测试资源管理器”中的测试列表。您还可以使用命令面板中的“测试资源管理器:重新加载测试”命令(⇧⌘P (Windows、Linux Ctrl+Shift+P))。

注意:根据测试扩展,您可能首先需要配置测试框架或测试运行程序以发现项目中的测试。有关更多信息,请参阅测试扩展的文档。

运行和调试测试

发现项目中的测试后,您可以运行和调试测试,并直接在 VS Code 中查看测试结果。您有多种选项可以运行和调试测试

  • 使用“测试资源管理器”视图中的操作运行全部或部分测试
  • 在编辑测试代码时,使用编辑器装订线中的控件运行测试
  • 使用命令面板中的命令运行测试(⇧⌘P (Windows、Linux Ctrl+Shift+P)

在“测试资源管理器”中,使用节标题中的控件来运行或调试所有测试。您还可以通过选择测试名称旁边的播放或调试图标来运行或调试单个测试。在树状视图中,当您选择在特定节点上运行或调试时,将运行或调试该节点下的所有测试。

Run and debug tests in Test Explorer

当您在编辑器中查看测试代码时,可以使用装订线中的播放控件来运行当前光标位置的测试。右键单击装订线控件可查看其他操作,例如调试测试。

Run and debug tests in editor gutter

提示:您可以使用 testing.defaultGutterClickAction 设置配置装订线控件的默认测试操作。

运行测试后,编辑器装订线会显示测试状态。

当您运行测试时,测试结果状态会显示在“测试资源管理器”视图和编辑器装订线中。测试结果会以颜色编码,以指示测试的状态(通过或失败)。当测试失败时,请注意,测试错误消息会作为覆盖图显示在编辑器中。

使用“测试资源管理器”中的显示输出按钮,以在测试结果面板中查看测试输出。

Test Results panel

您可以通过命令面板(⇧⌘P (Windows、Linux Ctrl+Shift+P)访问“测试资源管理器”的命令,例如运行或调试测试。输入 Test Explorer: 以查找相应的命令。

测试覆盖率

测试覆盖率衡量的是您的代码有多少被测试覆盖。它可以帮助您识别代码中未被测试的区域。如果相应的测试扩展支持测试覆盖率,则 VS Code 支持运行带有覆盖率的测试并查看覆盖率结果。

与运行和调试测试类似,您可以使用“测试资源管理器”视图中的操作、编辑器装订线或命令面板中的命令(⇧⌘P (Windows、Linux Ctrl+Shift+P)运行带有覆盖率的测试。

Run tests with coverage

运行带有覆盖率的测试后,您可以在不同的位置查看覆盖率结果。

  • 在测试覆盖率视图中

    树状视图显示测试及其覆盖率百分比。颜色指示器还提供有关覆盖率百分比的视觉提示。将鼠标悬停在每一行上,以查看有关覆盖率结果的更多详细信息。

    Test Coverage view

  • 作为编辑器中的覆盖图

    对于具有测试覆盖率的代码文件,编辑器会在装订线中显示颜色覆盖图,以指示哪些行被测试覆盖,哪些行未被测试覆盖。当您将鼠标悬停在装订线上时,请注意,对于覆盖的行,还会指示该行被执行的次数。您还可以选择编辑器标题栏中的显示内联覆盖率按钮,或使用 测试: 显示内联覆盖率 命令(⌘; ⇧⌘I (Windows、Linux Ctrl+; Ctrl+Shift+I)来切换覆盖率覆盖图。

    View coverage in editor

  • 在“资源管理器”视图中,其中显示了代码文件的覆盖率百分比

    “资源管理器”视图显示了代码文件的覆盖率百分比。将鼠标悬停在“资源管理器”中的文件或节点上,以查看有关覆盖率结果的更多详细信息。

    View coverage in Explorer view

  • 在差异编辑器中

    如果您打开了差异编辑器,则覆盖率结果也会显示在差异编辑器中,与它们在编辑器中的显示方式类似。

任务集成

可以配置 VS Code 中的任务以运行脚本并在 VS Code 中启动进程,而无需输入命令行或编写新代码。在 VS Code 中,您可以定义一个运行测试的默认测试任务,并且可以选择创建键盘快捷键来运行测试。

使用命令任务: 配置默认测试任务来配置默认测试任务。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"
    }
  ]
}

要运行测试任务,请使用命令 任务: 运行测试任务 或为该命令创建键盘快捷键

了解有关使用和配置任务的更多信息。

注意:目前,任务没有与 VS Code 测试功能的特殊集成,因此在任务中运行测试不会更新用户界面。各个测试扩展可以提供集成在 UI 中的特定测试自动化功能。

测试配置设置

您可以配置多个设置来自定义 VS Code 中的测试体验。每个语言扩展都可能提供特定于该语言中测试的其他设置。以下是一些您可以配置的常见设置

设置 ID 详细信息
testing.countBadge 控制活动栏上“测试”图标上的计数徽章
testing.gutterEnabled 配置是否在编辑器装订线中显示测试控件
testing.defaultGutterClickAction 配置选择装订线测试控件时的默认操作
testing.coverageBarThresholds 配置“测试覆盖率”视图中覆盖率条阈值的颜色
testing.displayedCoveragePercent 配置“测试覆盖率”视图中显示的百分比值(总计、语句或最小值)
testing.showCoverageInExplorer 配置是否在“资源管理器”视图中显示覆盖率百分比

您可以在“设置”编辑器中找到所有与测试相关的设置(⌘, (Windows、Linux Ctrl+,)。

后续步骤