前置知识
使用本教程需要对以下工具有一定的了解：
简介
在前端开发中，单元测试是一个不可或缺的环节。而在单元测试中，测试覆盖率的统计与报告也是非常重要的。mocha-istanbul-ui 提供了一个简单易用的界面，帮助开发者快速查看测试覆盖率。
安装
首先，我们需要将 mocha-istanbul-ui 安装到项目中：
npm install --save-dev mocha-istanbul-ui
使用
按照惯例，我们先写一个简单的测试用例：
-- -------------------- ---- -------
----- ------ - -----------------
-------- ------ -- -
------ - - -
-
--------------- ---------- -
----- - - - --- ---------- -
------------------- --- --
--
--接着，我们在 package.json 中添加脚本，在运行测试时使用 mocha-istanbul-ui：
{
...
"scripts": {
"test": "mocha --reporter mocha-istanbul-ui"
},
...
}运行命令 npm run test 即可在浏览器中打开测试覆盖率报告。
指令
mocha-istanbul-ui 还提供了一些调整 UI 的指令。
root
root 指令可以设置覆盖率统计的根目录。
{
...
"scripts": {
"test": "mocha --reporter mocha-istanbul-ui --root src/"
},
...
}以上命令将在 src/ 目录下进行覆盖率统计。
theme
theme 指令可以设置 UI 的主题。
{
...
"scripts": {
"test": "mocha --reporter mocha-istanbul-ui --theme dark"
},
...
}以上命令将使用 dark 主题。
only
only 指令可以只展示指定文件的覆盖率报告。
{
...
"scripts": {
"test": "mocha --reporter mocha-istanbul-ui --only src/index.js"
},
...
}以上命令将只展示 src/index.js 的覆盖率报告。
总结
mocha-istanbul-ui 提供了一个简单易用的界面，帮助开发者快速查看测试覆盖率。在编写单元测试时，我们可以使用它来监测我们的代码是否覆盖到了每一个分支。
示例代码：https://github.com/mochajs/mocha-istanbul-ui#readme
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f73fa8fa9b7065299ccbc49