WebStorm 2025.2 Help

Vitest

WebStorm 集成了 Vitest ,这是一款 Vite 原生的单元测试框架。 您可以在编辑器中或通过运行/调试配置来运行、调试、进行快照测试以及衡量测试覆盖率。

您可以重新运行失败的测试或启用 watch 模式。 在此模式下启动测试会话时,WebStorm 会监视项目源代码中的更改。 一旦测试或其被测对象发生任何更改,WebStorm 会重新运行受影响的测试,甚至无需重新启动运行/调试配置。

开始之前

  • 请确保您的计算机上已安装 Node.js

安装 Vitest

  • 在嵌入的 终端Alt+F12 )中输入:

    npm install --save-dev vitest

请参阅 Vitest 官方网站上的 入门指南配置 Vitest以了解更多信息。

运行和调试测试

使用 WebStorm,您可以直接在编辑器中快速运行或调试单个 Vitest 测试,也可以创建运行/调试配置来运行或调试部分或全部测试。

有关为 JavaScript 与 TypeScript 编写 Vitest 测试的更多信息,请参阅 Vitest 官方网站上的 Vitest 功能

从编辑器运行或调试单个测试

  • 在边距中单击 运行图标重新运行图标 ,然后从列表中选择 运行 <test_name>

    从编辑器运行一个 Vitest 测试

    您还可以直接在编辑器中查看测试是否通过或失败,这要归功于边距中的 测试状态图标 测试通过测试未通过

  • 要调试测试,请在其中 设置断点 ,在边距中单击 运行图标重新运行图标 并从列表中选择 调试 <test_name>

    从编辑器调试一个 Vitest 测试

    调试 工具窗口中, 检查已挂起的测试单步执行

    Vitest 调试会话

创建 Vitest 运行配置

  1. 打开 运行/调试配置对话框(运行 | 编辑配置 主菜单中),在左侧面板中单击 添加按钮 ,然后从列表中选择 Vitest。 将打开 运行/调试配置:Vitest 对话框。

  2. 请指定要使用的 Node.js 解释器。

    如果选择 项目 别名,WebStorm 会自动使用 Node 解释器 字段中在 Node.js 页面上配置的项目默认解释器。 在大多数情况下,WebStorm 会检测到项目默认解释器并自动填写该字段。

    您还可以选择另一个已配置的本地或远程解释器,或单击 浏览按钮 来配置一个新解释器。

    有关更多信息,请参阅 配置远程 Node.js 解释器配置本地 Node.js 解释器在 Windows 子系统 Linux 上使用 Node.js

    您可以选择性地指定 Node.js 特定的选项参数以及传递给 Node.js 的 环境变量

  3. 请指定 vitest 包的位置。

  4. 指定应用程序的工作目录。 默认情况下, 工作目录 字段会显示项目根文件夹。 要更改此预定义设置,请指定所需文件夹的路径。

  5. 指定要运行的测试。 可以是某个特定测试或套件、完整测试文件,或包含测试文件的文件夹。

  6. 默认情况下使用 vite.config.ts 。 如果缺少 vite.config.ts ,或者您想使用自定义配置,请指定要使用的 vitest.config.ts 。 详细信息请参阅 Vitest 官方网站

  7. 可选:

    配置在测试或相关源文件变更后自动重新运行测试。 为此,请在 Vitest 选项 字段中添加 --watch 标志。

    您还可以添加其他 Vitest 选项。 如需了解更多信息,请参阅 Vitest 官方网站

  8. 可选:

    Node 选项 字段中输入要传递给 Node.js 可执行文件的特定于 Node.js 的命令行选项。 可接受的选项包括:

    • 使用 --require coffeescript/register 可在运行时即时将 CoffeeScript 文件编译为 JavaScript。

      此模式要求 register.js 文件是 coffeescript 包的一部分,并位于项目中。 因此,请确保已如 安装 CoffeeScript 编译器 中所述在本地安装了 coffeescript 包。

    • 使用 --inspect--inspect-brk 参数以支持 Chrome 调试协议

