在前端开发中，测试是确保代码质量的重要手段。而 code coverage 可以帮助我们监控测试的质量，即测试是否覆盖了代码的所有分支和语句。在 Mocha 测试中，我们可以使用 istanbul 这个工具来生成 code coverage 报告。
安装 istanbul
首先，我们需要安装 istanbul。可以使用 npm 进行安装：
--- ------- -------- ----------
修改测试脚本
接下来，我们需要修改测试脚本，让它能够生成 code coverage 报告。假设我们的测试脚本为 test.js，代码如下：
----- ------ - ------------------
----------------- ---------- -
---------------------- ---------- -
---------- ------ -- ---- --- ----- -- --- --------- ---------- -
-------------------------------- ----
---
---
---我们需要在命令行中运行 istanbul，然后执行测试脚本。可以使用以下命令：
-------- ----- ------
这个命令会覆盖 _mocha 命令，并在运行测试脚本时生成 code coverage 报告。运行后，我们可以在命令行中看到测试的覆盖率：
------------------------------- -------- ------- ------------------------------- ---------- - ---- - --- - -------- - ---- - --- - --------- - ---- - --- - ----- - ---- - --- - --------------------------------------------------------------------------------
这个报告告诉我们，测试覆盖了代码的所有语句。但是，由于代码非常简单，我们无法测试分支和函数。
测试分支和函数
为了测试分支和函数，我们需要修改测试脚本，让它包含更多的代码。下面是一个例子：
----- ------ - ------------------
-------- ----------- -
------ --- - - --- --
-
------------------ ---------- -
---------- ------ ---- ---- --- ------ -- ------ ---------- -
----------------------- ------
---
---------- ------ ----- ---- --- ------ -- ----- ---------- -
----------------------- -------
---
---这个测试脚本包含了一个函数 isEven，它判断一个数是否为偶数。我们需要测试这个函数的两个分支：当数为偶数时返回 true，当数为奇数时返回 false。
现在，我们再次运行 istanbul，然后执行测试脚本：
-------- ----- ------
这个命令会生成一个 code coverage 报告，告诉我们测试的覆盖率。我们可以在命令行中看到报告：
------------------------------- -------- ------- ------------------------------- ---------- - ---- - --- - -------- - ---- - --- - --------- - ---- - --- - ----- - ---- - --- - --------------------------------------------------------------------------------
这个报告告诉我们，测试覆盖了代码的所有分支和函数。
生成 HTML 报告
除了在命令行中查看报告，我们还可以生成 HTML 报告。可以使用以下命令：
-------- ----- ------ -------- ----
这个命令会生成一个 coverage 目录，其中包含 HTML 报告。我们可以在浏览器中打开 index.html 文件查看报告。
总结
在 Mocha 测试中，使用 istanbul 可以帮助我们监控测试的质量，并生成 code coverage 报告。通过修改测试脚本，我们可以测试代码的所有分支和函数。同时，我们还可以生成 HTML 报告，方便查看测试结果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c991c3add4f0e0ff362b0c