前端单元测试框架-Mocha

引言

随着前端工程化这一律念的产生，项目开发中前端的代码量可谓是‘急剧上升’，因此在这种状况下，咱们如何才能保证代码的质量呢，对于框架，好比React、Vue，由于有本身的语法规则，及时每一个开发人员的编码风格规范各不相同，但最终的产出都大同小异，代码质量差距不是很大；但对于一些基础类库或方法的开发，咱们就要谨慎又谨慎，代码质量必定要高，尽可能避免出现Bug。

那咱们如何作到产出高质量代码呢？单元测试才是正解，俗话说‘跳过单元测试和不仔细过冒烟就交由QA测试的，就是在耍流氓’（这句话是我本身编的）；Mocha是针对Javascript的单元测试工具，下面咱们就来看看如何使用它

 

概念

Mocha: Javascript测试框架

chai：断言库，需配合Mocha使用

 

最简单的用法

步骤一：安装

假设咱们是在已有项目中进行单元测试

安装Mocha

/*全局安装*/
$ npm install --global mocha　　

/*局部安装*/
$ npm install --save-dev mocha

安装chai

/*局部安装*/
$ npm install --save-dev chai

 

全局与局部的区别：如果局部安装，依赖就会写入package.json的dependencies或devDependencies中，这样当别人从你的Github上克隆代码时，就不须要注意‘依赖包全不全啊’？‘还需不要安装其余依赖啊？’等等这类的问题，由于'npm install'会将全部依赖下载到本地

 

步骤二：编写Js源文件与测试文件

源文件

// add.js
1 function add(x, y) {
2   return x + y;
3 }
4 
5 module.exports = add;

测试文件

 // add.test.js
 1 var add = require('./add.js');
 2 var expect = require('chai').expect;
 3 
 4 describe('加法函数的测试', function() {
 5   it('1 加 1 应该等于 2', function() {
 6     expect(add(1, 1)).to.be.equal(2);
 7   });
 8   it('1 加 -1 应该等于 0', function() {
 9     expect(add(1, -1)).to.be.equal(0);
10   });
11 });

 

步骤三：运行测试文件

$ mocha add.test.js

运行截图：

以上就是Mocha最简单的使用方式，细不细很简单啊O(∩_∩)O哈哈~，下面咱们再看点进阶的

 

进阶之路

进阶一：describe和it是什么？

describe："测试组"，也称测试块，表示我要进行一系列测试，至关于一个group

it："测试项"，也称测试用例，表示这是"一系列测试"中的一项，至关于item，如何测试？测试逻辑？都是在it的回调函数中实现的

 

进阶二：什么？describe也有"生命周期"？

每一个测试块（describe）有4个周期，分别是：

 1 describe('test', function() {
 2   // 在本测试块的全部测试用例以前执行且仅执行一次
 3   before(function() {
 4     
 5   });
 6   // 在本测试块的全部测试用例以后执行且仅执行一次
 7   after(function() {
 8     
 9   });
10 
11   // 在测试块的每一个测试用例以前执行（有几个测试用例it，就执行几回）
12   beforeEach(function() {
13     
14   });
15   // 在测试块的每一个测试用例以后执行（同上）
16   afterEach(function() {
17     
18   });
19   
20   // 测试用例
21   it('test item1', function () {
22 
23   })
24 });

 

进阶三：在进阶二中周期代码是ES6风格，须要安装babel模块转码

这里分两种状况：1.全局安装   2.局部安装

若是是全局方式安装的babel，那么咱们也要使用全局的Mocha来调用babel-core模块

$ npm install -g babel-core babel-preset-es2015
$ mocha --compilers js:babel-core/register

但若是是局部方式安装的babel，那么咱们就要使用局部的Mocha来调用babel-core模块

$ npm install --save-dev babel-core babel-preset-es2015
$ ../node_modules/mocha/bin/mocha --compilers js:babel-core/register

为何呢？由于Mocha是根据自身的路径来寻找babel模块的，因此要全局对应全局，局部对应局部

这里少了很重要的一步：在测试以前，须要配置babel转码规则，在项目根目录，记住‘必定要是根目录’，新建.babelrc文件，这个文件是供babel使用的

