Jest
Jest 是一个专门用于客户端 JavaScript 应用程序和 React 应用程序的测试平台。 了解更多关于此平台的信息，请访问 Jest官方网站。
您可以在 PhpStorm 中运行和调试 Jest 测试。 您可以在树形视图中查看测试结果，并轻松从那里导航到测试源代码。 测试状态显示在编辑器中的测试旁边，提供一个快速运行或调试的选项。
开始之前
安装和配置 Jest
在嵌入的 终端 (Alt+F12 )中，输入：
npm install --save-dev jest
运行测试
通过 PhpStorm，您可以直接从编辑器中快速运行单个 Jest 测试，或者创建运行/调试配置来执行部分或全部测试。
如需了解有关为 JavaScript 和 TypeScript 代码创建 Vitest 测试的更多信息，请参阅 Vitest 官方网站上的 Vitest features。
从编辑器运行单个测试
点击
或 
，然后从列表中选择 运行 <test_name>。
您还可以直接在编辑器中查看测试是通过还是失败，这要归功于 测试状态图标
和 
位于边栏中。
从项目工具窗口运行文件夹中的所有测试
在 Project 工具窗口 Alt+1 中，选择包含测试的文件夹，然后选择 运行 'Tests in <folder name>'。
创建 Jest 运行配置
打开 运行/调试配置对话框（ 在主菜单中），点击
在左侧窗格中，然后从列表中选择 Jest。 “ 运行/调试配置：Jest” 对话框打开。指定要使用的 Node.js 解释器。
如果您选择 Project 别名，PhpStorm 将自动使用 Node 解释器 字段中 Node.js 页面的项目默认解释器。 在大多数情况下，PhpStorm 会检测到项目的默认解释器并自动填写该字段。
您也可以选择另一个已配置的本地或远程解释器，或点击
并配置一个新的。指定 jest、 react-scripts、 react-script-ts、 react-super-scripts或 react-awesome-scripts包的位置。
指定应用程序的工作目录。 默认情况下， 工作目录 字段显示项目根文件夹。 若要更改此预定义设置，请指定所需文件夹的路径。
指定要运行的测试。 这可以是一个特定的测试或套件，整个测试文件或包含测试文件的文件夹。
可选地指定要使用的 jest.config.js 或 jest.config.ts 文件：从列表中选择相关文件，或点击
并在打开的对话框中选择它，或者直接在字段中键入路径。如果该字段为空，PhpStorm 将寻找一个包含
jest键的 package.json 文件。 搜索会从 working directory向上在文件系统中执行。 如果没有找到适当的 package.json 文件，则会即时生成一个 Jest 默认配置。可选：
在相关源文件发生更改时自动配置重新运行测试。 要做到这一点，请在
--watch标志中添加 Jest 选项 字段。您还可以稍后在测试会话期间，通过按 监视更改 切换按钮在 运行 工具窗口中开启 监视 模式，具体请参考下文 更改时自动重新运行测试（监视模式）。
可选：
指定执行命令的环境变量。 PhpStorm 将在
process.env的完成列表中显示这些变量。
在 Node 选项 字段中，您可以选择性地输入特定于 Node.js 的命令行选项，以传递给 Node.js 可执行文件。 可接受的选项是：
使用
--require coffeescript/register，运行期间可以将 CoffeeScript 文件即时编译为 JavaScript。这种模式要求 register.js 文件（属于
coffeescript包）位于您的项目内。 因此，请确保您已按照 安装 CoffeeScript 编译器中的说明，在本地安装了coffeescript包。使用
--inspect或--inspect-brk参数以支持 Chrome Debugging Protocol。要在您的项目中使用 ECMAScript Modules ，请将
—experimental-vm-modules标志添加到 Node 选项 字段。
通过运行配置运行测试
从配置列表中选择 Jest 运行/调试配置，并点击
。在 测试运行器 选项卡的 运行 工具窗口中监控测试执行并分析测试结果。 如需更多信息，请参阅 探索测试结果。
重新运行失败的测试
点击
测试结果工具栏。 PhpStorm 将执行上一会话中失败的所有测试。若要重新运行某个特定失败的测试，请在其上下文菜单中选择 。
有关更多信息，请参阅 重新运行测试。
更改时自动重新运行测试（观察模式）
PhpStorm 支持 watch模式，在对测试相关的源文件进行任何更改后，测试会自动重新运行。 因此，您可以直接修改代码，而无需手动重新运行测试或重新启动 Jest run/debug configuration。
在 测试运行器选项卡中，按下 监视更改 切换按钮。
或者，在运行/调试配置的 Jest 选项 字段中添加
--watch标志，请参阅上面的 创建一个 Jest 运行配置。
导航
使用 PhpStorm ，您可以在文件与相关测试文件之间跳转，或从 测试运行器选项卡中的测试结果跳转到测试。
借助 PhpStorm，您可以在文件和相关的测试文件之间跳转，以及在测试或套件定义与 测试运行器选项卡中的结果之间跳转。
在编辑器中打开文件，选择上下文菜单中的 或 ，或者直接按 Ctrl+Shift+T ，即可在测试和其主题之间进行切换。
从测试结果跳转到测试定义，双击 测试运行器 选项卡中的测试名称，或从上下文菜单中选择 ，或者按 F4。 测试文件在编辑器中打开时，文本光标放置在测试定义处。
要从测试或套件定义跳转到 测试运行器 选项卡中的结果，请点击边栏中的
或 ，然后从列表中选择 在测试树中选择 <test_name>。
对于失败的测试，PhpStorm 会从堆栈跟踪中将您带到测试中的失败行。 如果精确的行不在栈跟踪中， 您将被带到测试定义。
快照测试
PhpStorm 集成 Jest 支持诸如快照测试这样出色的功能。
当您使用 .toMatchSnapshot() 方法运行测试时，Jest 会在 __snapshots__ 文件夹中创建一个快照文件。 要从测试跳转到相关的快照，请点击测试旁边空隙中的 
，或者从 .toMatchSnapshot() 方法的上下文菜单中选择所需的快照。
如果快照与渲染的应用程序不匹配，测试将失败。 这表明您的代码中的某些更改导致了此不匹配，或者快照已过时，需要更新。
要查看导致此不匹配的原因，请通过 点击查看差异 链接在 测试运行器 选项卡的右侧窗格中打开 PhpStorm 内置的 差异查看器。
您可以直接从 测试运行器 选项卡的 运行 工具窗口更新过时的快照。
要更新特定测试的快照，请使用测试名称旁边的 点击更新快照 链接。
要更新文件中测试的所有过时快照，请使用测试文件名旁边的 单击以更新失败的快照。
调试测试
使用 PhpStorm，您可以直接从编辑器快速开始调试单个 Jest 测试，或者创建运行/调试配置来调试您的一些或全部测试。
设置断点 所需的位置。
要从编辑器开始调试单个测试，请点击装订区域的
或 ，然后从列表中选择 调试<test_name>。要开始调试文件夹中的所有测试，请在 Project 工具窗口中选择该文件夹，然后从上下文菜单中选择 调试 'Tests in <folder name>'。
要通过运行/调试配置启动测试调试，请创建一个 Jest 运行/调试配置 如上所述。
然后从配置列表中选择 Jest 运行/调试配置，并在列表或工具栏中点击
。
在打开的 调试工具窗口 中，按常规操作： 逐步执行程序， 暂停并恢复程序执行， 在挂起时检查 ，探索调用堆栈和变量，设置监视，评估变量， 查看实际的 HTML DOM ，等等。
监控代码覆盖率
使用 PhpStorm，您还可以监控代码中有多少部分 通过 Jest 测试覆盖。 PhpStorm 会在专用的 覆盖率 工具窗口中显示此统计信息，并在编辑器和 Project 工具窗口 Alt+1 中以可视化方式标记已覆盖和未覆盖的行。
运行测试并生成覆盖率报告
 。
在 Docker 容器内使用 Node.js 运行 Jest 测试
有了 PhpStorm，您可以在 Docker 容器中运行 Jest 测试，就像在本地一样。
开始之前
按照 从 JetBrains Marketplace 安装插件中的说明，在 设置 | 插件 页面、选项卡 Marketplace 上安装并启用 Node.js 远程解释器插件。
确保在 设置 | 插件 页面、 已安装 选项卡上启用 Node.js和 Docker必需插件。 如需了解更多信息，请参阅 管理插件。
下载、安装并配置 Docker ，如 Docker 中所述
在 Docker 中配置 Node.js 远程解释器或通过 Docker Compose并 将其设置为默认在您的项目中。 还要确保与此远程解释器关联的软件包管理器 设置为项目默认。
打开您的 package.json 并确保 Jest 在
devDependencies部分列出：{ "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'。