Mocha和單元測試

時間  2019-12-19
標籤 mocha 單元 測試 简体版
原文   原文鏈接

Mocha測試框架和項目實例

測試項目已上傳githubcss

地址：github.com/Hanxueqing/…html

運行克隆命令，下載到本地前端

git clone git@github.com:Hanxueqing/Mocha-test.git
複製代碼

1、什麼是Mocha

Mocha（發音"摩卡"）誕生於2011年，是如今最流行的JavaScript測試框架之一，在瀏覽器和Node環境均可以使用。所謂"測試框架"，就是運行測試的工具。經過它，能夠爲JavaScript應用添加測試，從而保證代碼的質量。vue

2、Mocha安裝和準備

前期準備：安裝vue-cli腳手架、安裝node、安裝Gitnode

（1）先用vue-cli建立一個vue-test項目git

vue create vue-test
複製代碼

（2）全局安裝mochagithub

npm i mocha -g
複製代碼

將mocha安裝到本地目錄vue-cli

npm i mocha -D
複製代碼

（3）修改package.json中的test路徑爲咱們本地的mocha路徑npm

"test": "./node_modules/mocha/bin/mocha"
複製代碼

image

3、測試框架

一、建立test文件夾

測試腳本都存放在test文件夾中json

二、編寫測試框架

建立test/demo.js

describe("Demo", function(){
	describe("方法 1", function(){
		context("情境 1", function(){
			before(function(){
				console.log("-----測試以前------");
			});
			after(function(){
				console.log("-----測試以後------");
			});
			beforeEach(function(){
				console.log("-------每條測試以前---------");
			})
			afterEach(function(){
				console.log("-------每條測試以後---------");
			})
			it("測試 1", function(){

			})
			it("測試 2", function(){
				
			})
		})
	})
})
複製代碼

上面這段代碼，就是測試腳本，它能夠獨立執行。測試腳本里面應該包括一個或多個describe塊，每一個describe塊應該包括一個或多個it塊。

describe

describe塊稱爲"測試套件"（test suite），表示一組相關的測試。它是一個函數，第一個參數是測試套件的名稱（"Demo"），第二個參數是一個實際執行的函數。

it

it塊稱爲"測試用例"（test case），表示一個單獨的測試，是測試的最小單位。它也是一個函數，第一個參數是測試用例的名稱（"測試1"），第二個參數是一個實際執行的函數。

測試用例的鉤子

Mocha在describe塊之中，提供測試用例的四個鉤子：before()、after()、beforeEach()和afterEach()。它們會在指定時間執行。

befor：定義測試以前進行的操做

after：定義測試以後進行的操做

beforeEach：定義每條測試以前進行的操做

afterEach：定義每條測試以後進行的操做

三、進行測試

執行mocha命令使用全局安裝的mocha進行測試或者執行npm test命令使用本地安裝的mocha進行測試

image

4、斷言庫chai

所謂"斷言"，就是判斷源碼的實際執行結果與預期結果是否一致，若是不一致就拋出一個錯誤。

一、全局安裝chai模塊

npm i chai -g
複製代碼

二、本地安裝chai模塊

npm i chai -D
複製代碼

三、斷言風格

斷言庫有不少種，Mocha並不限制使用哪種。

assert風格的斷言

在test文件夾下新建test_lib文件夾，建立assert.js編寫測試腳本。

const chai = require("chai");
//引入斷言的風格
const assert = chai.assert;

describe("Demo", function () {
    it("使用 assert風格的斷言測試", function () {
        var value = "hello";
        //斷言value值的類型爲字符串
        assert.typeOf(value, "string");
        //斷言value值等於"hello"
        assert.equal(value, "hello");
        //斷言value值的長度爲5
        assert.lengthOf(value, 5);
    })
})
複製代碼

進入test_lib文件夾下，執行mocha assert.js運行測試腳本，由於咱們這三個斷言都是真的，因此測試經過。

image

should風格斷言

建立should.js編寫測試腳本。

const chai = require("chai");
const should = chai.should();

describe("Demo", () => {
    it("使用 should風格的斷言測試", function () {
        var value = "hello";
        //value應該存在
        value.should.exist
        //value的數字類型應該是一個字符串
        value.should.be.a("string");
        //value值應該等於"hello"
        value.should.equal("hello");
        //value值不等於"你好"
        value.should.not.equal("你好");
        //value的長度應該爲5
				value.should.have.length(5);
        

    })
})
複製代碼

