# Jest

> For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt).

> **TL;DR**
> 必需插件  :
>
>
>
> `JavaScript 和 TypeScript`  -  插件与 IntelliJ IDEA 捆绑在一起，并默认启用。

Jest  是一个专门用于客户端 JavaScript 应用程序和 [React](https://facebook.github.io/react/) 应用程序的测试平台。 了解更多关于此平台的信息，请访问 [Jest](https://facebook.github.io/jest/)官方网站。

您可以在 IntelliJ IDEA 中运行和调试 Jest 测试。 可以在树形视图中查看测试结果，并从中轻松导航到测试源代码。 在编辑器中，测试状态显示在测试旁边，并提供快速运行或调试该测试的选项。

## 开始之前

Procedure:

1. 下载并安装 [Node.js](http://nodejs.org/#download)。

2. 请确保已在设置中启用  JavaScript 和 TypeScript  插件。 按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))打开设置，然后选择  `插件` 。 在搜索字段中，键入  JavaScript 和 TypeScript 。 有关插件的更多信息，请参阅 [管理插件](managing-plugins.html)。

## 安装和配置 Jest

Procedure:

* 在命令行 shell 或嵌入式   终端  （ `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))）中输入：

`npm install --save-dev jest`

想了解更多信息，请参阅 Jest 官方网站上的 [入门指南](https://jestjs.io/docs/en/getting-started)和 [配置 Jest](https://jestjs.io/docs/en/configuration)。

## 运行测试

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

有关为 JavaScript 和 TypeScript 代码创建 Vitest 测试的更多信息，请参阅 Vitest 官方网站上的 [Vitest 功能](https://vitest.dev/guide/features.html)。

Procedure: 从编辑器运行单个测试

* 点击装订区域中的 ![运行图标](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.run.run.svg) 或 ![重新运行图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.rerun.svg)，并从列表中选择   运行 <test_name>  。

![从编辑器运行单个测试](https://resources.jetbrains.com/help/img/idea/2026.3/ws_run_test_from_editor_600.animated.gif) 还可以直接在编辑器中通过装订区域中的  测试状态 图标 ![测试通过](https://resources.jetbrains.com/help/img/idea/2026.3/app.runConfigurations.testState.green2.svg) 和 ![测试失败](https://resources.jetbrains.com/help/img/idea/2026.3/app.runConfigurations.testState.red2.svg) 查看测试是否通过或失败。

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

* 在   项目   工具窗口（ `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))）中，选择包含测试的文件夹，然后选择   运行 'Tests in <folder name>'  。

