简介
在前端开发中，我们经常需要进行单元测试。而 mocha 是一个比较流行的 JavaScript 测试框架，但是它的 ui 比较简陋，难以方便地查看测试结果。mocha-qunit-ui 就是一个用于美化 mocha 测试结果的 npm 包。
安装
使用 npm 安装：
--- ------- --------------
使用
在测试文件中引入 mocha-qunit-ui ：
----- ----- - ----------------- ----- ------------ - -------------------------- -----------------------------
然后就可以像平常使用 mocha 一样进行测试，例如：
----------------- ---------- -
---------------------- ---------- -
---------- ------ -- ---- --- ----- -- --- --------- ---------- -
-------------------------------- ----
---
---
---运行测试，可以看到 mocha-qunit-ui 美化后的结果：
可以看到测试结果更加直观，同时还有测试用时和错误原因的详细信息。
深入理解
mocha-qunit-ui 实现的原理可以从以下几个方面进行了解：
1. 继承 mocha 的 Base ui
默认情况下，mocha 的 ui 只提供简单的命令行输出，而 mocha-qunit-ui 通过继承 mocha 的 Base ui 类，实现了覆盖 exports 成员对象来扩展 mocha 的 ui 功能。
-------------- - -------- -------- --------------- - ------------------------------- -------- -- --- - ----------------- ----------------------
通过调用 QUnitUi.prototype 对象的方法，我们就实现了 mocha-qunit-ui 所具有的功能。
2. 在 DOM 中生成测试报告
mocha-qunit-ui 通过 HTML 的形式，在 DOM 中生成测试报告。具体实现是：每次测试完成后，都会将测试结果填充到相应的 HTML 元素中，从而达到在页面中展示测试结果的目的。
--- ------- - ------------ - ------------------------------ ---------- - -------------- -----------------------------------
-------------------------- - -------------- -
--- -- - ------------------------------
--- --- - -----------
--- - - -----------
------------ - ---------------------------
-- ---- --- --------- -
------------ -- -----------------
------------ - ----- --------
- ---- -
------------ - -------
-
--- ------------------
--- ----- - ------------------
-- ------- -
----------------------
- ---- -
--- -- - -----------------------------
----- - --------------
-------------------
------------------------------
-
--3. 自定义 CSS 样式
mocha-qunit-ui 美化测试结果还用到了自定义 CSS 样式。通过在 HTML 中嵌入 CSS 样式表，以实现测试结果的自定义显示。
------------------ - ------------ ----- ------------- ----- --------------- ------- -
-------------------------- - ------------- - --- -- - -------------------------------- ------------ - ------------------------------- -- ------ ------------------------------ --
总结
mocha-qunit-ui 可以用来美化 mocha 的测试结果输出，提供更加直观的测试结果。同时，通过深入了解其源码实现原理，我们也可以学到自定义 mocha ui 的方法，以及 HTML、CSS 的应用技巧。mocha-qunit-ui 不仅为测试提供了便利，还具有学习意义。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/58230