现已推出!阅读 10 月份的新功能和修复。

测试

软件测试是软件开发过程中的一个重要方面。它有助于确保您的代码按预期工作,并在开发周期早期发现错误。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+,))

下一步