# Karma

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

> **TL;DR**
> 仅在 IntelliJ IDEA Ultimate 订阅中提供： [下载](https://www.jetbrains.com/zh-cn/idea/download/)试用或 [探索功能](https://www.jetbrains.com/zh-cn/products/compare/?product=idea&product=idea-ult)。
>
>
>
> 所需插件  :
>
>
>
> `JavaScript 和 TypeScript` 、  `Karma` ：这些插件与 IntelliJ IDEA 捆绑在一起，并默认启用。

[Karma](http://karma-runner.github.io/0.12/) 是一个用于测试客户端 JavaScript 的工具。 Karma 在真实浏览器中对您的应用程序执行测试，从而确保测试结果的正确性和可靠性。 IntelliJ IDEA 与 Karma 集成，因此您可以在 IDE 内运行、调试和监控测试的覆盖率。 可以在树形视图中查看测试结果，并从中轻松导航到测试源代码。 在编辑器中，测试状态显示在测试旁边，并提供快速运行或调试该测试的选项。

## 开始之前

Procedure:

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

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

## 安装 Karma

除了 Karma 本身，您还需要额外的包（插件），例如  karma-jasmine  或  jasmine-core 。 进一步了解，请访问 [Karma official website](https://karma-runner.github.io/1.0/intro/installation.html)。

Procedure:

1. 打开你的命令行 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))）。

2. 键入以下命令之一：

* `npm install` 如果 Karma 和所有必需插件已经在 `package.json` 中定义。

* 要安装 Karma 和插件作为 [开发依赖](https://docs.npmjs.com/getting-started/using-a-package.json#specifying-packages)： ``` npm install --save-dev karma npm install --save-dev <karma_plugin> <another_karma_plugin> ```

## 生成 Karma 配置文件

Karma 测试根据一个  `karma.conf.js` 配置文件运行，该文件是在交互模式下生成的。 如果您的项目中已经有  `karma.conf.js` ，请跳过此步骤。 有关 Karma 配置的更多信息，请参阅 [Karma 官方网站](http://karma-runner.github.io/0.12/config/configuration-file.html)。

Procedure: 创建一个 Karma 配置文件

1. 打开   终端  并通过输入以下内容开始  `karma.conf.js` 生成向导，具体取决于您的操作系统：

* 对于 macOS 和 Linux： `./node_modules/karma/bin/karma init`

* 对于 Windows： ``` npm install -g karma-cli karma init ```

2. 回答向导中的问题，指定要使用的测试框架以及要自动捕获的浏览器。

另请参见 [Karma Files: Pattern matching](http://karma-runner.github.io/0.12/config/files.html)。

## 运行测试

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

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/app.runConfigurations.testState.green2.svg) 和 ![测试失败](https://resources.jetbrains.com/help/img/idea/2026.3/app.runConfigurations.testState.red2.svg)。

Procedure: 创建 Karma 运行配置

1. 打开 [运行/调试配置](run-debug-configurations-dialog.html)对话框（  `运行 | 编辑配置` 在主菜单中），点击 !["添加"按钮](https://resources.jetbrains.com/help/img/idea/2026.3/调试配置：Karma](run-debug-configuration-karma.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) 并配置一个新的解释器。

可选择指定要传递给 Node.js 的 [Node.js 特定选项形参](run-debug-configuration-node-js.html#node_parameters)和 [环境变量](https://www.w3schools.com/nodejs/nodejs_environment.asp)。

变量定义显示在   环境变量   字段中，并用分号 (  `;` ) 分隔，例如：

* `NODE_PATH` 用于解析模块时搜索的附加目录列表。 在 macOS 或 Linux 上，目录列表请用冒号 ( `:` ) 分隔；在 Windows 上请用分号 ( `;` ) 分隔。

* `NODE_MODULE_CONTEXTS` 设置为 1 以在各自的全局上下文中加载模块。

* `NODE_DISABLE_COLORS` 设置为 1 以在 REPL 中禁用颜色。

![环境变量](https://resources.jetbrains.com/help/img/idea/2026.3/nodeEnvironmentVariables.png)

或者，点击字段右侧的   浏览   ![编辑环境变量](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.inline.variables.svg)，并在打开的   环境变量   对话框中配置变量列表：

* 请使用 ![](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)、 ![](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.remove.svg)、 ![](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.copy.svg) 和 ![](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.paste.svg) 按钮来管理自定义变量列表。

* 该对话框还会显示可用的系统环境变量列表。 如果不想为当前配置使用系统环境变量，请清除 包括系统环境变量 复选框。

* 准备就绪后，点击 OK 。

3. 指定  `karma.conf.js`  的路径。

4. 指定要使用的  `karma`  软件包。 这可以是以下之一：

* Karma 安装主目录 `/npm/node_modules/karma` 。 如果您通过 Node Package Manager 正常安装了 Karma ，IntelliJ IDEA 将自行检测 Karma 安装位置。

* `node_modules/@angular/cli` 的路径。

* `node_modules/nx` 的路径，如果使用 [Nx](https://nx.dev/getting-started/intro)。

![Karma 运行/调试配置 - 选择 Karma 包](https://resources.jetbrains.com/help/img/idea/2026.3/karma_run_config_select_karma_package.png)

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

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

7. （可选）指定您想要传递给 Karma 的命令行选项，以覆盖  `karma.conf.js`  配置文件中的默认设置。

例如，要在 Headless Chrome 中运行或调试测试，请在  `--browsers ChromeHeadless`  字段中输入   Karma 选项  。 如需更多信息，请参阅 [使用 Headless Chrome 进行自动化测试](https://developers.google.com/web/updates/2017/06/headless-karma-mocha-chai)。

> **Tip:**
> 或者，将  `'ChromeHeadless'`  添加到  `浏览器`  选项中  `karma.conf.js` 。

要查看所有可用的 CLI 选项，请在   终端   `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)) 中输入  `karma start --help` 。

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

1. 在配置列表中选择 Karma 运行/调试配置，然后在列表或工具栏中点击 ![运行图标](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 将执行上一会话中失败的所有测试。

![重新运行失败的 Karma 测试](https://resources.jetbrains.com/help/img/idea/2026.3/ws_rerun_failed_tests_karma_button.png)

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

![重新运行单个测试](https://resources.jetbrains.com/help/img/idea/2026.3/ws_rerun_one_test.png)

* 重新运行上一次会话中的所有测试，请点击测试结果工具栏上的 ![重新运行按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.run.rerun.svg) 或按下 `Ctrl+F5` (Windows), `⌘ R` (macOS), `⌃ F5` (IntelliJ IDEA Classic (macOS)), `⌘ R` (macOS System Shortcuts), `Ctrl+F5` (XWin), `Ctrl+F5` (GNOME), `Ctrl+5` (KDE), `Ctrl+F5` (Emacs), `Ctrl+F5` (Sublime Text), `⌘ R` (Sublime Text (macOS)), `Ctrl+Alt+R` (Visual Studio), `⌘ ⌥ R` (Visual Studio (macOS)), `Ctrl+F5` (NetBeans), `Ctrl+F5` (Eclipse), `Ctrl+F5` (Eclipse (macOS))。

* 更改相关源代码后要自动重新运行测试，请按测试结果工具栏上的 ![“自动重新运行”切换按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.actions.rerunAutomatically.svg)。

## 导航

使用 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))。 测试文件在编辑器中打开时，文本光标放置在测试定义处。

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

## 调试测试

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

Procedure: 从编辑器开始调试单个测试

1. 在测试中 [设置断点](using-breakpoints.html)。

2. 点击 ![运行按钮](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>  。

Procedure: 通过运行/调试配置启动测试调试

1. [设置断点](using-breakpoints.html)（如有必要）。

2. 创建 Karma 运行/调试配置， [如上所述](#createRunConfigKarma)。

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

4. 在打开的 [调试工具窗口](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，您还可以监控代码中有多少部分被 [Karma 测试覆盖](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))) 中以可视化方式标记已覆盖和未覆盖的行。 要监控覆盖率，您需要安装  karma-coverage  包并更新  `karma.conf.js` 。

Procedure: 安装 karma-coverage

* 在命令行 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 karma-coverage`

Procedure: 将 karma-coverage 定义添加到配置文件中

1. 在编辑器中打开  `karma.conf.js` 。

2. 找到  `reporters` 定义，并将  `coverage` 添加到该值列表中，格式如下：

```JAVASCRIPT
reporters: ['progress', 'coverage']
                
```

3. 添加  `预处理器`  定义，并按以下格式指定覆盖作用域：

```JAVASCRIPT
preprocessors: {'**/*.js': ['coverage']}
                
```

Procedure: 运行带覆盖率的测试

1. 创建 Karma 运行/调试配置， [如上所述](#createRunConfigKarma)。

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

或者，使用编辑器中的测试图标快速运行特定的套件或带覆盖率的测试。

![从编辑器运行 Karma 测试，并查看覆盖率](https://resources.jetbrains.com/help/img/idea/2026.3/ws_karma_run_test_from_editor_with_coverage.png)

3. 在 [Coverage](null) 工具窗口中监控代码覆盖率。

每次运行  Karma  测试时，实际上都会在磁盘上生成覆盖率报告。 覆盖率报告的格式可以在配置文件中进行配置，例如：

```
// karma.conf.js
module.exports = function(config) {
config.set({ ...
// optionally, configure the reporter
coverageReporter: { type : 'html', dir : 'coverage/' }
...
});};

```

以下  `类型`  值是可接受的：

* `html` 生成注释了源代码的一堆 HTML 文件。

* `lcovonly` 会生成一个 `lcov.info` 文件。

* `lcov` 生成 HTML + `.lcov` 文件。 此格式为默认应用。

* `cobertura` 生成一个 `cobertura-coverage.xml` 文件，方便与 Hudson 集成。

* `文本摘要` 生成覆盖率的简明文本摘要，通常输出到控制台。

* `文本` 生成了一个包含所有文件覆盖率的详细文本表。

## See also

### 过程

[测试框架](testing-frameworks.html)

### 参考

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