前端單元測試框架-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 實例教程》，感興趣的同窗能夠看一下