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

测试

Visual Studio Code 为测试代码提供了丰富的功能集。您可以自动发现项目中的测试、运行和调试测试,并获取测试覆盖率结果。VS Code 中的 GitHub Copilot 可以帮助您设置项目的测试框架,并帮助您生成测试代码和修复失败的测试。

在本文中,您将了解如何在 VS Code 中开始使用测试、查找流行的测试扩展以及探索测试功能。您还将了解 VS Code 中的 Copilot 如何帮助您更快地编写测试,以及如何协助您修复失败的测试。

提示

如果您还没有 Copilot 订阅,可以通过注册 Copilot 免费计划来免费使用 Copilot。您将获得每月的行内建议和聊天交互限制。

关于 VS Code 中的测试

VS Code 中的测试支持是特定于语言的,并且取决于您安装的 测试扩展。语言扩展或独立扩展可以为特定语言或测试框架实现测试功能。

VS Code 具有以下用于测试代码的功能

  • 支持多种测试框架:语言 扩展和独立测试扩展为各种语言和测试运行器提供支持,例如 Jest、Mocha、Pytest、JUnit 等。

  • 集中式测试管理测试资源管理器提供了一个集中位置来管理和运行项目中的测试。测试资源管理器可能会根据测试扩展自动发现项目中的测试。

  • 集成测试结果:在编辑器中与测试代码并排查看行内测试状态,或在测试资源管理器中查看所有测试。详细的测试结果可在“测试结果”面板中查看。

  • 调试调试您的测试以诊断测试失败。利用 VS Code 中丰富的 调试支持,例如断点、监视变量等。

  • 测试覆盖率运行带覆盖率的测试以查看代码中有多少被测试所覆盖。

  • AI 辅助测试:在 VS Code 中使用 GitHub Copilot 协助您设置测试框架、生成测试代码和修复失败的测试。

  • 任务集成:通过创建任务来运行测试,使您的测试工作更轻松。您还可以在更改代码时在后台运行测试。

在 VS Code 中开始使用测试

要在 VS Code 中开始使用测试,请按照以下步骤操作

  1. 打开“扩展”视图,为您的项目安装一个测试扩展。按 测试 类别筛选扩展 (@category:"testing")。

  2. 选择活动栏中的烧杯图标 () 以打开“测试资源管理器”并发现项目中的测试。

  3. 从“测试资源管理器”或直接从编辑器运行和调试测试。

测试扩展

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

提示

Copilot 可以协助设置测试框架并建议相关的测试扩展。打开“聊天”视图 (⌃⌘I (Windows, Linux Ctrl+Alt+I)),输入 /setupTests 命令,Copilot 将指导您完成配置项目的过程。

测试视图中的自动测试发现

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

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

Screenshot that shows VS Code with the Test Explorer showing the tests, matching the test code that is shown in the editor.

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

提示

您可以通过在“测试资源管理器”中选择播放按钮来运行测试。在 运行和调试测试 部分了解有关运行和调试测试的更多信息。

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

Test Explorer view with filtering options

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

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

注意

根据测试扩展的不同,您可能需要先配置测试框架或测试运行器来发现项目中的测试。有关更多信息,请参阅测试扩展的文档。您可以在 Copilot Chat 视图中使用 setupTests 命令来获取有关为项目设置测试框架的帮助。

使用 AI 编写测试

编写测试可能很耗时,而且经常被忽略。Copilot 可以通过为您的应用程序创建测试代码来加快编写测试的过程。您可以使用它来编写单元测试、集成测试、端到端测试等。

要在 VS Code 中使用 Copilot 编写测试,您可以使用以下两种方法之一

  • 编辑器智能操作

    1. 可选地,选择一个应用程序代码块

    2. 在编辑器中右键单击,然后选择 Copilot > 生成测试

  • 聊天提示

    1. 打开要为其生成测试的应用程序代码文件

    2. 打开 Copilot 编辑 ()、聊天视图 (⌃⌘I (Windows, Linux Ctrl+Alt+I)) 或编辑器行内聊天 (⌘I (Windows, Linux Ctrl+I))

    3. 输入提示以生成测试,例如 为此代码生成测试。还包括边缘情况的测试。

      通过在提示中输入 #file 为您的提示添加额外上下文。例如,为这段代码生成测试 #file:calculator.js

      提示

      在 GitHub Copilot 文档中获取有关生成单元测试创建模拟对象创建端到端测试的更多示例提示。

Copilot 将为您的应用程序代码生成测试用例代码。如果您已有测试文件,Copilot 将把测试添加到其中,或根据需要创建新文件。您可以通过向 Copilot 提供更多提示来进一步自定义生成的测试。例如,您可以要求 Copilot 使用其他测试框架。

提示

您可以向 Copilot 提供自己的生成代码的特殊说明。例如,您可以告诉 Copilot 使用特定的测试框架、命名约定或代码结构。

了解有关在 VS Code 中使用 Copilot 的更多信息。

运行和调试测试

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

在“测试资源管理器”中,使用标题部分中的控件来运行或调试所有测试。您也可以通过在特定节点上选择运行/调试图标来运行或调试树状视图中的特定测试。

Run and debug tests in Test Explorer

在编辑器中查看测试代码时,使用编辑器装订线中的播放控件来运行该位置的测试。

Run and debug tests in editor gutter

右键单击装订线控件以查看其他操作,例如调试测试。

提示

通过使用 配置装订线控件的默认测试操作

testing.defaultGutterClickAction
  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
设置来指定 VS Code 应该查找技能的自定义路径。

运行一个或多个测试后,编辑器装订线和“测试资源管理器”中的树状视图将显示相应的测试状态(通过/失败)。当测试失败时,请注意测试错误消息会作为覆盖层显示在编辑器中。

Screenshot that shows a test error message overlay in the editor.

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

Test Results panel

提示

Copilot 可以帮助您修复失败的测试。在“测试资源管理器”中,将鼠标悬停在树状视图上,然后选择 修复测试失败 按钮(闪光),Copilot 将建议修复失败测试的方法。或者,在 Copilot Chat 中输入 /fixTestFailure 命令。

Screenshot showing the Test Explorer, highlighting the "Fix Test Failure" button, and the editor that shows a suggestion from Copilot on how to fix the failing test.

测试覆盖率

测试覆盖率是衡量您的测试覆盖了多少代码的指标。它有助于识别未被测试的代码区域。如果相应的测试扩展支持测试覆盖率,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

  • 在差异编辑器中

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

  • 在“测试覆盖率”工具栏中

    编辑器中的“测试覆盖率”工具栏显示测试覆盖率结果,让您可以导航到未覆盖的代码块,并切换行内覆盖率。使用 启用“测试覆盖率”工具栏

    testing.coverageToolbarEnabled
    • 在 VS Code 中打开
    • 在 VS Code Insiders 中打开
    设置来指定 VS Code 应该查找技能的自定义路径。

    Test Coverage toolbar

任务集成

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
  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
控制活动栏上“测试”图标上的计数徽章
testing.gutterEnabled
  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
配置是否在编辑器装订线上显示测试控件
testing.defaultGutterClickAction
  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
配置选择装订线测试控件时的默认操作
testing.coverageBarThresholds
  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
配置“测试覆盖率”视图的覆盖率条形图阈值的颜色
testing.displayedCoveragePercent
  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
配置在“测试覆盖率”视图中显示的百分比值(总数、语句或最小值)
testing.showCoverageInExplorer
  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
配置是否在“资源管理器”视图中显示覆盖率百分比

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

后续步骤

© . This site is unofficial and not affiliated with Microsoft.