Vitest
WebStorm 集成了 Vitest ，一个 Vite原生的单元测试框架。 您可以从编辑器和通过运行/调试配置运行、调试、进行快照测试和测量测试覆盖率。
您可以重新运行失败的测试或打开 watch模式。 当您以此模式启动测试会话时，WebStorm 会监控项目源代码中的更改。 一旦对测试或其主体进行了任何更改，WebStorm 就会重新运行受影响的测试，您甚至不必重新启动运行/调试配置。
开始之前
请确保您的计算机上安装了 Node.js。
安装 Vitest
在嵌入的 终端 (Alt+F12 )中，输入：
npm install --save-dev vitest
运行并调试测试
在 WebStorm 中，您可以直接从编辑器中快速运行或调试单个 Vitest 测试，或者创建运行/调试配置以运行或调试某些或全部测试。
如需了解有关为 JavaScript 和 TypeScript 代码创建 Vitest 测试的更多信息，请参阅 Vitest 官方网站上的 Vitest features。
从编辑器运行或调试单个测试
或 
，然后从列表中选择 
和 
位于边栏中。
创建 Vitest 运行配置
打开 运行/调试配置对话框（ 在主菜单中），点击
在左侧窗格中，然后从列表中选择 Vitest。 运行/调试配置：Vitest 对话框将打开。指定要使用的 Node.js 解释器。
如果您选择 项目 别名，WebStorm 将自动使用 Node 解释器 字段中 Node.js 页面的项目默认解释器。 在大多数情况下，WebStorm 会检测到项目的默认解释器并自动填写该字段。
您也可以选择另一个已配置的本地或远程解释器，或点击
并配置一个新的。有关更多信息，请参阅 配置远程 Node.js 解释器、 配置本地 Node.js 解释器 和 在 Windows Subsystem for Linux 上使用 Node.js。
可选地指定 Node.js-specific option parameters 和传递给 Node.js 的 environment variables。
指定
vitest软件包的位置。指定应用程序的工作目录。 默认情况下， 工作目录 字段显示项目根文件夹。 若要更改此预定义设置，请指定所需文件夹的路径。
指定要运行的测试。 这可以是一个特定的测试或套件，整个测试文件或包含测试文件的文件夹。
默认情况下， vite.config.ts 被使用。 如果 vite.config.ts 丢失，或您希望使用自定义配置，请指定 vitest.config.ts 进行使用。 请访问 Vitest 官方网站了解更多信息。
可选：
在相关源码文件或测试中进行变更时自动配置重新运行测试。 要做到这一点，请在
--watch标志中添加 Vitest 选项 字段。您还可以添加其他 Vitest 选项。 如需了解更多信息，请参考 Vitest official website。
可选：
在 Node 选项 字段中，输入要传递给 Node.js 可执行文件的特定命令行选项。 可接受的选项是：
使用
--require coffeescript/register，运行期间可以将 CoffeeScript 文件即时编译为 JavaScript。这种模式要求 register.js 文件（属于
coffeescript包）位于您的项目内。 因此，请确保您已按照 安装 CoffeeScript 编译器中的说明，在本地安装了coffeescript包。使用
--inspect或--inspect-brk参数以支持 Chrome Debugging Protocol。
通过运行配置运行测试
从配置列表中选择 Vitest 运行/调试配置，然后点击
在列表中或工具栏上。
在 测试运行器 选项卡的 运行 工具窗口中监控测试执行并分析测试结果。 如需更多信息，请参阅 探索测试结果。
要调试测试， 设置断点 在必要的地方，选择运行/调试配置，然后点击 
。
重新运行测试
您可以重新运行指定范围内的所有测试 Alt+Shift+R 或仅重新运行失败的测试。
您还可以在 --watch mode中启动测试。 在此模式下，WebStorm 监控保存的测试和相关测试对象的更改。 一旦检测到更改，WebStorm 将在不中断当前测试会话的情况下重新运行受影响的测试。
重新运行失败的测试
点击
测试结果工具栏。 WebStorm 将执行上一会话中失败的所有测试。
若要重新运行某个特定失败的测试，请在其上下文菜单中选择 。
有关更多信息，请参阅 重新运行测试。
自动重新运行更新的测试（--watch 模式）
打开 Vitest 运行/调试配置，或 如上文所述创建一个新的配置。
在 Vitest 选项 字段中，输入
--watch。 在自动生成的 所有测试 配置中，--watch选项已指定。启动运行/调试配置。 如果某些测试失败，您可以在不中止测试会话的情况下更新它们或相关测试对象。 一旦您的更改被保存，WebStorm 会检测到它们并重新运行受影响的测试。
在下面的示例中，第
29行的 vue.test.ts 测试失败了。 使用--watch选项后，测试将在 vue.test.ts 将'4 x 4 = 18'替换为'4 x 4 = 16'并在 Ctrl+S 中保存更改后重新运行，或将焦点从 WebStorm 移开。
快照测试
WebStorm 也支持 Vitest 快照测试。 当 WebStorm 第一次使用 toMatchSnapshot() 方法运行测试时，会创建一个快照文件，并且 
图标会出现在 toMatchSnapshot () 旁边的边距。 点击 以打开生成的快照。
监控代码覆盖率
使用 WebStorm，您还可以监控代码中有多少部分 已被 Vitest 测试覆盖。 WebStorm 会在专用的 覆盖 工具窗口中显示此统计信息，并在编辑器和 项目 工具窗口 Alt+1 中以可视化方式标记已覆盖和未覆盖的行。
启用 Vitest 的代码覆盖率
安装 @vitest/coverage-v8或 istanbul。 要做到这一点，请打开内置的 终端 Alt+F12 并输入以下任一内容：
npm install --save-dev @vitest/coverage-v8npm install --save-dev @vitest/coverage-istanbul.
了解更多信息，请访问 Vitest 官方网站上的 Coverage。
 。