在前端开发过程中，测试是必不可少的一步。而在测试中，代码覆盖率又是一个非常重要的指标。 blanket 就是一个帮助前端开发者实现代码覆盖率统计的 npm 包。
安装
可以通过 npm 安装 blanket package：
$ npm install blanket
配置
1. 运行测试时使用 blanket 工具计算代码覆盖率
在测试文件中添加如下代码：
var blanket = require("blanket");
blanket.options("filter", "src/"); // 只统计src目录中的代码覆盖率可以通过调用 blanket.options 方法指定要统计覆盖率的文件或目录，或者使用命令行再次指定需要覆盖的文件或目录，例如：
$ mocha --require blanket test.js
2. 在浏览器中使用 blanket 工具查看代码覆盖率
在测试 HTML 文件中引入如下的单元测试库和 blanket：
-- -------------------- ---- ------- ------- ------------------------------- ------- ------------------------------- ------- ------------------------------------- ------- ------------------------------- ------- -------------------------------- ------- -------------------------------- ------- ---------------------------------------------------------------------- -------- ------------------------- -------- ------------------------ ------ ---------
在使用 blanket 时，需要为被测代码添加注释，以告诉 blanket 哪些代码是被测试的。在 JavaScript 文件中，注释将以如下方式被添加：
/* istanbul ignore next */
3. 包含 blanket 测试覆盖率报告
要将 blanket 的测试覆盖率报告添加到项目中，需要在项目的 package.json 文件中添加以下配置：
"scripts": {
"report": "blanket -r html test/test.js",
"open": "open coverage.html"
},运行 npm run report 命令将在项目的根目录下生成 coverage 文件夹，包含覆盖率报告。运行 npm run open 将打开默认的浏览器并浏览覆盖率报告。
示例代码
下面是一个简单的例子，用来说明如何在浏览器中使用 blanket 工具查看代码覆盖率：
HTML 文件：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- ------------
----- ---------------- ------------------------
-------
-------- ------------ -
-------- -----
-
--------
-------
------
---- -----------------
------- -------------------------------
------- -------------------------------
------- -------------------------------
------- --------------------------------
------- --------------------------------
------- ----------------------------------------------------------------------
--------
------------------------- --------
------------------------ ------
---------
------- ------------------------------
---- -----------------------
-------
-------
测试 JS 文件：
-- -------------------- ---- -------
--------------------- ---------- -
---------- ---- ---- ---------- ---------- -
---------------------------------------------
---------------------------------------------
---------------------------------------------
---------------------------------------------
---
---------- ---- ------- ------- --- ----- ---------- -
----------------- ----------------
----------------- -- -----------------
---
---------- ---- ------- ------- --- ----- ---------- -
------------------ -----------------
--------------------- --------------------
---
---------- ---- ------- ------- --- ----- ---------- -
----------------- ----------------
------------------ ----------------
---
---------- ---- ------- ------- --- ----- ---------- -
----------------- ----------------
----------------- -----------------
----------------- ----------------
---
---其中，测试文件中的测试函数用来验证某些函数在特定输入下返回正确的结果。
总结
在本文中，我们讲解了 blanket 的安装和使用教程。借助 blanket，能够帮助前端开发者实现代码覆盖率统计，从而更好地进行测试工作，提高代码的质量与稳定性。希望这个使用教程能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/40241