Jest
Jest 是一个面向客户端 JavaScript 应用程序，特别是 React 应用程序的测试平台。 请访问 Jest 官方网站，了解有关该平台的更多信息。
您可以在 WebStorm 中直接运行并调试 Jest 测试。 您可以在树状视图中查看测试结果，并轻松从中导航至测试源代码。 测试状态显示在编辑器中测试旁边，您可以选择快速运行或调试测试。
开始之前
请确保您的计算机上已安装 Node.js。
安装并配置 Jest
在嵌入的 终端 （Alt+F12 ）中键入：
npm install --save-dev jest
运行测试
在 WebStorm 中，您可以直接从编辑器快速运行单个 Jest 测试，或创建运行/调试配置来执行部分或全部测试。
如需了解更多关于为 JavaScript 和 TypeScript 创建 Vitest 测试的信息，请参见 Vitest 官方网站的 Vitest 功能。
从编辑器运行单个测试
单击边栏中的
或 
，然后从列表中选择 运行 <test_name>。
借助编辑器中的 测试状态 图标
和 
，您还可以直接查看测试是否通过或失败。
从项目工具窗口运行文件夹中的所有测试
在 项目 工具窗口 Alt+1 中，选择包含测试的文件夹，然后选择 运行 '在 <folder name> 中的测试'。
创建 Jest 运行配置
打开 运行/调试配置 对话框（在主菜单中点击 ），在左侧窗格中点击
，然后从列表中选择 Jest。 将打开 运行/调试配置：Jest 对话框。指定要使用的 Node.js 解释器。
如果选择 项目 别名，WebStorm 将自动使用 Node.js 页面中 Node 解释器 字段的项目默认解释器。 在大多数情况下，WebStorm 会检测项目默认解释器并自动填写该字段。
您也可以选择另一个已配置的本地或远程解释器，或单击
配置新的解释器。欲了解更多信息，请参阅 配置远程 Node.js 解释器、 配置本地 Node.js 解释器 和 在 Windows Subsystem for Linux 中使用 Node.js。
指定 jest、 react-scripts、 react-script-ts、 react-super-scripts 或 react-awesome-scripts 程序包的位置。
指定应用程序的工作目录。 默认情况下， 工作目录 字段显示项目根文件夹。 要更改此预定义设置，请指定所需文件夹的路径。
指定要运行的测试。 可以是特定的测试或测试套件、整个测试文件或包含测试文件的文件夹。
（可选）指定要使用的 jest.config.js 或 jest.config.ts 文件：从列表中选择相关文件，或单击
并在打开的对话框中选择，或者直接在字段中输入路径。如果该字段为空，WebStorm 将查找包含
jest键的 package.json 文件。 搜索将在文件系统中从 工作目录 向上进行。 如果未找到合适的 package.json 文件，则会即时生成 Jest 默认配置。可选：
配置在相关源文件发生更改时自动重新运行测试。 为此，请在 Jest 选项 字段中添加
--watch标志。您也可以在测试会话期间，在 运行 工具窗口中按下 监视更改 切换按钮以启用 watch 模式，详见下文 在更改时自动重新运行测试（watch 模式）。
可选：
指定用于执行命令的环境变量。 WebStorm 将在
process.env的自动补全列表中显示这些变量。
在 Node 选项 字段中，您可以选择输入要传递给 Node.js 可执行文件的 Node.js 专用命令行选项。 可接受的选项包括：
使用
--require coffeescript/register以实现在运行期间将 CoffeeScript 文件即时编译为 JavaScript。此模式要求项目中包含
coffeescript包中的 register.js 文件。 因此，请确保已按照 安装 CoffeeScript 编译器 中的说明在本地安装了coffeescript包。使用
--inspect或--inspect-brk参数以支持 Chrome 调试协议。要在项目中使用 ECMAScript Modules ，请将
—experimental-vm-modules标志添加到 Node 选项 字段。
通过运行配置运行测试
从配置列表中选择 Jest 运行/调试配置，然后点击列表中或工具栏上的
。
在 测试运行器 选项卡的 运行 工具窗口中监控测试执行并分析测试结果。 欲了解更多信息，请参阅 查看测试结果。
重新运行失败的测试
点击测试结果工具栏上的
。 WebStorm 将执行在上一会话中失败的所有测试。
若要重新运行某个具体失败的测试，请在其上下文菜单中选择 。
欲了解更多信息，请参阅 重新运行测试。
更改后自动重新运行测试（侦听模式）
WebStorm 支持 watch 模式，在该模式中，只要更改与测试相关的源文件，就会自动重新运行测试。 因此，您只需更改代码，无需手动重新运行测试或重启 Jest 运行/调试配置。
在 测试运行器选项卡 中，按下 监视更改 切换按钮。
您也可以在运行/调试配置的 Jest 选项 字段中添加
--watch标志，详见上文 创建 Jest 运行配置。
导航
在 WebStorm 中，您可以在文件与其相关的测试文件之间跳转，或从 测试运行器选项卡 中的测试结果跳转到该测试。
通过 WebStorm，您可以在文件与相关测试文件之间、测试或测试套件定义与其在 测试运行器选项卡 中的结果之间跳转。
若要在测试与其被测试对象之间跳转，请在编辑器中打开文件，并从上下文菜单中选择 或 ，或直接按 Ctrl+Shift+T。
若要从测试结果跳转到测试定义，请在 测试运行器 选项卡中双击测试名称，或在上下文菜单中选择 ，或直接按 F4。 测试文件将在编辑器中打开，光标定位在测试定义处。
要从测试或套件定义跳转到其在 测试运行器 选项卡中的结果，请单击边距中的
或 ，并从列表中选择 在测试树中选择 <test_name>。
对于失败的测试，WebStorm 会根据堆栈跟踪，将您导航到测试中的失败行。 如果堆栈跟踪中没有精确的代码行，将会跳转到测试定义。
快照测试
WebStorm 与 Jest 的集成支持一个非常实用的功能：快照测试。
当您使用 .toMatchSnapshot() 方法运行测试时，Jest 会在 __snapshots__ 文件夹中创建一个快照文件。 要从测试跳转到其对应的快照文件，请单击测试边距旁的 
，或从 .toMatchSnapshot() 方法的上下文菜单中选择所需快照。
如果快照与渲染的应用程序不匹配，则测试将失败。 这表示要么是您的代码发生了更改导致不一致，要么是快照已过时，需要更新。
要查看造成不一致的原因，请通过 点击查看差异 链接，在 测试运行器 选项卡的右侧窗格中打开 WebStorm 内置的 差异查看器。
您可以直接从 测试运行器 选项卡的 运行 工具窗口中更新已过时的快照。
要更新特定测试的快照，请使用测试名称旁的 点击更新快照 链接。
要更新文件中测试的所有过时快照，请使用测试文件名旁的 点击更新失败的快照。
调试测试
使用 WebStorm，您可以直接从编辑器快速调试单个 Jest 测试，也可以创建运行/调试配置来调试部分或所有测试。
请根据需要 设置断点。
要从编辑器调试单个测试，请单击边距中的
或 ，并从列表中选择 调试 <test_name>。要调试文件夹中所有测试，请在 项目 工具窗口中选择该文件夹，然后从上下文菜单中选择 调试 '在 <folder name> 中的测试'。
要通过运行/调试配置启动测试调试，请创建一个 Jest 运行/调试配置 ，如上所述。
然后从配置列表中选择 Jest 运行/调试配置，并在列表中或工具栏上单击
。
在打开的 调试工具窗口 中，按常规流程继续操作： 逐步执行程序、 暂停并恢复程序执行、 在暂停时进行检查 、探索调用堆栈和变量、设置监视、评估变量、 查看实际 HTML DOM 等。
监视代码覆盖率
借助 WebStorm，您还可以监控代码中 由 Jest 测试覆盖的内容。 WebStorm 会在专用的 覆盖率 工具窗口中显示此统计信息，并在编辑器以及 项目 工具窗口 Alt+1 中以可视方式标记已覆盖和未覆盖的代码行。
运行测试并查看覆盖率
。
在 Docker 容器中使用 Node.js 运行 Jest 测试
借助 WebStorm，您可以像在本地一样，在 Docker 容器内运行 Jest 测试。
开始之前
请确保页面 设置 | 插件 、选项卡 已安装 中启用了所需的插件： Node.js、 Node.js Remote Interpreter 和 Docker。 有关详细信息，请参阅 管理插件。
按照 Docker 中的说明下载、安装并配置 Docker。
在 Docker 中配置 Node.js 远程解释器或通过 Docker Compose 进行配置，并在项目中 将其设置为默认值。 还请确保与此远程解释器关联的软件包管理器已 设置为项目默认值。
打开 package.json ，并确保在
devDependencies部分中列出了 Jest：{ "name": "node-express", "version": "0.0.0", "private": true, "dependencies": { "cookie-parser": "~1.4.4", "debug": "~2.6.9", "express": "~4.16.1", "http-errors": "~1.6.3", "morgan": "~1.9.1", "pug": "^3.0.2" }, "devDependencies": { "eslint": "^8.1.0", "http-server": "^14.0.0", "jest": "^27.3.1" } }右键单击编辑器中的任意位置，并从上下文菜单中选择 运行 '<package manager> install'。