安装

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(欢迎加入)