通过运行配置运行测试

  1. 从配置列表中选择 Vitest 运行/调试配置,并在列表中或工具栏上单击 运行图标

    选择运行/调试配置
  2. 测试运行器 选项卡的 运行 工具窗口中监视测试执行并分析测试结果。 如需了解更多信息,请参阅 探索测试结果

    要调试测试,请 设置断点 ,然后选择运行/调试配置并单击 调试按钮

    Vitest:测试结果

重新运行测试

您可以 Alt+Shift+R 重新运行指定范围内的所有测试,也可以仅重新运行失败的测试。

您还可以使用 --watch 模式启动测试。 在该模式下,WebStorm 会监视测试及其相关被测对象的保存更改。 一旦检测到更改,WebStorm 会在不中断当前测试会话的情况下重新运行受影响的测试。

重新运行失败的测试

  • 单击测试结果工具栏上的 重新运行失败测试图标。 WebStorm 会执行在上一次会话中失败的所有测试。

    Vitest:重新运行所有失败的测试
  • 要重新运行某个特定失败测试,请在其上下文菜单中选择 运行 <test name>

有关更多信息,请参阅 重新运行测试

自动重新运行已更新的测试(--watch 模式)

  1. 打开一个 Vitest 运行/调试配置或按照 上述说明新建一个配置。

  2. Vitest 选项 字段中输入 --watch。 在自动生成的 所有测试 配置中,已指定 --watch 选项。

  3. 启动运行/调试配置。 如果某些测试失败,您可以在不停止测试会话的情况下更新这些测试或其相关的被测对象。 一旦保存更改,WebStorm 会检测到这些更改并重新运行受影响的测试。

    在以下示例中,位于 29 行的 vue.test.ts 中的测试失败。 启用 --watch 选项后,在 '4 x 4 = 18' 中将 '4 x 4 = 16' 替换为 vue.test.ts 并使用 Ctrl+S 保存更改或切换出 WebStorm,测试即会被重新运行。

    在 --watch 模式下重新运行已更新的测试

快照测试

WebStorm 还支持 Vitest 快照测试。 首次通过 toMatchSnapshot() 方法运行测试时,WebStorm 会创建一个快照文件,并在 toMatchSnapshot () 旁边的边距中显示一个 快照 图标。 单击 快照图标 可打开生成的快照。

快照

监视代码覆盖率

借助 WebStorm,您还可以监视代码中有多少部分是 通过 Vitest 测试覆盖的。 WebStorm 会在专用的 覆盖率 工具窗口中显示此统计信息,并在编辑器和 项目 工具窗口中以可视方式标记已覆盖和未覆盖的代码行 Alt+1

Vitest 覆盖率报告

启用 Vitest 的代码覆盖率

安装 @vitest/coverage-v8istanbul。 为此,请打开内置的 终端 Alt+F12 ,然后键入以下命令之一:

  • npm install --save-dev @vitest/coverage-v8

  • npm install --save-dev @vitest/coverage-istanbul

在 Vitest 官方网站上的 Coverage 页面了解更多信息。

运行带覆盖率的测试

  1. 从编辑器中以覆盖率运行特定套件或测试:单击边距中的 运行按钮重新运行按钮 ,然后从列表中选择 使用覆盖率运行 <test_name>

    从编辑器运行带覆盖率的 Vitest 测试

    或者:

    如上所述创建一个 Vitest 运行/调试配置。 在主工具栏的列表中选择 Vitest 运行/调试配置,然后单击列表右侧的 带覆盖率运行图标

  2. Coverage 工具窗口中监控代码覆盖率。 报告显示有多少文件被测试覆盖,以及其中被覆盖行的百分比。 您可以从报告跳转到文件,查看哪些代码行已覆盖(标记为绿色),哪些未覆盖(标记为红色):

最后修改日期: 2025年 9月 26日