前端單元測試框架Mocha怎么用

本篇文章給大家分享的是有關(guān)前端單元測試框架Mocha怎么用，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

那我們?nèi)绾巫龅疆a(chǎn)出高質(zhì)量代碼呢？單元測試才是正解，俗話說‘跳過單元測試和不仔細(xì)過冒煙就交由QA測試的，就是在耍流氓’（這句話是我自己編的）；Mocha是針對Javascript的單元測試工具，下面我們就來看看如何使用它

概念

Mocha: Javascript測試框架

chai：斷言庫，需配合Mocha使用

最簡單的用法

步驟一：安裝

假設(shè)我們是在已有項(xiàng)目中進(jìn)行單元測試

安裝Mocha

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

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

安裝chai

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

全局與局部的區(qū)別：若是局部安裝，依賴就會(huì)寫入package.json的dependencies或devDependencies中，這樣當(dāng)別人從你的Github上克隆代碼時(shí)，就不需要注意‘依賴包全不全啊’？‘還需不要安裝其他依賴??？’等等這類的問題，因?yàn)?#39;npm install'會(huì)將所有依賴下載到本地

步驟二：編寫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('加法函數(shù)的測試', function() { 5   it('1 加 1 應(yīng)該等于 2', function() { 6     expect(add(1, 1)).to.be.equal(2); 7   }); 8   it('1 加 -1 應(yīng)該等于 0', function() { 9     expect(add(1, -1)).to.be.equal(0);10   });11 });

步驟三：運(yùn)行測試文件

$ mocha add.test.js

運(yùn)行截圖：

以上就是Mocha最簡單的使用方式，細(xì)不細(xì)很簡單啊O(∩_∩)O哈哈~，下面我們再看點(diǎn)進(jìn)階的

進(jìn)階之路

進(jìn)階一：describe和it是什么？

describe："測試組"，也稱測試塊，表示我要進(jìn)行一系列測試，相當(dāng)于一個(gè)group

it："測試項(xiàng)"，也稱測試用例，表示這是"一系列測試"中的一項(xiàng)，相當(dāng)于item，如何測試？測試邏輯？都是在it的回調(diào)函數(shù)中實(shí)現(xiàn)的

進(jìn)階二：什么？describe也有"生命周期"？

