引言

随着前端工程化这一概念的产生,项目开发中前端的代码量可谓是‘急剧上升’,所以在这种情况下,我们如何才能保证代码的质量呢,对于框架,比如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) {
return x + y;
} module.exports = add;

测试文件

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

步骤三:运行测试文件

$ mocha add.test.js

运行截图:

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

进阶之路

进阶一:describe和it是什么?

describe:"测试组",也称测试块,表示我要进行一系列测试,相当于一个group

it:"测试项",也称测试用例,表示这是"一系列测试"中的一项,相当于item,如何测试?测试逻辑?都是在it的回调函数中实现的

进阶二:什么?describe也有"生命周期"?

每个测试块(describe)有4个周期,分别是:

 describe('test', function() {
// 在本测试块的所有测试用例之前执行且仅执行一次
before(function() { });
// 在本测试块的所有测试用例之后执行且仅执行一次
after(function() { }); // 在测试块的每个测试用例之前执行(有几个测试用例it,就执行几次)
beforeEach(function() { });
// 在测试块的每个测试用例之后执行(同上)
afterEach(function() { }); // 测试用例
it('test item1', function () { })
});

进阶三:在进阶二中周期代码是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

 var add = require('../src/add.js');
var expect = require('chai').expect; describe('加法函数的测试', function() {
// 异步测试
it('1 加 1 应该等于 2', function(done) {
var clock = setTimeout(function () {
expect(add(1, 1)).to.be.equal(2);
done(); // 通知Mocha测试结束
},1000);
}); // 同步测试
it('1 加 0 应该等于 1', function() {
expect(add(1, 0)).to.be.equal(1);
});
});

异步测试需要注意一点:必须手动调用done,否则该异步测试就会失败,见下方代码与运行截图:

代码:

 var add = require('../src/add.js');
var expect = require('chai').expect; describe('加法函数的测试', function() {
// 异步测试
it('1 加 1 应该等于 2', function(done) {
var clock = setTimeout(function () {
expect(add(1, 1)).to.be.equal(2);
//done();我们不主动调用done,看看会发生什么?
},1000);
}); // 同步测试
it('1 加 0 应该等于 1', function() {
expect(add(1, 0)).to.be.equal(1);
});
});

运行截图:

从运行结果不难看出,测试用例1失败了,而且Mocha提示我们:如果是异步测试或钩子,那么一定要确保done方法被调用,否则测试就会失败,但并不会影响其他用例

那么,异步测试有哪些应用场景呢?那就是测试数据接口,我们可以这样:

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

进阶五:如果我们想只执行某个测试用例呢?或者除了某个用例,其他的都执行

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

1.如果只想执行某个用例,我们就用only方式调用它:

 var add = require('../src/add.js');
var expect = require('chai').expect; describe('加法函数的测试', function() {
// 一个测试组中不是只能有一个only,可以有多个only方式执行的用例
it.only('1 加 1 应该等于 2', function() {
expect(add(1, 1)).to.be.equal(2);
}); it.only('1 加 0 应该等于 1', function() {
expect(add(1, 0)).to.be.equal(1);
}); // 但如果组内已经有了only,那么非only方式执行的用例就一定不会被执行,切记
it('1 加 -1 应该等于 0', function() {
expect(add(1, -1)).to.be.equal(0);
}); });

运行截图:

可以看出,第三个用例并没有被执行

2.如果想跳过某个用例,我们就用skip方式调用它:

 var add = require('../src/add.js');
var expect = require('chai').expect; describe('加法函数的测试', function() { it('1 加 1 应该等于 2', function() {
expect(add(1, 1)).to.be.equal(2);
}); // 同理,skip方式执行的用例在同一组内也可以有多个
it.skip('1 加 0 应该等于 1', function() {
expect(add(1, 0)).to.be.equal(1);
}); it.skip('1 加 -1 应该等于 0', function() {
expect(add(1, -1)).to.be.equal(0);
}); });

运行截图:

第2,3个用例被跳过了

结语

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

本文章内容参照了阮一峰老师的文章《测试框架 Mocha 实例教程》,感兴趣的同学可以看一下