咱們也能夠換成另外一種更簡潔的寫法，使用and鏈接斷言

value.should.exist
            .and.be.a("string")
            .and.equal("hello")
            .and.have.length(5)
複製代碼

進入test_lib文件夾下，執行mocha should.js運行測試腳本，由於咱們這五個斷言都是真的，因此測試經過。

image

expect風格斷言

expect斷言的優勢是很接近天然語言

建立expect.js編寫測試腳本。

const chai = require("chai");
const expect = chai.expect;

describe("Demo", () => {
    it("使用 expect風格的斷言測試", function () {
        var value = "hello";
        //value應該存在
        expect(value).to.exist;
        //value的數字類型應該是一個字符串
        expect(value).to.be.a("string");
        //value值應該等於"hello"
        expect(value).to.equal("hello");
        //value值不等於"你好"
        expect(value).to.not.equal("你好");
        //value的長度應該爲5
        expect(value).to.have.length(5);
    })
})
複製代碼

進入test_lib文件夾下，執行mocha expect.js運行測試腳本，由於咱們這五個斷言都是真的，因此測試經過。

image

一樣咱們也能夠定義一個數字，使用expect斷言來判斷數字的區間

var number = 3;
        //判斷number是否在3~5之間的數
        expect(number).to.be.at.most(5);
        expect(number).to.be.at.least(3);
        //判斷number是否在1~3之間的數
        expect(number).to.be.within(1, 3);
複製代碼

5、編寫測試腳本

Mocha的做用是運行測試腳本，首先必須學會寫測試腳本。所謂"測試腳本"，就是用來測試源碼的腳本。

一、測試返回結果是否正確

（1）建立被測試的項目lib/demo-1.js

class Demo {
    subtotal(unitPrice, quantity) {
        return unitPrice * quantity;
    }
}
module.exports = Demo;
複製代碼

（2）建立測試腳本test/demo-1.test.js

一般，測試腳本與所要測試的源碼腳本同名，可是後綴名爲.test.js（表示測試）或者.spec.js（表示規格）。好比，demo-1.js的測試腳本名字就是demo-1.test.js。

//demo-1.test.js
const chai = require("chai");
const expect = chai.expect;

var Demo = require("../lib/demo-1");
var demo = new Demo();
describe("Demo",()=>{
    it("單價10塊錢的3件商品小計金額應該是30塊",function(){
        var subtotal = demo.subtotal(10,3);
        expect(subtotal).to.equal(30);
    })
})
複製代碼

二、異步操做測試setTimeout

（1）Mocha默認每一個測試用例最多執行2000毫秒，若是到時沒有獲得結果，就報錯。對於涉及異步操做的測試用例，這個時間每每是不夠的，須要用-t或--timeout參數指定超時門檻。

進入lib/demo-1.js，編寫異步等待方法，規定2秒以後返回結果

waitTwoSecond(data,callback){
        setTimeout(function(){
            callback(data);
        },2000);
    }
複製代碼

（2）進入test/demo-1.test.js，編寫測試腳本

//異步操做測試
    //mocha不會等到異步執行結束之後進行測試，而是直接運行獲得測試結果
    it("一段時間之後返回數據",function(done){
        demo.waitTwoSecond("hello",function(data){
            expect(data).to.equal("hello")
            done(); //只有調用done方法才能等待調用結束之後測試
            //mocha默認的等待時間是2秒，上述操做超過兩秒，報錯
            //運行命令mocha demo-1.test.js -t 5000重置等待時間解決
        })
    })
複製代碼

另外，上面的測試用例裏面，有一個done函數。it塊執行的時候，傳入一個done參數，當測試結束的時候，必須顯式調用這個函數，告訴Mocha測試結束了。不然，Mocha就沒法知道，測試是否結束，會一直等到超時報錯。若是把這行刪除，則mocha不會等到異步執行結束之後進行測試，而是直接運行獲得測試結果，返回的斷言結果始終爲真。

（3）雖然測試用例中規定2秒返回結果，可是實際運行時間確定超過2秒，因此，須要用-t或--timeout參數，改變默認的超時設置。

mocha demo-1.test.js -t 5000
複製代碼

上面命令將測試的超時時限指定爲5000毫秒。

三、測試接口數據https

接口地址https://douban.uieee.com/v2/movie/top250

image

（1）lib/demo-1.js

引入https模塊

var https = require("https");
複製代碼

定義fetchData方法

