Karma

1. 请确保您的计算机上安装了 Node.js。

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

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 配置文件

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。

从编辑器运行单个测试

• 点击 或 在左侧边栏中，并从列表中选择 运行 <test_name>。

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

创建 Karma 运行配置

1. 打开 运行/调试配置对话框（运行 | 编辑配置 在主菜单中），点击 在左侧窗格中，然后从列表中选择 Karma。 运行/调试配置：Karma 对话框打开。

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

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

   您也可以选择另一个已配置的本地或远程解释器，或点击 并配置一个新的。

   有关更多信息，请参阅 配置远程 Node.js 解释器、 配置本地 Node.js 解释器 和 在 Windows Subsystem for Linux 上使用 Node.js。

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

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

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

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

   • node_modules/@angular/cli 的路径。

   • 如果您使用 Nx， node_modules/nx 的路径。

   

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

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

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

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

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

通过运行配置运行测试

1. 从配置列表中选择 Karma 运行/调试配置，然后在列表或工具栏中点击 。

   

2. 在 测试运行器 选项卡的 运行 工具窗口中监控测试执行并分析测试结果。 如需更多信息，请参阅 探索测试结果。

重新运行失败的测试

• 点击 测试结果工具栏。 WebStorm 将执行上一会话中失败的所有测试。

  

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

  

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

  

• 更改相关源代码后要自动重新运行测试，请按测试结果工具栏上的 。

  

有关更多信息，请参阅 重新运行测试。

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

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

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

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

1. 在测试中 设置断点。

2. 点击 或 并从列表中选择 调试<test_name>。

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

1. 设置断点 在必要的地方。

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

3. 从配置列表中选择 Karma run/debug 配置，并点击列表中或工具栏上的 。

   

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

安装 karma-coverage

• 在嵌入的 终端 (Alt+F12 )中，输入：

  npm install  --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 配置，并点击列表中或工具栏上的 。

   

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

   

3. 在 Coverage 工具窗口中监控代码覆盖率。

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

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

   以下 type 值是可接受的：

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

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

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

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

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

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