如何使用 mocha 和 sinon 集成單元測(cè)試--單元測(cè)試示例及分析（上）

Caicloud 發(fā)布于2019-08-22 15:51 / 1034人閱讀

摘要：使用集成單元測(cè)試上項(xiàng)目地址安裝依賴測(cè)試框架可視化報(bào)表覆蓋率替換依賴斷言命令命令命令執(zhí)行單元測(cè)試，并打開(kāi)測(cè)試報(bào)告頁(yè)面和覆蓋率頁(yè)面執(zhí)行生成單元測(cè)試覆蓋率并打開(kāi)執(zhí)行單個(gè)單元測(cè)試文

使用 mocha 集成單元測(cè)試(上)

項(xiàng)目地址：https://github.com/Jay-tian/j...

安裝依賴

yarn add jquery mocha  mochawesome  istanbul  sinon chai jsdom decache babel-cli babel-core babel-preset-es2015 babel-plugin-module-resolver babel-istanbul

mocha：測(cè)試框架
mochawesome：可視化報(bào)表
istanbul：覆蓋率
sinon：替換依賴
chai：斷言

scripts 命令

命令

  "scripts": {
    "test": "mocha --timeout 5000 --recursive --reporter mochawesome --require babel-core/register tests/src && open mochawesome-report/mochawesome.html && npm run test:cover",
    "test:cover": "babel-node ./node_modules/.bin/babel-istanbul cover _mocha -- tests/src/* -R spec --recursive && open coverage/lcov-report/index.html",
    "test:s": "mocha --recursive --require babel-core/register  --timeout 5000"
  }

test 命令：執(zhí)行單元測(cè)試，并打開(kāi)測(cè)試報(bào)告頁(yè)面和覆蓋率頁(yè)面
test:cover 執(zhí)行生成單元測(cè)試覆蓋率并打開(kāi)
test:s 執(zhí)行單個(gè)單元測(cè)試文件

參數(shù)解析

--timeout 5000 超時(shí)設(shè)置
--recursive 包含子目錄
--reporter mochawesome 通過(guò)mochawesome生成報(bào)表
--require babel-core/register 通過(guò)babel轉(zhuǎn)譯es6語(yǔ)法
tests/src 單元測(cè)試目錄路徑
open mochawesome-report/mochawesome.html 打開(kāi)頁(yè)面

測(cè)試含有jQuery的代碼 初始化Jquery環(huán)境

let { JSDOM } = require("jsdom");
let dom = new JSDOM(``,{
    url: "http://127.0.0.1",
    referrer: "http://127.0.0.1",
    contentType: "text/html",
    userAgent: "Mellblomenator/9000",
    includeNodeLocations: true,
});
global.window = dom.window;
global.$ = require("jquery");

測(cè)試click事件

const { demo1 } = require("../../src/demo1.js");
const assert = require("chai").assert;
describe("demo1", function() {
  it("jquery click test", function() {
    demo1($("body"));
    assert.equal($("body").hasClass("hide"), false);
    $("body").trigger("click");
    assert.equal($("body").hasClass("hide"), true);
  });
});

運(yùn)行結(jié)果

以上測(cè)試了，點(diǎn)擊元素時(shí)，給該元素添加一個(gè)‘hide’類的方法
模擬jquery環(huán)境和觸發(fā)click事件

測(cè)試post事件

由于初始化jquery環(huán)境比較通用，我們把它放到工具類去引用

utils.js

const decache = require("decache");
let { JSDOM } = require("jsdom");
exports.initJquery = function(html, params = {}){
    params = Object.assign({
        url: "http://127.0.0.1",
        referrer: "http://127.0.0.1",
        contentType: "text/html",
        userAgent: "Mellblomenator/9000",
        includeNodeLocations: true,
    }, params);
    let dom = new JSDOM(`${html}`, params);

    global.window = dom.window;
    decache("jquery");
    global.$ = require("jquery");
}

因?yàn)閚ode環(huán)境中，require會(huì)有緩存，導(dǎo)致不同的單元測(cè)試間的初始環(huán)境不一致，需要手動(dòng)清除緩存

 decache("jquery");

test.demo2.js

import post from "../../src/demo2.js"; 
const utils = require("./../utils");
const sinon = require("sinon");
require("./../utils");
describe("demo2", function() {
    before(function() {
        utils.initJquery("");
    });
    
    it("jquery post", function() {
        let stubPost = sinon.stub($, "post");
        let expectedUrl = "/demo2";
        let expectedParams = {"a": "abc"};
        post();
        sinon.assert.calledWith(stubPost, expectedUrl, expectedParams);
        stubPost.restore();
    });
});

