JetBrains Rider 2025.2 Help

Vitest

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

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

开始之前

  1. 下载并安装 Node.js。

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

安装 Vitest

  • 在嵌入的 终端 (Alt+F12 )中，输入：

    npm install --save-dev vitest

请参阅 Vitest 官方网站上的 入门指南 和 配置 Vitest了解详情。

运行并调试测试

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

如需了解有关为 JavaScript 和 TypeScript 代码创建 Vitest 测试的更多信息，请参阅 Vitest 官方网站上的 Vitest features。

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

  • 点击装订区域中的 运行图标 或 重新运行图标 ，并从列表中选择 运行 <test_name>。

    从编辑器运行一个 Vitest 测试

    您还可以在编辑器中直接查看测试是否通过或失败，这要归功于 测试状态 图标 测试通过 和 测试失败。

  • 要调试测试， 在其中设置断点 ，点击装订区域中的 运行图标 或 重新运行图标 ，然后从列表中选择 调试 <test_name>。

    从编辑器调试一个 Vitest 测试

    在 调试 工具窗口中， 检查挂起的测试并 逐步执行。

    一场 Vitest 调试会话

创建 Vitest 运行配置

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

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

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

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

    可选地指定 Node.js 特定的选项参数和传递给 Node.js 的 环境变量。

  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. 在 测试运行器 选项卡的 运行 工具窗口中监控测试执行并分析测试结果。 如需更多信息，请参阅 探索测试结果。

    Vitest：测试结果

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

重新运行测试

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

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

重新运行失败的测试

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

    Vitest：重新运行所有失败的测试

  • 若要重新运行某个特定失败的测试，请在其上下文菜单中选择 运行 <test name>。

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

自动重新运行更新的测试（监视模式）

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

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

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

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

    在监视模式下重新运行更新的测试

快照测试

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

快照

监控代码覆盖率

使用 JetBrains Rider，您还可以监控代码中有多少部分被 Vitest 测试覆盖。 JetBrains Rider 会在专用的 覆盖 工具窗口中显示此统计信息，并在编辑器和 资源管理器 工具窗口 Alt+1 中以可视化方式标记已覆盖和未覆盖的行。

Vitest 覆盖率报告

启用 Vitest 的代码覆盖率

安装 @vitest/coverage-v8 或 istanbul。 要做到这一点，请打开内置的 终端 Alt+F12 并输入以下任一内容：

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

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

请访问 Vitest 官方网站上的 测试覆盖率了解详情。

运行测试并生成覆盖率报告

  1. 从编辑器运行特定的套件或测试并进行覆盖率分析：点击装订区域的图标 运行 按钮 或 重新运行按钮 并从列表中选择 运行 <test_name> 并查看覆盖率。

    从编辑器运行 Vitest 测试并获取覆盖率

    或者：

    如上所述创建一个 Vitest 运行/调试配置。 从主工具栏的列表中选择 Vitest 运行/调试配置，然后点击列表右侧的 运行覆盖率图标 &#xa0;。

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

最后修改日期： 2025年 9月 26日
ProtractorVue.js