fetchData(api,callback){
        var requestUrl = `https://douban.uieee.com/v2/movie/${api}`;
        https.get(requestUrl,function(res){
            var responseData = ""
            res.setEncoding("utf8")

            res.on("data",function(chunk){
                responseData += chunk
            })

            res.on("end",function(){
                callback(JSON.parse(responseData))
            })
        })
    }
複製代碼

（2）test/demo-1.test.js

it("加載豆瓣api，返回的數據，應該包含subjects屬性",function(done){
        demo.fetchData("top250",function(data){
            expect(data).to.have.property("subjects");
            done();
        })
    })

    it("加載豆瓣api，返回的數據，subjects應爲對象類型", function (done) {
        demo.fetchData("top250", function (data) {
            var subjects = data.subjects;
            expect(subjects).to.be.a("array");
            done();
        })
    })

    it("加載豆瓣api，返回的數據，subjects長度應爲20", function (done) {
        demo.fetchData("top250", function (data) {
            var subjects = data.subjects;
            expect(subjects).to.have.length(20);
            done();
        })
    })

    it("加載豆瓣api，返回的數據，title屬性應該是字符串類型的", function (done) {
        demo.fetchData("top250", function (data) {
            var title = data.subjects[0].title
            expect(title).to.be.a("string");
            expect(title).to.equal("肖申克的救贖")
            done();
        })
    })
複製代碼

（3）運行結果

image

四、測試異常

（1）lib/demo-1.js

engine(fuel){
        if(fuel !== "gas"){
            throw new Error("not accept")
        }
    }
複製代碼

（2）test/demo-1.test.js

//定義一個異常
    it("給汽車引擎加水是不能接受的事情",function(){
        expect(function(){
            demo.engine("water");
        }).to.throw("not accept")
    })
複製代碼
//另一種寫法
    it("給汽車引擎加水是不能接受的事情",function(){
        expect(demo.engine.bind(demo,"water")).to.throw("not accept")
    })
複製代碼

（3）測試結果

image

6、運行多個測試

一、直接使用mocha命令運行test子目錄中的測試腳本

Mocha默認運行test子目錄裏面的測試腳本。因此，通常都會把測試腳本放在test目錄裏面，而後執行mocha就不須要參數了。

image

因此在控制檯中輸入mocha，只會執行test子目錄裏的測試腳本demo-1.test.js和demo.js，而test_lib中的assert.js、expect.js、should.js則不會執行。

運行結果：

image

二、執行test子目錄下面全部的測試用例

這時能夠看到，test子目錄裏面的測試腳本執行了。可是，你打開test子目錄，會發現下面還有一個test/test_lib子目錄，裏面還有三個測試腳本assert.js、expect.js、should.js，並無獲得執行。Mocha默認只執行test子目錄下面第一層的測試用例，不會執行更下層的用例。

爲了改變這種行爲，就必須加上--recursive參數，這時test子目錄下面全部的測試用例，無論在哪一層，都會執行。

mocha --recursive
複製代碼

運行結果：

image

三、執行多個測試腳本

mocha命令後面緊跟測試腳本的路徑和文件名，能夠指定多個測試腳本。

進入tets_lib目錄下，運行assert.js和should.js兩個測試腳本

mocha assert.js should.js
複製代碼

運行結果

image

7、測試用例管理

一、only表示只運行某個測試套件或測試用例。

大型項目有不少測試用例。有時，咱們但願只運行其中的幾個，這時能夠用only方法。describe塊和it塊都容許調用only方法，表示只運行某個測試套件或測試用例。

it.only("單價10塊錢的3件商品小計金額應該是30塊",function(){
        var subtotal = demo.subtotal(10,3);
        expect(subtotal).to.equal(30);
    })
複製代碼

運行結果：只運行了添加only方法的測試腳本

image

二、skip表示跳過指定的測試套件或測試用例。

it.skip("一段時間之後返回數據",function(done){
        demo.waitTwoSecond("hello",function(data){
            expect(data).to.equal("hello")
            done(); //只有調用done方法才能等待調用結束之後測試
            //mocha默認的等待時間是2秒，上述操做超過兩秒，報錯
            //運行命令mocha demo-5.js -t 5000重置等待時間解決
        })
    })
複製代碼

運行結果：跳過了添加skip方法的測試腳本

image

8、ES6測試

一、ES5寫法

src/add.js

function add(x, y) {
    return x + y;
}

module.exports = add;
複製代碼

test/demo-2.test.js

const chai = require("chai");
const expect = chai.expect;
var Add = require("../src/add.js");

