前端测试框架mocha使用小结

安装

npm i -g mocha

npm i chai -D  //断言库

模块测试

比如有一个add函数

//add.js
function add(a, b){
  return a + b
}
module.exports = add

新建一个测试文件add.test.js(一般测试文件命名都是以被测文件后加.test后缀)
describe:称为"测试套件"（test suite），表示一组相关的测试。它是一个函数，第一个参数是测试套件的名称（"加法函数的测试"），第二个参数是一个实际执行的函数。
it:称为"测试用例"（test case），表示一个单独的测试，是测试的最小单位。

// add.test.js
var add = require("./add.js")
var expect = require("chai").expect;

describe("add功能测试", function(){
  it("1 + 1 = 2", function(){
    expect(add(1, 1)).to.be.equal(2)  //断言库的用法
  })；
  it("返回值为数字", function(){
    expect(add(1, 1)).to.be.a("number")
  });
})

chai中的expect模块的语法很接近自然语言的风格，常见的有:

// 相等或不相等
expect(4 + 5).to.be.equal(9);
expect(4 + 5).to.be.not.equal(10);
expect(foo).to.be.deep.equal({ bar: 'baz' });

// 布尔值为true
expect('everthing').to.be.ok;
expect(false).to.not.be.ok;

// typeof
expect('test').to.be.a('string');
expect({ foo: 'bar' }).to.be.an('object');
expect(foo).to.be.an.instanceof(Foo);

// include
expect([1,2,3]).to.include(2);
expect('foobar').to.contain('foo');
expect({ foo: 'bar', hello: 'universe' }).to.include.keys('foo');

// empty
expect([]).to.be.empty;
expect('').to.be.empty;
expect({}).to.be.empty;

// match
expect('foobar').to.match(/^foo/);

以上方法可以很轻松的测试封装的方法和模块

基于浏览器的测试，如ajax

在这里使用我自己的ajax库 baby-ajax
mocha-phantomjs:是一个 通过 PhantomJS 执行 mocha 浏览器环境测试的工具库。它使用 PhantomJS 的浏览器环境，通过事件监听的方式检测 mocha 测试的执行过程。
mocha-phantomjs-core:是 mocha-phantomjs的核心依赖库。作者将它单独提取出来，是因为它也可以支持 SlimerJS。
SlimerJS :基于的 Gecko 内核(Firefox)的与 PhantomJS 的 API 几乎相同的工具，而且SlimerJS在执行过程中默认会启动有界面的浏览器窗体，可以看到整个执行过程

npm i baby-ajax mocha-phantomjs-core mocha-phantomjs -D

在项目目录下创建测试目录

mocha init test

mocha会自己为我们创建测试模板，包含html，css，js

手动引用mocha.js，chai.js,和自己的测试js

//ajax.test.js
var Ajax = require('../example/static/ajax.js');
var expect = require('chai').expect;

expect(Ajax).to.be.an('object');

describe("get测试", function(done){
    Ajax.get("./data.json")
    .then(function(res){
        expect(res).to.have.include.keys("data","status") //返回值必须有两个key，一个是data，一个是status
        done()
    }, function(){
         expect(res).to.have.include.keys("data","status")
         done()
    })
})

这样就可以在node中模拟浏览器环境，从而可以获取在浏览器中的对象，如window等

总结

使用mocha配合chai以及mocha-phantomjs可以很方便的对函数的执行进行一步一步的监控，数值的类型做限定。但是如果一旦设计到业务逻辑的测试和UI的测试，可能就有点力不从心了，业务功能测试需要数据源的支撑，一味的使用假数据很难覆盖异常情况；而UI的测试虽然可以借助jq的trigger来模拟用户行为，但是这显然是个巨大的任务量，首先要在测试目录下的html写入需要测试的dom元素，再写测试逻辑。可能一个小时就完成的UI需要一天或者更长的时间来写测试逻辑。

前端UI的自动化测试还需慢慢探索，任重而道远。

前端技术交流群：709397872（欢迎加入）