测试

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

在本文中,你将学习如何开始在 VS Code 中进行测试,寻找流行的测试扩展,并探索测试功能。你还会学到Copilot在VS Code中如何帮助你更快写测试,并帮助你修复失败的测试。

提示

如果您还没有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市场找到支持测试的扩展。你也可以进入扩展视图(⇧⌘X(Windows,Linux Ctrl+Shift+X),并按测试类别筛选。

提示

Copilot 可以协助搭建测试框架并建议相关的测试扩展。打开聊天视图(⌃⌘I(Windows,Linux Ctrl+Alt+I),输入/setupTestscommand,Copilot 会引导你完成项目配置过程。

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

测试视图提供了一个集中管理和运行测试的地方。你可以在活动栏中选择烧杯图标()进入测试视图。你也可以在命令面板中使用“测试:专注于测试资源管理器视图”命令(⇧⌘P(Windows,Linux Ctrl+Shift+P)。

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

截图显示了VS代码,测试资源管理器显示了测试内容,和编辑器中显示的测试代码相匹配。

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

提示

在测试资源管理器视图中双击测试,即可进入测试代码。如果你选择了失败的测试,编辑器会打开测试文件,高亮该测试失败的测试,并显示错误信息。

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

带有过滤选项的测试资源管理器视图

“更多作”菜单中,你可以访问更多功能,如排序和显示选项。

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

注释

根据测试扩展的不同,你可能首先需要配置测试框架或测试运行工具来发现项目中的测试。欲了解更多信息,请参阅测试扩展的文档。你可以使用设置测试在Copilot Chat视图中按命令,帮助你为项目搭建测试框架。

用AI编写测试

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

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

  • 编辑器智能作

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

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

  • 聊天提示

    1. 打开你想生成测试的应用代码文件

    2. 打开副驾驶编辑()、聊天视图(⌃⌘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 内查看测试结果。

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

在测试资源管理器中运行和调试测试

当你在编辑器中查看测试代码时,使用编辑器下线的播放控制键在该位置运行测试。

在编辑器下层运行和调试测试

右键点击排水沟控制以查看其他作,例如调试测试。

提示

通过使用

testing.defaultGutterClickAction(测试)
  • 在VS代码中打开
  • 在VS Code Insiders中开放
环境。

运行一个或多个测试后,编辑器的 gutter 和 视图会显示对应的测试状态(通过/失败)。当测试失败时,注意测试错误信息会在编辑器中以叠加形式显示。

截图显示编辑器中测试错误信息叠加。

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

测试结果小组

提示

Copilot 可以帮助你修复失败的测试。在测试资源管理器中,将鼠标悬停在树状视图上,选择“修复测试失败”按钮(闪烁),Copilot 会建议针对失败测试的修复方案。或者,输入/fixTestFailure(修正测试失败)在副驾驶聊天中指挥。

截图显示测试资源管理器,突出“修复测试失败”按钮,以及显示Copilot关于如何修复失败测试的编辑器。

测试覆盖范围

测试覆盖率是衡量你代码中测试覆盖的比例。它帮助你识别代码中未被测试的部分。VS Code 支持运行带有覆盖范围的测试,并在相应的测试扩展支持测试覆盖时查看覆盖结果。

你可以运行有覆盖率的测试,就像你可以运行和调试测试一样。使用测试资源管理器视图中的相应作、编辑器的编辑槽,或命令面板中的命令(⇧⌘P(Windows,Linux Ctrl+Shift+P)。

在覆盖范围内运行测试

在你进行覆盖测试后,你可以查看不同地点的覆盖结果:

  • 在测试覆盖视图中

    树状视图显示测试及其覆盖率百分比。颜色指示器还提供覆盖率的视觉提示。将鼠标悬停在每条线上可查看覆盖率的更多细节。

    测试覆盖视图

  • 作为编辑器中的叠加层

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

    在编辑器中查看报道

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

    资源管理器视图显示代码文件的覆盖百分比。将鼠标悬停在浏览器中的文件或节点上,可查看覆盖结果的更多细节。

    在Explorer视图中查看覆盖

  • 在差异编辑器中

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

  • 在测试覆盖率工具栏中

    编辑器中的测试覆盖工具栏显示测试覆盖率结果,允许你在未覆盖的代码块之间导航,并切换内联覆盖。启用测试覆盖工具栏

    testing.coverageToolbarEnabled
    • 在VS代码中打开
    • 在VS Code Insiders中开放
    环境。

    测试覆盖率工具栏

任务集成

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

使用命令“任务:配置默认测试任务”来配置默认测试任务。VS Code 尝试自动检测测试任务,例如基于你的package.json文件。在选择默认测试任务后,tasks.json文件会打开,供你自定义任务。

以下代码片段显示了tasks.json指定节点 --测试命令作为默认测试任务。

{
  "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.count徽章
  • 在VS代码中打开
  • 在VS Code Insiders中开放
控制活动栏测试图标上的计数徽章
testing.gutterEnabled
  • 在VS代码中打开
  • 在VS Code Insiders中开放
配置是否在编辑器的下槽中显示测试控件
testing.defaultGutterClickAction(测试)
  • 在VS代码中打开
  • 在VS Code Insiders中开放
选择排水沟测试控制时配置默认作
testing.coverageBar阈值
  • 在VS代码中打开
  • 在VS Code Insiders中开放
为测试覆盖率视图配置覆盖条阈值的颜色
testing.displayedCoveragePercent
  • 在VS代码中打开
  • 在VS Code Insiders中开放
配置测试覆盖率视图中显示的百分比值(总百分比、语句或最小值)
testing.showCoverageInExplorer
  • 在VS代码中打开
  • 在VS Code Insiders中开放
配置是否在资源管理器视图中显示覆盖百分比

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

下一步