试试 VS Code 中的

测试

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

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

提示

如果你还没有 Copilot 订阅,可以通过注册 Copilot Free 计划免费使用 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)) 中使用 Testing: Focus on Test Explorer View 命令。

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

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)) 中使用 Test Explorer: Reload tests 命令。

注意

根据测试扩展的不同,你可能需要先配置测试框架或测试运行器以发现项目中的测试。有关更多信息,请查阅测试扩展的文档。你可以在 Copilot 聊天视图中使用命令 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 文档中获取更多生成单元测试mock 对象端到端测试的提示示例。

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 配置边缘控件的默认测试操作。

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

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

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

Test Results panel

提示

Copilot 可以帮助你修复失败的测试。在测试资源管理器中,将鼠标悬停在树状视图上,然后选择修复测试失败按钮(闪烁),Copilot 将建议修复失败测试的方法。或者,在 Copilot 聊天中输入命令 /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

  • 作为编辑器中的覆盖层

    对于具有测试覆盖率的代码文件,编辑器会在边缘显示颜色覆盖层,以指示哪些行被测试覆盖。将鼠标悬停在边缘上时,请注意对于已覆盖的行,还会有一个指示器显示该行执行的次数。你还可以选择编辑器标题栏中的显示内联覆盖率按钮,或使用 Test: Show Inline Coverage 命令 (⌘; ⇧⌘I (Windows, Linux Ctrl+; Ctrl+Shift+I)) 切换覆盖层。

    View coverage in editor

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

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

    View coverage in Explorer view

  • 在差异编辑器中

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

任务集成

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

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

后续步骤