// .babelrc
{
  "presets": [ "es2015" ] //这里制定使用es2015规则转码
}

 

进阶四：测试还能够是异步的？

异步测试与普通测试有什么不一样：测试用例的回调函数中多了一个参数done

 1 var add = require('../src/add.js');
 2 var expect = require('chai').expect;
 3 
 4 describe('加法函数的测试', function() {
 5   // 异步测试
 6   it('1 加 1 应该等于 2', function(done) {
 7     var clock = setTimeout(function () {
 8       expect(add(1, 1)).to.be.equal(2);
 9       done(); // 通知Mocha测试结束
10     },1000);
11   });
12 
13   // 同步测试
14   it('1 加 0 应该等于 1', function() {
15     expect(add(1, 0)).to.be.equal(1);
16   });
17 });

异步测试须要注意一点：必须手动调用done，不然该异步测试就会失败，见下方代码与运行截图：

代码：

 1 var add = require('../src/add.js');
 2 var expect = require('chai').expect;
 3 
 4 describe('加法函数的测试', function() {
 5   // 异步测试
 6   it('1 加 1 应该等于 2', function(done) {
 7     var clock = setTimeout(function () {
 8       expect(add(1, 1)).to.be.equal(2);
 9       //done();咱们不主动调用done，看看会发生什么？
10     },1000);
11   });
12 
13   // 同步测试
14   it('1 加 0 应该等于 1', function() {
15     expect(add(1, 0)).to.be.equal(1);
16   });
17 });

运行截图：

从运行结果不难看出，测试用例1失败了，并且Mocha提示咱们：若是是异步测试或钩子，那么必定要确保done方法被调用，不然测试就会失败，但并不会影响其余用例

那么，异步测试有哪些应用场景呢？那就是测试数据接口，咱们能够这样：

1 it('异步请求测试', function() {
2   return fetch('https://api.github.com')
3     .then(function(res) {
4       return res.json();
5     }).then(function(json) {
6       expect(json).to.be.an('object'); // 测试接口返回的是否为对象类型的数据，也就是json格式
7     });
8 });

 

进阶五：若是咱们想只执行某个测试用例呢？或者除了某个用例，其余的都执行

Mocha有两个用例管理api：only和skip

1.若是只想执行某个用例，咱们就用only方式调用它：

 1 var add = require('../src/add.js');
 2 var expect = require('chai').expect;
 3 
 4 describe('加法函数的测试', function() {
 5   // 一个测试组中不是只能有一个only，能够有多个only方式执行的用例
 6   it.only('1 加 1 应该等于 2', function() {
 7     expect(add(1, 1)).to.be.equal(2);
 8   });
 9 
10 
11   it.only('1 加 0 应该等于 1', function() {
12     expect(add(1, 0)).to.be.equal(1);
13   });
14 
15   // 但若是组内已经有了only，那么非only方式执行的用例就必定不会被执行，切记
16   it('1 加 -1 应该等于 0', function() {
17     expect(add(1, -1)).to.be.equal(0);
18   });
19 
20 });

运行截图：

能够看出，第三个用例并无被执行

2.若是想跳过某个用例，咱们就用skip方式调用它：

 1 var add = require('../src/add.js');
 2 var expect = require('chai').expect;
 3 
 4 describe('加法函数的测试', function() {
 5 
 6   it('1 加 1 应该等于 2', function() {
 7     expect(add(1, 1)).to.be.equal(2);
 8   });
 9 
10   // 同理，skip方式执行的用例在同一组内也能够有多个
11   it.skip('1 加 0 应该等于 1', function() {
12     expect(add(1, 0)).to.be.equal(1);
13   });
14 
15 
16   it.skip('1 加 -1 应该等于 0', function() {
17     expect(add(1, -1)).to.be.equal(0);
18   });
19 
20 });

运行截图：

第2，3个用例被跳过了

 

 

结语

以上就是Mocha测试框架的简单介绍，测试api不仅有文中的to.be.equal，文中只是"千牛一毛"，还有不少api以及更高级的使用特性，详细可参照官方网站：http://mochajs.org/

本文章内容参照了阮一峰老师的文章《测试框架 Mocha 实例教程》，感兴趣的同窗能够看一下