测试

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

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

提示

如果你还没有 Copilot 订阅,可以通过注册 Copilot 免费计划免费使用 Copilot。你将获得每月的行内建议和 AI 额度。

关于 VS Code 中的测试

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

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

  • 支持多种测试框架:语言扩展和独立的测试扩展为各种语言和测试运行程序(如 Jest、Mocha、Pytest、JUnit 等)提供支持。

  • 集中式测试管理测试资源管理器 (Test Explorer) 提供了一个集中管理和运行项目中测试的地方。根据测试扩展的不同,测试资源管理器可能会自动发现项目中的测试。

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

  • 调试调试测试以诊断测试失败的原因。充分利用 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.

你可以通过选择播放按钮从测试资源管理器中运行测试。在运行和调试测试一节中了解有关运行和调试测试的更多信息。

提示

通过在测试资源管理器视图中双击测试来导航到测试代码。如果你选择了一个失败的测试,编辑器将打开测试文件,高亮显示失败的测试,并显示错误消息。

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

Test Explorer view with filtering options

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

如果你添加了新测试或更改了测试,请使用刷新测试 (Refresh Tests) 按钮刷新测试资源管理器中的测试列表。你还可以在命令面板(⇧⌘P(Windows、Linux Ctrl+Shift+P)中使用Test Explorer: Reload tests 命令。

注意

根据测试扩展的不同,你可能需要先配置测试框架或测试运行程序以发现项目中的测试。有关详细信息,请参阅测试扩展的文档。你可以在 Copilot “聊天”视图中使用 setupTests 命令获取有关为项目设置测试框架的帮助。

使用 AI 编写测试

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

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

  • 编辑器智能操作

    1. (可选)选择一块应用程序代码

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

  • 聊天提示词

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

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

    3. 输入用于生成测试的提示词,例如:为这段代码生成测试。同时包含针对边界情况的测试。

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

      提示

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

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 中打开 设置为行号槽控件配置默认测试操作。

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

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

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

Test Results panel

提示

Copilot 可以帮你修复失败的测试。在测试资源管理器中,将鼠标悬停在树状视图上,选择修复测试失败 (Fix Test Failure) 按钮(闪烁图标),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

  • 作为编辑器中的覆盖层

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

    View coverage in editor

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

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

    View coverage in Explorer view

  • 在差异编辑器 (diff editor) 中

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

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

    编辑器中的“测试覆盖率”工具栏显示测试覆盖率结果,允许你在未覆盖的代码块之间导航,以及切换行内覆盖率。使用 testing.coverageToolbarEnabled 在 VS Code 中打开 在 VS Code Insiders 中打开 设置启用“测试覆盖率”工具栏。

    Test Coverage toolbar

任务集成

可以将 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 或为该命令创建键盘快捷方式

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

注意

目前,任务没有与 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+,)中找到所有与测试相关的设置。

下一步计划

English 한국어 中文(简体) 中文(繁體)
© . This website operates independently and is not affiliated with or endorsed by Microsoft. All brand names, logos, and trademarks are the property of their respective owners.