前端单元测试框架-Mocha的更多相关文章

  1. 前端测试框架对比(js单元测试框架对比)

    前端测试框架对比(js单元测试框架对比) 本文主要目的在于横评业界主流的几款前端框架,顺带说下相关的一些内容. 测试分类 通常应用会有 单元测试(Unit tests) 和 功能测试(Function ...

  2. Mocha 单元测试框架简介

    前言: mocha是JavaScript的一种单元测试框架,既可以在浏览器环境下运行,也可以在Node.js环境下运行. 使用mocha,我们就只需要专注于编写单元测试本身,然后,让mocha去自动运 ...

  3. 在WebStorm中集成Karma+jasmine进行前端单元测试

    在WebStorm中集成Karma+jasmine进行前端单元测试 前言 好久没有写博了,主要还是太懒=.=,有点时间都去带娃.看书了,今天给大家分享一个原创的小东西,如果大家对TDD或者BDD有兴趣 ...

  4. Javascript单元测试框架比较Qunit VS Jasmine

    Javascript单元测试框架比较Qunit VS Jasmine 工欲行其事必先利其器,好的单元测试框架是TDD成功的一半.Javascript优秀的测试框架很多, 包括Jasmine,Qunit ...

  5. 推荐一个好用的E2E前端测试框架cypress

    Cypress 是一个E2E的前端自动化测试框架,同样是基于BDD的思想设计的,话不多说,上demo https://github.com/Spillage/cypress-demo PS, 还有一个 ...

  6. js单元测试框架

    js单元测试框架 前端测试框架对比(js单元测试框架对比) 本文主要目的在于横评业界主流的几款前端框架,顺带说下相关的一些内容. 测试分类 通常应用会有 单元测试(Unit tests) 和 功能测试 ...

  7. javascript单元测试框架mochajs详解

    关于单元测试的想法 对于一些比较重要的项目,每次更新代码之后总是要自己测好久,担心一旦上线出了问题影响的服务太多,此时就希望能有一个比较规范的测试流程.在github上看到牛逼的javascript开 ...

  8. Github+yeoman+gulp-angular初始化搭建angularjs前端项目框架

    在上篇文章里面我们说到了Github账号的申请与配置 那么当你有了Github账号并创建了一个自己的Github项目之后,首要的当然是搭建自己的项目框架啦! 本人对自己的定位是web前端狗,常用开发框 ...

  9. 前端测试框架Jest系列教程 -- 简介

    写在前面: 随着互联网日新月异的发展,用户对于页面的美观度,流畅度以及各方面的体验有了更高的要求,我们的网页不再是简单的承载文字,图片等简单的信息传递给用户,我们需要的是更加美观的页面展示,更快的浏览 ...

随机推荐

  1. 打印星号(*)三角形(C# Linq实现)的小例子

    以前看面试宝典(C#)的时候,记得有一道题是打印三角形的.比如下图: 记得那时候刚学C#花了我好长时间才做出来,那是用的方法没有使用到linq,现在使用Linq重新做一次.以下是代码: ; ; i & ...

  2. Android 正则表达式验证手机号、姓名(包含少数民族)、身份证号

    最近项目中新增的功能,需要对手机号.姓名.身份证号等一些信息进行验证,最好的方法是通过正则表达式来验证,网上查了一些资料,写了这几个工具方法. 1.验证手机号 规则:第一位只能是1,第二位为3-8中的 ...

  3. python——网络编程

    Socket socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. sock ...

  4. PHP 分支与循环

    一.概述: 上面一章我们讲解了PHP当中的运算符和表达式,通过上面的知识点我们就可以完成一些基本的运算操作了.但是涉及到一些比较复杂的逻辑,分支与循环就必不可少了.通过分支和循环的结合使用可以使业务更 ...

  5. [Mobile Web]Web中如何分辨移动设备?(iPad、iPhone、Android)

    第一种, Javascript [javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片 var deviceAgent = navigator.use ...

  6. JAVA控制台版斗地主

    一.核心思路: 1.首先分析流程: A>B>C>A>B>C>A>B>C 等于  while(true){ A>B>C } 然后完善细节 发牌 ...

  7. 阿里云主机试用之自建站点和ftp上传所遇的2个问题

    1.Access to the requested object is only available from the local network 其实我并没有自建站点,只是使用了XAMPP来建了ap ...

  8. Python简要学习笔记

    1.搭建学习环境 推荐ActivePython,虽然此乃为商业产品,却是一个有自由软件版权保证的完善的Python开发环境,关键是文档以及相关模块的预设都非常齐备. ActivePython下载地址: ...

  9. macOS10.12部署sonarqube5.6.3 + mysql5.7.17

    所需安装包已全部上传云盘:https://pan.baidu.com/s/1i5LvOCd 密码:s47e 1. 安装mysql 下载云盘的dmg包,一路默认安装,注意:一定要记住最后一步弹出的默认密 ...

  10. Telegram学习解析系列(二):这我怎么给后台传输数据?

    写在前面: 在iOS开发的过程中,有很多时候我们都在和数据打交道,最基本的就是数据的下载和上传了,估计很多很多的小伙伴都在用AFNetworking与后台数据打交道,可有没有想过,哪天AFNetwor ...