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