IntelliJ IDEA 2025.2 Help

Jest

Jest 是一个专门用于客户端 JavaScript 应用程序和 React 应用程序的测试平台。 了解更多关于此平台的信息,请访问 Jest官方网站。

您可以在 IntelliJ IDEA 中运行和调试 Jest 测试。 您可以在 treeview 中查看测试结果,并轻松地从那里导航到测试源。 编辑器中测试旁会显示测试状态,并提供快速运行或调试的选项。

开始之前

  1. 下载并安装 Node.js

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

安装和配置 Jest

  • 在嵌入的 终端Alt+F12 )中输入:

    npm install --save-dev jest

想了解更多信息,请参阅 Jest 官方网站上的 入门指南配置 Jest

运行测试

通过 IntelliJ IDEA,您可以直接从编辑器中快速运行单个 Jest 测试,或者创建运行/调试配置来执行部分或全部测试。

有关为 JavaScript 和 TypeScript 代码创建 Vitest 测试的更多信息,请参阅 Vitest 官方网站上的 Vitest features

从编辑器运行单个测试

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

    从编辑器运行单个测试

    您还可以在编辑器中查看测试是否通过或失败,由于装订区域的 测试状态图标 个测试通过个测试失败

从项目工具窗口运行文件夹中的所有测试

  • 项目 工具窗口 Alt+1 中,选择包含测试的文件夹,然后选择 运行 'Tests in <folder name>'

    运行文件夹中的所有测试

创建 Jest 运行配置

  1. 打开 运行/调试配置对话框(运行 | 编辑配置 在主菜单中),点击 "添加"按钮 在左侧窗格中,然后从列表中选择 Jest运行/调试配置:Jest对话框打开。

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

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

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

  3. 指定 jestreact-scriptsreact-script-tsreact-super-scriptsreact-awesome-scripts包的位置。

  4. 指定应用程序的工作目录。 默认情况下, 工作目录 字段显示项目根文件夹。 若要更改此预定义设置,请指定所需文件夹的路径。

  5. 指定要运行的测试。 这可以是一个特定的测试或套件,整个测试文件或包含测试文件的文件夹。

  6. 可选地指定要使用的 jest.config.js jest.config.ts 文件:从列表中选择相关文件,或点击 浏览按钮 并在打开的对话框中选择它,或者直接在字段中键入路径。

    如果该字段为空,IntelliJ IDEA 会查找一个包含 package.json 文件的 jest 键。 搜索从 working directory向上的文件系统中执行。 如果未找到合适的 package.json 文件,将即时生成 Jest 默认配置

  7. 可选:

    在相关源文件发生更改时自动配置重新运行测试。 要做到这一点,请在 --watch 标志中添加 Jest 选项 字段。

    您还可以稍后在测试会话期间,通过按 留意变化 切换按钮在 运行 工具窗口中开启 监视 模式,具体请参考下文 更改时自动重新运行测试(监视模式)

  8. 可选:

    指定执行命令的环境变量。 IntelliJ IDEA 将在自动完成列表中显示这些变量 process.env

    Jest 运行配置环境变量的自动补全
  9. 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 选项 字段。

通过运行配置运行测试

  1. 从配置列表中选择 Jest 运行/调试配置,然后在列表或工具栏中点击 运行图标

  2. 测试运行程序 选项卡的 运行 工具窗口中监控测试执行并分析测试结果。 如需更多信息,请参阅 Explore test results

重新运行失败测试

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

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

更改时自动重新运行测试(观察模式)

IntelliJ IDEA 支持 watch模式,在对测试相关的源文件进行任何更改后,测试会自动重新运行。 因此,您可以直接修改代码,而无需手动重新运行测试或重新启动 Jest run/debug configuration。

  • 测试运行器选项卡中,按下 留意变化 切换按钮。

    启用 Watch Changes 模式
  • 或者,在运行/调试配置的 Jest 选项 字段中添加 --watch 标志,请参阅上面的 创建一个 Jest 运行配置

导航

使用 IntelliJ IDEA ,您可以在文件与相关测试文件之间跳转,或从 测试运行器选项卡中的测试结果跳转到测试。

借助 IntelliJ IDEA,您可以在文件和相关的测试文件之间跳转,以及在测试或套件定义与 测试运行器选项卡中的结果之间跳转。

  • 在编辑器中打开文件,选择上下文菜单中的 转到 | 测试(S)转到 | 测试对象 ,或者直接按 Ctrl+Shift+T ,即可在测试和其主题之间进行切换。

  • 从测试结果跳转到测试定义,双击 测试运行程序 选项卡中的测试名称,或从上下文菜单中选择 跳转到源 ,或者按 F4。 测试文件在编辑器中打开时,文本光标放置在测试定义处。

  • 要从测试或套件定义跳转到 测试运行程序 选项卡中的结果,请点击边栏中的 测试通过图标测试失败图标 ,然后从列表中选择 在测试树中选择 <test_name>

    从测试定义跳转到测试树
  • 对于失败的测试,IntelliJ IDEA 会从堆栈跟踪中将您带到测试中的失败行。 如果精确的行不在栈跟踪中, 您将被带到测试定义。

    从失败的 Jest 测试中跳到失败的行