每個(gè)測試塊（describe）有4個(gè)周期，分別是：

 1 describe('test', function() { 2   // 在本測試塊的所有測試用例之前執(zhí)行且僅執(zhí)行一次 3   before(function() { 4      5   }); 6   // 在本測試塊的所有測試用例之后執(zhí)行且僅執(zhí)行一次 7   after(function() { 8      9   });10 11   // 在測試塊的每個(gè)測試用例之前執(zhí)行（有幾個(gè)測試用例it，就執(zhí)行幾次）12   beforeEach(function() {13     14   });15   // 在測試塊的每個(gè)測試用例之后執(zhí)行（同上）16   afterEach(function() {17     18   });19   20   // 測試用例21   it('test item1', function () {22 23   })24 });

進(jìn)階三：在進(jìn)階二中周期代碼是ES6風(fēng)格，需要安裝babel模塊轉(zhuǎn)碼

這里分兩種情況：1.全局安裝   2.局部安裝

如果是全局方式安裝的babel，那么我們也要使用全局的Mocha來調(diào)用babel-core模塊

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

但如果是局部方式安裝的babel，那么我們就要使用局部的Mocha來調(diào)用babel-core模塊

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

為什么呢？因?yàn)镸ocha是根據(jù)自身的路徑來尋找babel模塊的，所以要全局對應(yīng)全局，局部對應(yīng)局部

這里少了很重要的一步：在測試之前，需要配置babel轉(zhuǎn)碼規(guī)則，在項(xiàng)目根目錄，記住‘一定要是根目錄’，新建.babelrc文件，這個(gè)文件是供babel使用的

// .babelrc{  "presets": [ "es2015" ] //這里制定使用es2015規(guī)則轉(zhuǎn)碼}

進(jìn)階四：測試還可以是異步的？

異步測試與普通測試有什么不同：測試用例的回調(diào)函數(shù)中多了一個(gè)參數(shù)done

 1 var add = require('../src/add.js'); 2 var expect = require('chai').expect; 3  4 describe('加法函數(shù)的測試', function() { 5   // 異步測試 6   it('1 加 1 應(yīng)該等于 2', function(done) { 7     var clock = setTimeout(function () { 8       expect(add(1, 1)).to.be.equal(2); 9       done(); // 通知Mocha測試結(jié)束10     },1000);11   });12 13   // 同步測試14   it('1 加 0 應(yīng)該等于 1', function() {15     expect(add(1, 0)).to.be.equal(1);16   });17 });

異步測試需要注意一點(diǎn)：必須手動(dòng)調(diào)用done，否則該異步測試就會(huì)失敗

代碼：

 1 var add = require('../src/add.js'); 2 var expect = require('chai').expect; 3  4 describe('加法函數(shù)的測試', function() { 5   // 異步測試 6   it('1 加 1 應(yīng)該等于 2', function(done) { 7     var clock = setTimeout(function () { 8       expect(add(1, 1)).to.be.equal(2); 9       //done();我們不主動(dòng)調(diào)用done，看看會(huì)發(fā)生什么？10     },1000);11   });12 13   // 同步測試14   it('1 加 0 應(yīng)該等于 1', function() {15     expect(add(1, 0)).to.be.equal(1);16   });17 });

從運(yùn)行結(jié)果不難看出，測試用例1失敗了，而且Mocha提示我們：如果是異步測試或鉤子，那么一定要確保done方法被調(diào)用，否則測試就會(huì)失敗，但并不會(huì)影響其他用例

那么，異步測試有哪些應(yīng)用場景呢？那就是測試數(shù)據(jù)接口，我們可以這樣：

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'); // 測試接口返回的是否為對象類型的數(shù)據(jù)，也就是json格式7     });8 });

進(jìn)階五：如果我們想只執(zhí)行某個(gè)測試用例呢？或者除了某個(gè)用例，其他的都執(zhí)行

Mocha有兩個(gè)用例管理api：only和skip

1.如果只想執(zhí)行某個(gè)用例，我們就用only方式調(diào)用它：

 1 var add = require('../src/add.js'); 2 var expect = require('chai').expect; 3  4 describe('加法函數(shù)的測試', function() { 5   // 一個(gè)測試組中不是只能有一個(gè)only，可以有多個(gè)only方式執(zhí)行的用例 6   it.only('1 加 1 應(yīng)該等于 2', function() { 7     expect(add(1, 1)).to.be.equal(2); 8   }); 9 10 11   it.only('1 加 0 應(yīng)該等于 1', function() {12     expect(add(1, 0)).to.be.equal(1);13   });14 15   // 但如果組內(nèi)已經(jīng)有了only，那么非only方式執(zhí)行的用例就一定不會(huì)被執(zhí)行，切記16   it('1 加 -1 應(yīng)該等于 0', function() {17     expect(add(1, -1)).to.be.equal(0);18   });19 20 });

可以看出，第三個(gè)用例并沒有被執(zhí)行

2.如果想跳過某個(gè)用例，我們就用skip方式調(diào)用它：

 1 var add = require('../src/add.js'); 2 var expect = require('chai').expect; 3  4 describe('加法函數(shù)的測試', function() { 5  6   it('1 加 1 應(yīng)該等于 2', function() { 7     expect(add(1, 1)).to.be.equal(2); 8   }); 9 10   // 同理，skip方式執(zhí)行的用例在同一組內(nèi)也可以有多個(gè)11   it.skip('1 加 0 應(yīng)該等于 1', function() {12     expect(add(1, 0)).to.be.equal(1);13   });14 15 16   it.skip('1 加 -1 應(yīng)該等于 0', function() {17     expect(add(1, -1)).to.be.equal(0);18   });19 20 });

第2，3個(gè)用例被跳過了

以上就是前端單元測試框架Mocha怎么用，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。