IntelliJ IDEA 2025.1 Help

Vitest

IntelliJ IDEA 集成了 Vitest ,一个 Vite原生的单元测试框架。 您可以从编辑器和通过运行/调试配置运行、调试、进行快照测试和测量测试覆盖率。

您可以重新运行失败的测试或打开 watch模式。 当您以此模式启动测试会话时,IntelliJ IDEA 会监控项目源代码中的更改。 一旦对测试或其主体进行了任何更改,IntelliJ IDEA 就会重新运行受影响的测试,您甚至不必重新启动运行/调试配置。

开始之前

  1. 下载并安装 Node.js

  2. 请确保在设置中启用 JavaScript and TypeScript 插件。 按 Ctrl+Alt+S 打开设置,然后选择 插件。 点击 已安装 选项卡。 在搜索字段中,输入 JavaScript and TypeScript。 如需了解有关插件的更多信息,请参阅 管理插件

安装 Vitest

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

    npm install --save-dev vitest

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

运行和调试测试

在 IntelliJ IDEA 中,您可以直接从编辑器中快速运行或调试单个 Vitest 测试,或者创建运行/调试配置以运行或调试某些或全部测试。

有关为 JavaScript 和 TypeScript 代码创建 Vitest 测试的更多信息,请参阅 Vitest 官方网站上的 Vitest features

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

  • 点击 运行图标重新运行图标 ,并从列表中选择 运行 <test_name>

    从编辑器运行一个 Vitest 测试

    您还可以直接在编辑器中查看测试是通过还是失败,这要归功于 测试状态图标 个测试通过个测试失败 位于边栏中。

  • 要调试测试, 在其中设置断点 ,点击边栏中的 运行图标重新运行图标 ,然后从列表中选择 调试 <test_name>

    从编辑器调试一个 Vitest 测试

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

    一场 Vitest 调试会话

创建 Vitest 运行配置

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

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

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

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

    可选地指定 Node.js-specific option parameters 和传递给 Node.js 的 environment variables

  3. 指定 vitest 软件包的位置。

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

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

  6. 默认情况下, vite.config.ts 被使用。 如果 vite.config.ts 丢失,或您希望使用自定义配置,请指定 vitest.config.ts 进行使用。 请访问 Vitest 官方网站了解更多信息。

  7. 可选:

    在相关源码文件或测试中进行变更时自动配置重新运行测试。 要做到这一点,请在 --watch 标志中添加 Vitest 选项 字段。

    您还可以添加其他 Vitest 选项。 如需了解更多信息,请参考 Vitest official website

  8. 可选:

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

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

      这种模式要求 register.js 文件(属于 coffeescript 包)位于您的项目内。 因此,请确保您已在本地安装了 coffeescript 软件包,如 安装 CoffeeScript 编译器中所述。

    • 使用 --inspect--inspect-brk 参数以支持 Chrome Debugging Protocol

通过运行配置运行测试

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

    选择运行/调试配置
  2. 测试运行程序 选项卡的 运行 工具窗口中监控测试执行并分析测试结果。 如需更多信息,请参阅 Explore test results

    Vitest:测试结果

要调试测试, 设置断点 在必要的地方,选择运行/调试配置,然后点击 “调试”按钮

重新运行测试

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

您还可以在 --watch mode中启动测试。 在此模式下,IntelliJ IDEA 监控保存的测试和相关测试对象的更改。 一旦检测到更改,IntelliJ IDEA 将在不中断当前测试会话的情况下重新运行受影响的测试。

重新运行失败测试

  • 点击 重新运行失败测试图标 测试结果工具栏。 IntelliJ IDEA 将执行上一会话中失败的所有测试。

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

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

  1. 打开 Vitest 运行/调试配置,或 如上文所述创建一个新的配置。

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

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

    在下面的示例中,第 29 行的 vue.test.ts 测试失败了。 使用 --watch 选项后,测试将在 vue.test.ts '4 x 4 = 18' 替换为 '4 x 4 = 16' 并在 Ctrl+S 中保存更改后重新运行,或将焦点从 IntelliJ IDEA 移开。

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

快照测试

IntelliJ IDEA 也支持 Vitest 快照测试。 当 IntelliJ IDEA 第一次使用 toMatchSnapshot() 方法运行测试时,会创建一个快照文件,并且 快照 图标会出现在 toMatchSnapshot () 旁边的边距。 点击 快照图标 以打开生成的快照。

快照

监控代码覆盖率

使用 IntelliJ IDEA,您还可以监控代码中有多少部分 已被 Vitest 测试覆盖。 IntelliJ IDEA 会在专用的 覆盖 工具窗口中显示此统计信息,并在编辑器和 项目 工具窗口 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 运行/调试配置,然后点击列表右侧的 运行覆盖率图标 &#xa0;。

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

最后修改日期: 2025年 4月 24日