快照测试

IntelliJ IDEA 集成 Jest 支持诸如快照测试这样出色的功能。

当您使用 .toMatchSnapshot() 方法运行测试时,Jest 会在 __snapshots__ 文件夹中创建一个快照文件。 要从测试跳转到相关的快照,请点击测试旁边空隙中的 前往快照(相机)图标 ,或者从 .toMatchSnapshot() 方法的上下文菜单中选择所需的快照。

Jest 快照测试:从测试文件跳转到相应的快照

如果快照与渲染的应用程序不匹配,测试将失败。 这表明您的代码中的某些更改导致了此不匹配,或者快照已过时,需要更新。

要查看导致此不匹配的原因,请通过 点击查看差异 链接在 测试运行程序 选项卡的右侧窗格中打开 IntelliJ IDEA 内置的 差异查看器

Jest 快照:在 IntelliJ IDEA 差异查看器中比较预期和实际快照

您可以直接从 测试运行程序 选项卡的 运行 工具窗口更新过时的快照。

  • 要更新特定测试的快照,请使用测试名称旁边的 点击更新快照 链接。

  • 要更新文件中测试的所有过时快照,请使用测试文件名旁边的 点击以更新失败的快照

Jest 快照测试:更新快照

调试测试

使用 IntelliJ IDEA,您可以直接从编辑器快速开始调试单个 Jest 测试,或者创建运行/调试配置来调试您的一些或全部测试。

  • 设置断点 所需的位置。

  • 要从编辑器开始调试单个测试,请点击装订区域的 运行按钮重新运行图标 ,然后从列表中选择 调试 <test_name>

  • 要开始调试文件夹中的所有测试,请在 项目 工具窗口中选择该文件夹,然后从上下文菜单中选择 调试 'Tests in <folder name>'

    调试文件夹中的所有测试
  • 要通过运行/调试配置启动测试调试,请创建一个 Jest 运行/调试配置 如上所述

    然后从配置列表中选择 Jest 运行/调试配置,并在列表或工具栏中点击 调试图标

在打开的 Debug(调试)工具窗口 中,按常规方式继续操作: 逐步执行程序暂停并恢复程序执行, 在程序挂起时检查 ,查看调用堆栈和变量,设置监视,计算变量, 查看实际 HTML DOM ,等等。

监控代码覆盖率

使用 IntelliJ IDEA,您还可以监控代码中有多少部分 通过 Jest 测试覆盖。 IntelliJ IDEA 会在专用的 覆盖 工具窗口中显示此统计信息,并在编辑器和 项目 工具窗口 Alt+1 中以可视化方式标记已覆盖和未覆盖的行。

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

  1. 创建一个 Jest 运行/调试配置 ,如上所述

  2. 从主工具栏的列表中选择 Jest 运行/调试配置,然后点击列表右侧的 运行覆盖率图标 &#xa0;。

    或者,您可以快速从编辑器中运行特定的套件或带覆盖率的测试:点击 运行按钮重新运行按钮 并从列表中选择 运行 <test_name> 并生成覆盖率

    从编辑器运行 Jest 测试并带有覆盖率
  3. Coverage 工具窗口中监控代码覆盖率。 报告显示了多少文件经过了测试及其中已覆盖代码行的百分比。 从报告中,您可以跳转到文件并查看哪些行已覆盖(标记为绿色)以及哪些行未覆盖(标记为红色):

    Jest 覆盖率报告

在 Docker 容器内使用 Node.js 运行 Jest 测试

有了 IntelliJ IDEA,您可以在 Docker 容器中运行 Jest 测试,就像在本地一样。

开始之前

  1. 按照 从 JetBrains Marketplace 安装插件中的说明,在 设置 | 插件 页面、选项卡 Marketplace 上安装并启用 Node.js 远程解释器插件。

  2. 请确保 Node.jsDocker 必需插件已在 设置 | 插件 页的 已安装 选项卡上启用。 如需更多信息,请参阅 管理插件

  3. 下载、安装并配置 Docker ,如 Docker 中所述

  4. 在 Docker 中配置 Node.js 远程解释器或通过 Docker Compose将其设置为默认在您的项目中。 还要确保与此远程解释器关联的软件包管理器 设置为项目默认

  5. 打开您的 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" } }
  6. 在编辑器中的任意位置右键点击,然后从上下文菜单中选择 运行 '<package manager> install'

运行测试

  1. 根据 Jest 官方网站 上的说明创建测试。

  2. 将存放单元测试的文件夹标记为测试源文件夹,请参见 内容根

  3. 如同本地开发:直接从编辑器运行和调试单个测试,或者按照上面 运行测试调试测试 中的描述创建一个运行/调试配置来启动部分或全部测试。

最后修改日期: 2025年 9月 22日