npm 包 mocha-qunit-ui 使用教程

简介

在前端开发中，我们经常需要进行单元测试。而 mocha 是一个比较流行的 JavaScript 测试框架，但是它的 ui 比较简陋，难以方便地查看测试结果。mocha-qunit-ui 就是一个用于美化 mocha 测试结果的 npm 包。

安装

使用 npm 安装：

npm install mocha-qunit-ui

使用

在测试文件中引入 mocha-qunit-ui ：

const mocha = require('mocha');
const mochaQunitUi = require('mocha-qunit-ui');

mocha.reporter(mochaQunitUi);

然后就可以像平常使用 mocha 一样进行测试，例如：

describe('Array', function() {
  describe('#indexOf()', function() {
    it('should return -1 when the value is not present', function() {
      assert.equal([1,2,3].indexOf(4), -1);
    });
  });
});

运行测试，可以看到 mocha-qunit-ui 美化后的结果：

可以看到测试结果更加直观，同时还有测试用时和错误原因的详细信息。

深入理解

mocha-qunit-ui 实现的原理可以从以下几个方面进行了解：

1. 继承 mocha 的 Base ui

默认情况下，mocha 的 ui 只提供简单的命令行输出，而 mocha-qunit-ui 通过继承 mocha 的 Base ui 类，实现了覆盖 exports 成员对象来扩展 mocha 的 ui 功能。

module.exports = QUnitUi;

function QUnitUi(runner) {
  mocha.reporters.Base.call(this, runner);
  // ...
}
inherits(QUnitUi, mocha.reporters.Base);

通过调用 QUnitUi.prototype 对象的方法，我们就实现了 mocha-qunit-ui 所具有的功能。

2. 在 DOM 中生成测试报告

mocha-qunit-ui 通过 HTML 的形式，在 DOM 中生成测试报告。具体实现是：每次测试完成后，都会将测试结果填充到相应的 HTML 元素中，从而达到在页面中展示测试结果的目的。

var statsEl = this.statsEl = document.createElement('div');
statsEl.id = 'mocha-stats';
document.body.appendChild(statsEl);

-- -------------------- ---- -------
-------------------------- - -------------- -
  --- -- - ------------------------------
  --- --- - -----------
  --- - - -----------

  ------------ - ---------------------------

  -- ---- --- --------- -
    ------------ -- -----------------
    ------------ - ----- --------
  - ---- -
    ------------ - -------
  -

  --- ------------------
  --- ----- - ------------------
  -- ------- -
    ----------------------
  - ---- -
    --- -- - -----------------------------
    ----- - --------------
    -------------------
    ------------------------------
  -
--

3. 自定义 CSS 样式

mocha-qunit-ui 美化测试结果还用到了自定义 CSS 样式。通过在 HTML 中嵌入 CSS 样式表，以实现测试结果的自定义显示。

#mocha-test-status {
  font-weight: bold;
  margin-right: .5em;
  vertical-align: middle;
}

QUnitUi.prototype.addStyle = function(css) {
  var el = document.createElement('style');
  el.innerHTML = QUnitUi.utils.stripIndent(css); // 去掉前导空格
  document.head.appendChild(el);
};

总结

mocha-qunit-ui 可以用来美化 mocha 的测试结果输出，提供更加直观的测试结果。同时，通过深入了解其源码实现原理，我们也可以学到自定义 mocha ui 的方法，以及 HTML、CSS 的应用技巧。mocha-qunit-ui 不仅为测试提供了便利，还具有学习意义。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/58230