在前端开发中，代码测试是必不可少的环节。而代码覆盖率测试可以帮助我们发现代码中未被测试到的部分，从而更好地了解项目质量和代码运行状况。在这个过程中，npm 包——broccoli-coverage 可以帮助我们实现代码的覆盖率测试，本文将为读者详细介绍如何使用该工具。
1. broccoli-coverage 是什么？
Broccoli-coverage 是一个基于 Broccoli 的插件，它能帮助我们生成测试覆盖率的报告。当我们运行测试时，broccoli-coverage 会 hook 我们的代码并且插入代码覆盖率报告的代码。之后，broccoli-coverage 会生成测试覆盖率的报告供我们查看。如果你习惯使用 broccoli 构建器构建项目，那么使用 broccoli-coverage 是一个不错的选择。
2. 安装
在开始之前，请确保你已经安装了 node.js，并了解了基本的 npm 包依赖管理。
安装 broccoli-coverage：
npm install --save-dev broccoli-coverage
3. 使用 broccoli-coverage
使用示例
在开始之前，我们建议你先创建一个新的 broccoli 工程。接下来，我们会以此为例介绍如何使用 broccoli-coverage。
在你的项目目录下的 Brocfile.js 中，引入 broccoli-coverage 并初始化：
-- -------------------- ---- ------- ----- -------- - -------------------- ----- -------- - ----------------------------- ----- ------- - ------ ----- -------- - -------- ----- ------- - - -- ------ --------------- ------------------- -- ----------- ------------- ------------------------ -- ----- ------------ - ----------------- --------- --------- -------------- - ----------------------------
然后，可以使用以下命令来运行我们的测试覆盖率工具：
broccoli serve
执行上述命令之后，broccoli 会开始监听我们的文件变化，并且在终端中输出相关的信息：
-> broccoli-serve-method: Serving on http://localhost:4200/
用浏览器打开 http://localhost:4200/coverage.html，你将可以看到我们生成的测试覆盖率报告。
基本配置
为了让 broccoli-coverage 正常工作，我们需要在 Brocfile.js 文件中进行一些基本配置。下面是一个基本配置示例：
-- -------------------- ---- ------- -- ----------- ----- -------- - ----------------------------- ----- ------- - - -- -------- --------------- ------------------- -- ------------------ ------------- ---------------- -- ----- ------- - ------ ----- -------- - -------- ----- ------------ - ----------------- --------- --------- -------------- - -------------
此处我们声明了 coverageFolder 和 outputFolder 两个路径选项，其中 coverageFolder 是存储覆盖率信息的 JSON 文件路径，outputFolder 则是覆盖率查看器时，我们生成的测试覆盖率报告的输出路径。
生成覆盖率报告
在执行上述配置之后，我们可以通过以下命令生成覆盖率报告：
node broccoli serve
运行命令后，在浏览器中输入 http://localhost:4200/coverage.html，我们可以看到通过测试的文件和未被测试到的文件。
过滤不需要测试的文件
一般情况下，我们的项目中有很多文件我们不需要测试，而在生成覆盖率报告的过程中，这些文件也可能会被显示在覆盖率报告中，从而影响我们对代码质量的判断。这时，我们可以通过 options 文件夹下的 exclude 属性来过滤不需要测试的文件，例如：
-- -------------------- ---- ------- ----- ------- - - -------- ------------------------------- --------------- ----------- ------------- ---------------- -- ----- ------- - ------ ----- -------- - -------- ----- ------------ - ----------------- --------- --------- -------------- - -------------
在上述代码中，我们通过 exclude 属性来过滤了 app/templates/components 目录下的文件，这样，在生成的覆盖率报告中，这些文件就不会被显示出来了。
4. 结语
使用 broccoli-coverage 可以帮助我们在前端项目中进行代码覆盖率测试，并且生成详尽的测试报告。因此，熟练使用这个工具是每一个前端开发者的必修课。希望本文能为大家提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8bccdc64669dde52c7