7. mocha的单元测试

[brandonxiang]

源码github地址在此，记得点星：
https://github.com/brandonxiang/example-mocha

单元测试是好代码必经的一步。在python中我使用过内置库unittest，相对来说，比较简单。如果你在知乎上了解到thoughtwork这公司，你会清楚地认识到测试的重要性，thoughtworks非常推崇TDD，也就是先写测试再开始编码，这样看似效率较低，但是却有效提高了代码质量，也很好满足你对需求的测试。单元测试会涉及到两个概念，BDD和TDD。

• BDD **行为驱动开发（Behavior Driven Development）**根据用户的行为需求去指导开发流程
• TDD **测试驱动开发（Test-Driven Development）**先编写单元测试用例代码，测试代码确定需要编写什么产品代码

Javascript的测试框架非常多，参考在Node.js上用什么测试框架好，在Node.js中，mocha应该是测试框架中的首选。在这里，主要介绍mocha，should.js和chai.js。

mocha

mocha本身只是一个单元测试框架，可以兼容第三方断言库。

• should.js
• expect.js
• chai
• better-assert
• unexpected

使用

参考brandonxiang/interpolator中的测试用例。

describe用于描述你需要单元测试的对象，内嵌几层，把整个过程详细描述。

it用于描述你需要单元测试的行为，闭包的函数是测试的内容，测试内容依靠断言库。

should.js

这是一个非常像自然语言语句的断言库。

如果你遇到的测试情况是数字5应该是准确的5，且是一个数字。

(5).should.be.exactly(5).and.be.a.Number();

同时，你想要检验它的内部属性。

var user = {
    name: 'tj'
  , pets: ['tobi', 'loki', 'jane', 'bandit']
};

user.should.have.property('name', 'tj');
user.should.have.property('pets').with.lengthOf(4);

chai.js

这是一个非常常用的断言库。

var chai = require('chai');  
var assert = chai.assert;    // 用 Assert style
var expect = chai.expect;    // 用 Expect style
var should = chai.should();  // 用 Should style

判断它等于某个值

expect(foo).to.equal('bar');

判断它是否为true

expect(foo).to.be.true;

判断它属性某个类型

expect(foo).to.be.a('string');

判断它的长度

expect(foo).to.have.lengthOf(3);  

判断它属性的长度

expect(beverages).to.have.property('tea').with.lengthOf(3);

should和expect

should和expect之间的区别在于，它考虑到ie的错误点，保证浏览器的兼容性。

还有非常多的相关项目，它们可以辅助你完成断言测试。

• chaijs / chai-docs: The chaijs.com website source code.
• chaijs / assertion-error: Custom Error constructor thrown upon an assertion failing.
• chaijs / deep-eql: Improved deep equality testing for Node.js and the browser.
• chaijs / type-detect: Improved typeof detection for Node.js and the browser.
• chaijs / check-error: Error comparison and information related utility for Node.js and the browser.
• chaijs / loupe: Inspect utility for Node.js and browsers.
• chaijs / pathval: Object value retrieval given a string path.
• chaijs / get-func-name: Utility for getting a function's name for node and the browser.

用例

用例1 如何在es6中使用mocha

Node.js笔记七：es6中，我提到了es6的一些优势。es6已经很流行，如何在mocha与es6配合就像是一个必修课。参考Testing in ES6 with Mocha and Babel 6，需要的步骤不多。主要还是在于你对babel的了解。babel-core更像一个引用钩子，而babel-preset-es2015则是es2015/es6的语法转换标准。

npm i babel-core -D
npm i babel-preset-es2015 -D

由于mocha并不会自动帮你写配置文件，所以你需要自己手动在项目的根目录底下编写.babelrc。这里只展示最基础的es2015，至于react和stage-0等，可以根据个人项目的需要自行添加，请自行研究。

{
  "presets": ["es2015"]
}

配置完成后，只需运行以下代码，即可用es6写mocha的测试用例。具体写法可以参考brandonxiang/weapp-i18n这个开源项目。

mocha --compilers js:babel-core/register

用例2 vue-cli项目中的单元测试

如今vue-cli构建项目可以直接送你“一整套”单元测试和覆盖率的工具（使用的是karma，mocha和chai）。

坑：错误vuex requires a Promise polyfill in this browser

使用vuex的项目在测试时会出现一个问题，参考Vue unit test error: vuex requires a Promise polyfill in this browser，需要安装babel-polyfill。babel-polyfill是用于模拟es2015更多是在应用的情况下，非第三方库的情况下。

这意味着你能用一些内置方法像Promise或者WeakMap，静态方法像Array.from或者Object.assign，实例方法像 Array.prototype.includes，和生成器。polyfill帮你加进去全局变量像原始数据类型String一样。

npm install --save-dev babel-polyfill

在karma的配置文件karma.conf.js中添加：

files: [
  '../node_modules/babel-polyfill/dist/polyfill.js',
  'index.js'
],