describe('加法函數的測試', function () {
    it('1 加 1 應該等於 2', function () {
        expect(Add(1, 1)).to.be.equal(2);
    });
});

複製代碼

運行命令

mocha
複製代碼

運行結果

image

二、ES6寫法

test/demo-2.test.js

const chai = require("chai");
const expect = chai.expect;
var Add = require("../src/add.js");

describe('加法函數的測試', function () {
    it('1 加 1 應該等於 2', function () {
        expect(Add(1, 1)).to.be.equal(2);
    });
});

複製代碼

若是測試腳本是用ES6寫的，那麼運行測試以前，須要先用Babel轉碼。

（1）安裝Babel

npm install babel-core babel-preset-es2015 --save-dev
複製代碼

（2）在項目目錄下面，新建一個.babelrc文件：

{
  "presets": [ "es2015" ]
}
複製代碼

運行命令

./node_modules/mocha/bin/mocha --require babel-core/register
複製代碼

運行結果

image

9、測試報告

運行mocha --reporters能夠顯示全部內置的報告格式。

image

一、spec格式

--reporter參數用來指定測試報告的格式，默認是spec格式。

mocha
等同於
mocha --reporter spec
複製代碼

運行結果：

image

二、tap格式

mocha --reporter tap
複製代碼

運行結果：

image

三、HTML格式

使用mochawesome模塊，能夠生成漂亮的HTML格式的報告。

（1）安裝mochawesome模塊

npm install --save-dev mochawesome
複製代碼

（2）執行測試命令

./node_modules/.bin/mocha --reporter mochawesome
複製代碼

上面代碼中，mocha命令使用了項目內安裝的版本，而不是全局安裝的版本，由於mochawesome模塊是安裝在項目內的。

（3）運行結果：

image

（4）測試結果報告在mochaawesome-reports子目錄生成。

image

（5）在瀏覽器中瀏覽html格式的測試報告

image

10、生成測試文件

Mocha支持從測試用例生成規格文件。

一、Markdown格式

mocha demo-1.test.js --recursive -R markdown > spec.md
複製代碼

上面命令根據test目錄的demo-1.test.js測試腳本，生成一個規格文件spec.md。-R markdown參數指定規格報告是markdown格式。

image

二、HTML格式

mocha demo-1.test.js --recursive -R doc > spec.html
複製代碼

上面命令根據test目錄的demo-1.test.js測試腳本，生成一個規格文件spec.html.

image

11、在瀏覽器中測試

除了在命令行運行，Mocha還能夠在瀏覽器運行。

一、首先，使用mocha init命令在指定目錄生成初始化文件。

mocha init vue-test
複製代碼

運行上面命令，就會在vue-test目錄下生成index.html文件，以及配套的腳本和樣式表。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Mocha</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="mocha.css">
  </head>
  <body>
    <div id="mocha"></div>
    <script src="mocha.js"></script>
    <script>mocha.setup('bdd');</script>
    <script src="tests.js"></script>
    <script>
      mocha.run();
    </script>
  </body>
</html>
複製代碼

二、新建一個源碼文件add.js

function add(x, y) {
    return x + y;
}

module.exports = add;
複製代碼

三、新建一個測試腳本tests.js

var expect = chai.expect;

describe('加法函數的測試', function () {
    it('1 加 1 應該等於 2', function () {
        expect(add(1, 1)).to.be.equal(2);
    });

    it('任何數加0等於自身', function () {
        expect(add(1, 0)).to.be.equal(1);
        expect(add(0, 0)).to.be.equal(0);
    });
});
複製代碼

四、而後，把這個文件，以及斷言庫chai.js，加入index.html。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Mocha</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="mocha.css">
  </head>
  <body>
    <div id="mocha"></div>
    <script src="mocha.js"></script>
    <script>mocha.setup('bdd');</script>
    <script src="add.js"></script>
    <script src="http://chaijs.com/chai.js"></script>
    <script src="tests.js"></script>
    <script>
      mocha.run();
    </script>
  </body>
</html>
複製代碼

五、如今，在瀏覽器裏面打開index.html，就能夠看到測試腳本的運行結果。

image

參考文檔

mocha官網

mochajs.org/

測試框架 Mocha 實例教程 by 阮一峯

juejin.im/entry/5941e…

【前端單元測試入門01】Mocha與chai

www.jianshu.com/p/aa53ac34e…

vue項目中添加單元測試

blog.csdn.net/weixin_3373…

vue官網-單元測試模塊

cn.vuejs.org/v2/guide/un…

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程