Vitest
WebStorm 集成了 Vitest ,这是一款 Vite 原生的单元测试框架。 您可以在编辑器中或通过运行/调试配置来运行、调试、进行快照测试以及衡量测试覆盖率。
您可以重新运行失败的测试或启用 watch 模式。 在此模式下启动测试会话时,WebStorm 会监视项目源代码中的更改。 一旦测试或其被测对象发生任何更改,WebStorm 会重新运行受影响的测试,甚至无需重新启动运行/调试配置。
开始之前
请确保您的计算机上已安装 Node.js。
安装 Vitest
在嵌入的 终端 (Alt+F12 )中输入:
npm install --save-dev vitest
运行和调试测试
使用 WebStorm,您可以直接在编辑器中快速运行或调试单个 Vitest 测试,也可以创建运行/调试配置来运行或调试部分或全部测试。
有关为 JavaScript 与 TypeScript 编写 Vitest 测试的更多信息,请参阅 Vitest 官方网站上的 Vitest 功能。
从编辑器运行或调试单个测试
创建 Vitest 运行配置
打开 运行/调试配置对话框( 主菜单中),在左侧面板中单击
,然后从列表中选择 Vitest。 将打开 运行/调试配置:Vitest 对话框。
请指定要使用的 Node.js 解释器。
如果选择 项目 别名,WebStorm 会自动使用 Node 解释器 字段中在 Node.js 页面上配置的项目默认解释器。 在大多数情况下,WebStorm 会检测到项目默认解释器并自动填写该字段。
您还可以选择另一个已配置的本地或远程解释器,或单击
来配置一个新解释器。
有关更多信息,请参阅 配置远程 Node.js 解释器、 配置本地 Node.js 解释器与 在 Windows 子系统 Linux 上使用 Node.js。
您可以选择性地指定 Node.js 特定的选项参数以及传递给 Node.js 的 环境变量。
请指定
vitest包的位置。指定应用程序的工作目录。 默认情况下, 工作目录 字段会显示项目根文件夹。 要更改此预定义设置,请指定所需文件夹的路径。
指定要运行的测试。 可以是某个特定测试或套件、完整测试文件,或包含测试文件的文件夹。
默认情况下使用 vite.config.ts 。 如果缺少 vite.config.ts ,或者您想使用自定义配置,请指定要使用的 vitest.config.ts 。 详细信息请参阅 Vitest 官方网站。
可选:
配置在测试或相关源文件变更后自动重新运行测试。 为此,请在 Vitest 选项 字段中添加
--watch标志。您还可以添加其他 Vitest 选项。 如需了解更多信息,请参阅 Vitest 官方网站。
可选:
在 Node 选项 字段中输入要传递给 Node.js 可执行文件的特定于 Node.js 的命令行选项。 可接受的选项包括:
使用
--require coffeescript/register可在运行时即时将 CoffeeScript 文件编译为 JavaScript。此模式要求 register.js 文件是
coffeescript包的一部分,并位于项目中。 因此,请确保已如 安装 CoffeeScript 编译器 中所述在本地安装了coffeescript包。使用
--inspect或--inspect-brk参数以支持 Chrome 调试协议。
通过运行配置运行测试
重新运行测试
您可以 Alt+Shift+R 重新运行指定范围内的所有测试,也可以仅重新运行失败的测试。
您还可以使用 --watch 模式启动测试。 在该模式下,WebStorm 会监视测试及其相关被测对象的保存更改。 一旦检测到更改,WebStorm 会在不中断当前测试会话的情况下重新运行受影响的测试。
重新运行失败的测试
单击测试结果工具栏上的
。 WebStorm 会执行在上一次会话中失败的所有测试。

要重新运行某个特定失败测试,请在其上下文菜单中选择 。
有关更多信息,请参阅 重新运行测试。
自动重新运行已更新的测试(--watch 模式)
打开一个 Vitest 运行/调试配置或按照 上述说明新建一个配置。
在 Vitest 选项 字段中输入
--watch。 在自动生成的 所有测试 配置中,已指定--watch选项。启动运行/调试配置。 如果某些测试失败,您可以在不停止测试会话的情况下更新这些测试或其相关的被测对象。 一旦保存更改,WebStorm 会检测到这些更改并重新运行受影响的测试。
在以下示例中,位于
29行的 vue.test.ts 中的测试失败。 启用--watch选项后,在'4 x 4 = 18'中将'4 x 4 = 16'替换为 vue.test.ts 并使用 Ctrl+S 保存更改或切换出 WebStorm,测试即会被重新运行。
快照测试
WebStorm 还支持 Vitest 快照测试。 首次通过 toMatchSnapshot() 方法运行测试时,WebStorm 会创建一个快照文件,并在 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 页面了解更多信息。





