温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

前端单元测试框架Mocha怎么用

发布时间:2022-01-10 09:57:23 来源:亿速云 阅读:174 作者:柒染 栏目:网络安全

本篇文章给大家分享的是有关前端单元测试框架Mocha怎么用,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

那我们如何做到产出高质量代码呢?单元测试才是正解,俗话说‘跳过单元测试和不仔细过冒烟就交由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怎么用

以上就是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 });

前端单元测试框架Mocha怎么用

从运行结果不难看出,测试用例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 });

前端单元测试框架Mocha怎么用

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

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怎么用,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI