IntelliJ IDEA 2025.1 Help

Karma

Karma 是一个用于测试客户端 JavaScript 的工具。 Karma 在真实浏览器中对您的应用程序执行测试,从而确保测试结果的正确性和可靠性。 IntelliJ IDEA 与 Karma 集成,因此您可以在 IDE 内运行、调试和监控测试的覆盖率。 您可以在 treeview 中查看测试结果,并轻松地从那里导航到测试源。 编辑器中测试旁会显示测试状态,并提供快速运行或调试的选项。

开始之前

  1. 下载并安装 Node.js

  2. 确保 JavaScript and TypeScriptKarma 需要的插件在 设置 | 插件 页面上已启用,标签为 已安装。 如需更多信息,请参阅 管理插件

安装 Karma

除了 Karma 本身,您还需要额外的包(插件),例如 karma-jasminejasmine-core。 进一步了解,请访问 Karma official website

  1. 打开嵌入的 终端Alt+F12)。

  2. 请输入以下任意一个命令:

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

    • 要安装 Karma 和插件作为 开发依赖

      npm install --save-dev karma npm install --save-dev <karma_plugin> <another_karma_plugin>

生成 Karma 配置文件

Karma 测试根据一个 karma.conf.js 配置文件运行,该文件是在交互模式下生成的。 如果您的项目中已经有 karma.conf.js ,请跳过此步骤。 有关 Karma 配置的更多信息,请参阅 Karma 官方网站

创建一个 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

运行测试

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

从编辑器运行单个测试

  • 点击 运行按钮重新运行按钮 在左侧边栏中,并从列表中选择 运行 <test_name>

    您还可以在编辑器中直接查看测试是否通过或失败,这得益于边距中的 测试状态图标 个测试通过个测试失败

创建 Karma 运行配置

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

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

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

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

    可选地指定 Node.js-specific option parameters 和传递给 Node.js 的 environment variables

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

  4. 指定要使用的 karma 包。 这可以是以下之一:

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

    • node_modules/@angular/cli 的路径。

    • 如果您使用 Nxnode_modules/nx 的路径。

    Karma 运行/调试配置 - 选择 Karma 包
  5. 指定应用程序的工作目录。 默认情况下, 工作目录 字段显示项目根文件夹。 若要更改此预定义设置,请指定所需文件夹的路径。

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

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

    例如,要在 Headless Chrome 中运行或调试测试,请在 --browsers ChromeHeadless 字段中输入 Karma 选项。 如需更多信息,请参阅 使用 Headless Chrome 进行自动化测试

    要查看所有可用的 CLI 选项,请在 终端 Alt+F12 中键入 karma start --help

通过运行配置运行测试

  1. 从配置列表中选择 Karma run/debug 配置,并点击列表中或工具栏上的 运行图标

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

重新运行失败测试

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

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

    重新运行单个测试
  • 重新运行上一次会话中的所有测试,请点击测试结果工具栏上的 重新运行按钮 或按下 Ctrl+F5

  • 更改相关源代码后要自动重新运行测试,请按测试结果工具栏上的 “重新运行自动化”切换按钮

导航

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

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

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

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

调试测试

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

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

  1. 在测试中 设置断点

  2. 点击 运行按钮重新运行按钮 并从列表中选择 调试 <test_name>

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

  1. 在必要的地方 Set breakpoints

  2. 创建一个 Karma 运行/调试配置 如上所述

  3. 从配置列表中选择 Karma run/debug 配置,并点击列表中或工具栏上的 调试图标

  4. 在打开的 Debug(调试)工具窗口 中,按常规操作: 逐步执行测试停止并恢复 测试执行, 在挂起时检查测试在控制台中运行 JavaScript 代码片段 ,等等。

监控代码覆盖率

使用 IntelliJ IDEA,您还可以监控代码中有多少部分被 Karma 测试覆盖。 IntelliJ IDEA 会在专用的 覆盖 工具窗口中显示此统计信息,并在编辑器和 项目 工具窗口 Alt+1 中以可视化方式标记已覆盖和未覆盖的行。 要监控覆盖率,您需要安装 karma-coverage 包并更新 karma.conf.js

安装 karma-coverage

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

    npm install &#xa0;--save-dev karma-coverage

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

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

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

    reporters: ['progress', 'coverage']
  3. preprocessors 中添加定义,并以以下格式指定覆盖范围:

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

运行带覆盖率的测试

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

  2. 从配置列表中选择 Karma run/debug 配置,并点击列表中或工具栏上的 运行覆盖率图标

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

    从编辑器运行 Karma 测试,并查看覆盖率
  3. Coverage 工具窗口中监控代码覆盖率。

    每次运行 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 集成。

    • text-summary 生成覆盖率的简明文本摘要,通常输出到控制台。

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

最后修改日期: 2025年 4月 24日