restore()操作將會(huì)復(fù)原被替換的對(duì)象
mocha 有四個(gè)鉤子方法
before 在所有的單元測(cè)試運(yùn)行前運(yùn)行一次
after 在所有的單元測(cè)試運(yùn)行結(jié)束運(yùn)行一次
beforeEach 在每一個(gè)的單元測(cè)試運(yùn)行前運(yùn)行一次
afterEach 在每一個(gè)的單元測(cè)試運(yùn)行后運(yùn)行一次

測(cè)試ajax demo3.js

export default function() {
    $.ajax({
    type: "GET",
    url: null,
    async: true,
    promise: true,
    dataType: "json",
    beforeSend(request) {
    }
  });
}

test.demo3.js

import ajax from "../../src/demo3.js"; 
const utils = require("./../utils");
const sinon = require("sinon");
require("./../utils");
describe("demo3", function() {
    before(function() {
        utils.initJquery("");
    });
    
    it("jquery ajax", function() {
        let stubAjax = sinon.stub($, "ajax");
        let expectedParams = {
            type: "GET",
            url: null,
            async: true,
            promise: true,
            dataType: "json"
        };
        ajax();
        sinon.assert.calledWithMatch(stubAjax, expectedParams);
        stubAjax.restore();
    });
});

這里我們使用calledWithMatch斷言參數(shù)，該方法可以斷言傳入的參數(shù)是否正確，不需要傳入所有的參數(shù)

測(cè)試異步代碼 demoe4.js

export default function() { 
    $("#demo4").hide();
    setTimeout(
        function(){
            $("#demo4").show();
        }, 1000);
}

import demo4 from "../../src/demo4.js"; 
const utils = require("./../utils");
const sinon = require("sinon");
const assert = require("chai").assert;
require("./../utils");
describe("asynchronous code", function() {
    let clock;
    before(function () { 
        utils.initJquery("");
       
    });

    it("test by setTimeout", function(done) {
        let $demo = $("#demo4");
        demo4();
        assert.equal($demo.css("display"), "none");
        let test = function() {
            assert.equal($demo.css("display"), "block");
            // 這里的done告知這個(gè)單元測(cè)試結(jié)束了，保證不影響其他單元測(cè)試
            done();
        };

        setTimeout(test, 1001);
    });

    it("test by sinon", function() {
        //當(dāng)利用了useFakeTimers后，事件將會(huì)停止
        clock = sinon.useFakeTimers(); 
        let $demo = $("#demo4");
        //運(yùn)行demo4前，元素還是顯示的
        assert.equal($demo.css("display"), "block");
        demo4();
        //運(yùn)行demo4完，元素隱藏了
        assert.equal($demo.css("display"), "none");
        //時(shí)間穿梭101ms秒，定時(shí)器代碼還未執(zhí)行，所以元素還是隱藏的
        clock.tick(101);
        assert.equal($demo.css("display"), "none");
        //時(shí)間再穿梭900ms秒，就到達(dá)了1001ms后，定時(shí)器代碼執(zhí)行了，所以元素現(xiàn)在顯示了
        clock.tick(900);
        assert.equal($demo.css("display"), "block");
        //恢復(fù)時(shí)間
        clock.restore();
    });
});

第一個(gè)單元測(cè)試?yán)昧?setTimeout 去測(cè)試異步代碼
第二個(gè)單元測(cè)試?yán)昧?sinon 的時(shí)空穿梭器去測(cè)試異步代碼
結(jié)果如圖所示

第一個(gè)單元測(cè)試花了1035ms
而第二個(gè)單元測(cè)試幾乎沒(méi)有花費(fèi)多少時(shí)間

所以異步代碼編寫單元測(cè)試時(shí)，第二個(gè)單元測(cè)試寫法更優(yōu)

需要測(cè)試的代碼包含其他負(fù)責(zé)業(yè)務(wù)邏輯時(shí) demo5.js

const demo5require = require("./demo5.require.js");

export default function() { 
    if(demo5require.a() == "a") {
        return 1;
    } else {
        return 2;
    }
}

test.demo5.js

import demo5 from "../../src/demo5.js"; 
const utils = require("./../utils");
const sinon = require("sinon");
const assert = require("chai").assert;