![运行文件夹中的所有测试](https://resources.jetbrains.com/help/img/idea/2026.3/ws_jest_run_tests_from_folder.png)

Procedure: 创建 Jest 运行配置

1. 打开 [运行/调试配置](run-debug-configurations-dialog.html)对话框（  `运行 | 编辑配置` 在主菜单中），点击 !["添加"按钮](https://resources.jetbrains.com/help/img/idea/2026.3/调试配置：Jest](run-debug-configuration-jest.html) 对话框将打开。

> **Tip:**
> 或者，在   项目   工具窗口 ( `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))) 中选择一个测试文件，然后从上下文菜单中选择   创建 <文件名>  。

2. 指定要使用的 Node.js 运行时。

如果您选择   项目   别名， IntelliJ IDEA 将自动使用在 [JavaScript 运行时](javascript-runtime.html) 页面上   Node.js 运行时   字段中的项目默认解释器。 在大多数情况下， IntelliJ IDEA 会检测到项目的默认运行时，并自动填写该字段。

您还可以选择其他已配置的本地或远程解释器，或点击 ![浏览按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.general.ellipsis.svg) 并配置一个新的解释器。

3. 指定  jest 、  react-scripts 、  react-script-ts 、  react-super-scripts 或  react-awesome-scripts 包的位置。

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

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

6. 可选：

指定要使用的  `jest.config.js`  或  `jest.config.ts`  文件：从列表中选择相应的文件，或者点击 ![浏览按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.general.ellipsis.svg) 并在打开的对话框中进行选择，或者直接在字段中输入路径。

如果该字段为空，IntelliJ IDEA 会查找一个  `package.json`  文件，其中包含  `jest`  密钥。 搜索会在文件系统中从  工作目录  向上执行。 如果未找到合适的  `package.json`  文件，则会实时生成 [Jest 默认配置](https://facebook.github.io/jest/docs/en/configuration.html#options)。

7. 可选：

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

也可以稍后开启 [监视](https://jestjs.io/docs/cli#--watch) 模式，方法是在测试会话期间按下   监视更改   切换按钮（位于   运行   工具窗口中），请参阅下方的 [在更改时自动重新运行测试（监视模式）](#ws_js_test_rerun_tests_on_changes)。

8. 可选：

指定执行命令的环境变量。 IntelliJ IDEA 将在  `process.env`  的补全列表中显示这些变量。

![Jest 运行配置的环境变量补全](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js-jest_test_rc_env_var_completion.png)

9. 在   Node 选项   字段中，您可以选择性地输入特定于 Node.js 的命令行选项，以传递给 Node.js 可执行文件。 可接受的选项是：

* 使用 `--require coffeescript/register` ，运行期间可以将 CoffeeScript 文件即时编译为 JavaScript。 此模式要求 `register.js` 文件位于项目中，该文件是 `coffeescript` 软件包的一部分。 因此，请确保已在本地安装 `coffeescript` 软件包，如 [安装 CoffeeScript 编译器](coffeescript.html#ws_coffee_installation)中所述。

* 使用 `--inspect` 或 `--inspect-brk` 参数以支持 [Chrome Debugging Protocol](https://developer.chrome.com/devtools/docs/debugger-protocol)。

* 要在项目中使用 [ECMAScript 模块](https://jestjs.io/docs/ecmascript-modules)，请将 `—experimental-vm-modules` 标志添加到 Node 选项 字段。

Procedure: 通过运行配置运行测试

1. 从配置列表中选择 Jest 运行/调试配置，然后在列表或工具栏中点击 ![运行图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.run.run.svg)。

2. 在   测试运行器   选项卡的   运行   工具窗口中监控测试执行并分析测试结果。 有关详细信息，请参考 [探索测试结果](viewing-and-exploring-test-results.html)。

Procedure: 重新运行失败的测试

* 点击 ![重新运行失败测试图标](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.run.restartFailedTests.svg)测试结果工具栏。 IntelliJ IDEA 将执行上一会话中失败的所有测试。

* 若要重新运行某个特定失败的测试，请在其上下文菜单中选择  `运行 <test name>` 。

Procedure: 更改时自动重新运行测试（观察模式）

IntelliJ IDEA 支持 [watch](https://jestjs.io/docs/cli#--watch)模式，在对测试相关的源文件进行任何更改后，测试会自动重新运行。 因此，您可以直接修改代码，而无需手动重新运行测试或重新启动   Jest   run/debug configuration。

* 在 [测试运行器选项卡](null)中，按下   监视更改  切换按钮。

![启用 Watch Changes 模式](https://resources.jetbrains.com/help/img/idea/2026.3/ws_jest_watch_mode.animated.gif)

* 或者，在运行/调试配置的   Jest 选项   字段中添加  `--watch`  标志，请参阅上面的 [创建一个 Jest 运行配置](#ws_js_test_rc_jest_options)。

## 导航

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

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

> **Tip:**
> 这样的导航仅在测试文件遵循最受欢迎的的命名约定时才有效，例如，具有  `.test.` 、  `.spec.`  或  `_spec.`  后缀，并且位于源文件旁边或  `test`  文件夹中。

Procedure:

* 在编辑器中打开文件，选择上下文菜单中的  `转到 | 测试`  或  `转到 | 测试对象` ，或者直接按 `Ctrl+Shift+T` (Windows), `⌘ ⇧ T` (macOS), `⌘ ⇧ T` (IntelliJ IDEA Classic (macOS)), `⌃ ⇧ T` (macOS System Shortcuts), `Ctrl+Shift+T` (XWin), `Ctrl+Shift+T` (GNOME), `Ctrl+Shift+T` (KDE), `Ctrl+Shift+T` (Emacs), `Ctrl+Shift+T` (Sublime Text), `Ctrl+Shift+T` (Sublime Text (macOS)), `Ctrl+Shift+T` (Visual Studio), `Ctrl+Shift+T` (Visual Studio (macOS)), `Ctrl+Shift+T` (NetBeans), `Ctrl+Shift+T` (Eclipse), `Ctrl+Shift+T` (Eclipse (macOS))，即可在测试和其主题之间进行切换。

* 从测试结果跳转到测试定义，双击   测试运行器   选项卡中的测试名称，或从上下文菜单中选择  `跳转到源` ，或者按 `F4` (Windows), `⌘ ↓` (macOS), `F4` (IntelliJ IDEA Classic (macOS)), `F4` (macOS System Shortcuts), `F4` (XWin), `F4` (GNOME), `F4` (KDE), `F4` (Emacs), `F4` (Sublime Text), `F4` (Sublime Text (macOS)), `F4` (Visual Studio), `⌘ ↓` (Visual Studio (macOS)), `F4` (NetBeans), `F12` (Eclipse), `F3` (Eclipse (macOS))。 测试文件在编辑器中打开时，文本光标放置在测试定义处。

* 要从测试或套件定义跳转到   测试运行器   选项卡中的结果，请点击边栏中的 ![测试通过图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.runConfigurations.testState.green2.svg) 或 ![测试失败图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.runConfigurations.testState.red2.svg)，然后从列表中选择   在测试树中选择 <test_name>  。

![从测试定义跳转到测试树](https://resources.jetbrains.com/help/img/idea/2026.3/ws_jest_jump_to_test_tree.animated.gif)

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

![从失败的 Jest 测试中跳到失败的行](https://resources.jetbrains.com/help/img/idea/2026.3/ws_jest_jump_to_failure.animated.gif)

## 快照测试

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

当您使用  `.toMatchSnapshot()`  方法运行测试时，Jest 会在  `__snapshots__`  文件夹中创建一个快照文件。 要从测试跳转到相关的快照，请点击测试旁边空隙中的 ![前往快照（相机）图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.dump.svg)，或者从  `.toMatchSnapshot()`  方法的上下文菜单中选择所需的快照。

![Jest 快照测试：从测试文件跳转到相应的快照](https://resources.jetbrains.com/help/img/idea/2026.3/ws_go_to_jest_snapshhot.png)

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

要查看导致此不匹配的原因，请通过   点击查看差异   链接在   测试运行器   选项卡的右侧窗格中打开 IntelliJ IDEA 内置的 [差异查看器](differences-viewer.html)。

![Jest 快照：在 IntelliJ IDEA 差异查看器中比较预期和实际快照](https://resources.jetbrains.com/help/img/idea/2026.3/ws_jest_diff_view.animated.gif)

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

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

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

![Jest 快照测试：更新快照](https://resources.jetbrains.com/help/img/idea/2026.3/ws_jest_update_snapshot.png)

## 调试测试

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

Procedure:

* [设置断点](using-breakpoints.html) 所需的位置。

* 要从编辑器开始调试单个测试，请点击装订区域的 ![运行按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.run.run.svg) 或 ![重新运行图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.rerun.svg)，然后从列表中选择   调试 <test_name>  。

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

![调试文件夹中的所有测试](https://resources.jetbrains.com/help/img/idea/2026.3/ws_jest_debug_all_tests_in_folder.png)

* 要通过运行/调试配置启动测试调试，请创建一个 Jest 运行/调试配置 [如上所述](#createRunConfigJest)。

然后从配置列表中选择 Jest 运行/调试配置，并在列表或工具栏中点击 ![调试图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.run.debug.svg)。

在打开的 [调试工具窗口](debug-tool-window.html) 中，按常规方式进行操作： [单步执行程序](stepping-through-the-program.html)、 [停止并恢复](starting-the-debugger-session.html#pause-resume)程序执行、 [在暂停时检查](examining-suspended-program.html)、查看调用堆栈和变量、设置监视、评估变量、 [查看实际的 HTML DOM](viewing-actual-html-dom.html) 等。

要忽略源代码映射并逐步执行实际运行的代码，请在   调试  工具窗口的工具栏上点击 ![禁用源代码映射切换按钮​](https://resources.jetbrains.com/help/img/idea/2026.3/sourceMapDisable.png)。

## 监控代码覆盖率

使用 IntelliJ IDEA，您还可以监控代码中有多少部分 [通过 Jest 测试覆盖](http://en.wikipedia.org/wiki/Code_coverage)。 IntelliJ IDEA 会在专用的   覆盖率   工具窗口中显示此统计信息，并在编辑器和   项目   工具窗口 ( `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))) 中以可视化方式标记已覆盖和未覆盖的行。

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

1. 创建一个 Jest 运行/调试配置 [，如上所述](#createRunConfigJest)。

2. 在主工具栏的列表中选择该 Jest 运行/调试配置，然后点击列表右侧的 ![运行覆盖率图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.general.runWithCoverage.svg)  。

或者，您可以快速从编辑器中运行特定的套件或带覆盖率的测试：点击 ![运行按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.run.run.svg) 或 ![重新运行按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.rerun.svg) 并从列表中选择   运行 <test_name> 并查看覆盖率  。

![从编辑器运行 Jest 测试并带有覆盖率](https://resources.jetbrains.com/help/img/idea/2026.3/ws_jest_quickly-run-with-coverage.png)

3. 在 [Coverage](null) 工具窗口中监控代码覆盖率。 报告显示了多少文件经过了测试及其中已覆盖代码行的百分比。 可以从报告跳转到文件，查看哪些行已覆盖（标记为绿色），哪些行未覆盖（标记为红色）。

![Jest 覆盖率报告](https://resources.jetbrains.com/help/img/idea/2026.3/ws_jest_coverage_report.png)

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

有了 IntelliJ IDEA，您可以在 Docker 容器中运行 [Jest](https://jestjs.io/) 测试，就像在本地一样。

Procedure: 开始之前

1. 按照 [从 JetBrains Marketplace 安装插件](managing-plugins.html#install_plugin_from_repo)中所述，在   设置 | 插件  页面上安装并启用  Node.js 远程解释器 插件。

2. 请确保  Node.js  和  Docker  所需插件已在   设置 | 插件   页面上启用。 有关更多信息，请参阅 [管理插件](managing-plugins.html)。

3. 下载、安装并配置  Docker ，如 [Docker](docker.html) 中所述。

4. [在 Docker 中配置 Node.js 远程解释器](node-with-docker.html#ws_node_docker_configure_interpreter)，或通过 [Docker Compose](node-with-docker-compose.html#ws_node_docker_compose_configure_interpreter)，并在您的项目中 [将其设置为默认](node-with-docker.html#ws_node_docker_manage_dependencies)。 此外，请确保与此远程解释器关联的包管理器已 [设置为项目默认](node-with-docker.html#ws_node_docker_manage_dependencies)。

5. 打开您的  `package.json`  并确保 Jest 在  `devDependencies`  部分列出：

```JSON
{
    "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'  。

Procedure: 运行测试

1. 根据 [Jest 官方网站](https://jestjs.io/) 上的说明创建测试。

2. 将存储单元测试的文件夹标记为测试源文件夹，参见 [内容根](content-roots.html)。

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

## See also

### 参考

[运行/调试配置：Jest](run-debug-configuration-jest.html)