describe("demo5", function() {
    before(function () { 
        utils.initJquery("");
    });
    it("test", function() {
        assert.equal(demo5(), 1);
        const demo5require = require("../../src/demo5.require.js");
        let stub = sinon.stub(demo5require, "a").returns("b");
        assert.equal(demo5(), 2);
        stub.restore();
    });
});

此時(shí)demo5依賴其他模塊，我們就可以替換demo5require的方法，并指定返回值，這樣就不用關(guān)系依賴的模塊做了什么業(yè)務(wù)。
測(cè)試結(jié)束，復(fù)原被替換的對(duì)象

webpack環(huán)境編寫單元測(cè)試

webpack中會(huì)有設(shè)置別名的情況，這樣單元測(cè)試有可能引入的模塊的路徑有誤，這里我們可以使用babel-plugin-module-resolver進(jìn)行別名的替換

.babelrc

{
  "presets": ["es2015"],
  "plugins": [
    ["module-resolver", {
      "root": ["./"],
      "alias": {
         "common":""
      }
    }]
  ]
}

運(yùn)行結(jié)果

執(zhí)行命令

npm run test

如圖

最佳實(shí)踐總結(jié)

文件名以及路徑的定義如下，這樣定義規(guī)范了路徑的書寫，便于文件的查找

/a/b/c/demo.js //待測(cè)試文件
/tests/a/b/c/test.demo.js //單元測(cè)試文件

一個(gè)單元測(cè)試文件測(cè)試一個(gè)js文件

一個(gè)describe測(cè)試一個(gè)方法

一個(gè)it 測(cè)試一個(gè)方法中一個(gè)邏輯，這樣保證一個(gè)測(cè)試只驗(yàn)證一個(gè)行為

使用sinon隔離外部調(diào)用

使用before或beforeEach 初始環(huán)境

使用after或afterEach 清空或還原環(huán)境，不同單元測(cè)試互不影響，狀態(tài)不共享

GPU云服務(wù)器云服務(wù)器單元測(cè)試-mocha-jasmine 單元測(cè)試單元測(cè)試規(guī)范單元測(cè)試圖片測(cè)試java

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93807.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Caicloud

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

物聯(lián)網(wǎng)應(yīng)用技術(shù)課程設(shè)計(jì)————宿舍升降機(jī)模型

閱讀 3167·2021-11-22 09:34
什么是主機(jī)虛擬化-什么是虛擬主機(jī)？

閱讀 2806·2021-09-22 15:28
Atlassian Confluence網(wǎng)絡(luò)攻擊擴(kuò)大，Jenkins遭受重創(chuàng)

閱讀 835·2021-09-10 10:51
Codepen 每日精選（2018-4-6）

閱讀 1865·2019-08-30 14:22
flex 彈性布局

閱讀 2332·2019-08-30 14:17
使用React、Electron、Dva、Webpack、Node.js、Websocket快速構(gòu)建

閱讀 2746·2019-08-30 11:01
小程序云開(kāi)發(fā)之新聞?lì)愴?xiàng)目分析

閱讀 2306·2019-08-29 17:19
基本視覺(jué)格式化

閱讀 3674·2019-08-29 13:17

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

如何使用 mocha 和 sinon 集成單元測(cè)試--單元測(cè)試示例及分析（上）

相關(guān)文章

【Node Hero】9. Node.js 單元測(cè)試

mocha、chai、sinon和istanbul實(shí)現(xiàn)100%單元測(cè)試覆蓋率

**前端單元測(cè)試初探**

**使用karma+mocha+chai+sinon+@vue/test-utils為你的組件庫(kù)增加單元**

**Ajax單元測(cè)試傻瓜教程**

發(fā)表評(píng)論

0條評(píng)論

Caicloud

男|高級(jí)講師

TA的文章

物聯(lián)網(wǎng)應(yīng)用技術(shù)課程設(shè)計(jì)————宿舍升降機(jī)模型

什么是主機(jī)虛擬化-什么是虛擬主機(jī)？

Atlassian Confluence網(wǎng)絡(luò)攻擊擴(kuò)大，Jenkins遭受重創(chuàng)

Codepen 每日精選（2018-4-6）

flex 彈性布局

使用React、Electron、Dva、Webpack、Node.js、Websocket快速構(gòu)建

小程序云開(kāi)發(fā)之新聞?lì)愴?xiàng)目分析

基本視覺(jué)格式化

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

如何使用 mocha 和 sinon 集成單元測(cè)試--單元測(cè)試示例及分析（上）

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！