前端單元測試實現(xiàn)教程 mocha + mochawesome + istanbul + sinon

AaronYuan 發(fā)布于2019-08-22 15:36 / 3199人閱讀

摘要：為什么要寫單元測試減少提高代碼質(zhì)量，保證你的代碼是可測試的放心重構(gòu)當(dāng)你每個方法都寫了單元測試的時候，你每一個改動都會影響相應(yīng)的單元測試，這樣你不用費盡心思的考慮哪里會有影響，特別是復(fù)雜項目或非核心功能不易被測試到，從而導(dǎo)致的產(chǎn)生。

為什么要寫單元測試

減少bug

提高代碼質(zhì)量，保證你的代碼是可測試的

放心重構(gòu)

當(dāng)你每個方法都寫了單元測試的時候，你每一個改動都會影響相應(yīng)的單元測試，這樣你不用費盡心思的考慮哪里會有影響，特別是復(fù)雜項目或非核心功能(不易被測試到)，從而導(dǎo)致bug的產(chǎn)生。

當(dāng)你的代碼不可測試的時候，就得考慮你的代碼是否需要重構(gòu)的。好的代碼應(yīng)該是職責(zé)分明且單一，顆粒度小且易于測試。

當(dāng)你重構(gòu)時，特別是大范圍的重構(gòu)，你就有勇氣和信心了。

那么單元測試需要有那些要素呢

測試框架

測試報表

測試覆蓋率

斷言

mock

測試框架選用 mocha 官方文檔

安裝

npm install mocha

package.json

"scripts": {
        "test": "mocha --recursive --require babel-core/register tests/Js/test"
    }

mocha默認(rèn)會找到項目的根目錄下的 test目錄，但是很多人項目目錄中單元測試目錄并不是test，而是在/tests/Js/test中，在scripts中，后面加上單元測試路徑，就可以修改默認(rèn)地址

recursive參數(shù)代表查找目錄的所有子目錄下的單元測試,否則只會查找當(dāng)前目錄下的單元測試

node中并不支持某些es6語法，需要通過babel編譯，所以需要添加 --require babel-core/register

同時需要在項目根目錄添加.babelrc文件

{
  "presets": [ "es2015" ]
}

現(xiàn)在在 tests/Js/test目錄下創(chuàng)建一個文件 test.js

var assert = require("assert");
describe("Array", function() {
  describe("#indexOf()", function() {
    it("should return -1 when the value is not present", function() {
      assert.equal([1,2,3].indexOf(4), -1);
    });
  });
});

命令行中執(zhí)行 npm run test 結(jié)果如下

以上我們知道了如何引入前端測試框架，es6語法問題，執(zhí)行路徑問題

有時候命令行的結(jié)果看著不明了，想要輸出測試報告呢
這時候可以使用 mochawesome
安裝

npm install --save-dev mochawesome

package.json

"scripts": {
        "test": "mocha --recursive --reporter mochawesome --require babel-core/register tests/Js/test"
    }

在scripts命令中，添加 --reporter mochawesome
執(zhí)行命令

npm run test

結(jié)果如圖,將會生成 html文件和json文件

"代碼覆蓋率"（code coverage）。它有四個測量維度。

行覆蓋率（line coverage）：是否每一行都執(zhí)行了

函數(shù)覆蓋率（function coverage）：是否每個函數(shù)都調(diào)用了

分支覆蓋率（branch coverage）：是否每個if代碼塊都執(zhí)行了

語句覆蓋率（statement coverage）：是否每個語句都執(zhí)行了

那么如何知道每個js的覆蓋率呢
這時候用到了 istanbul 和 babel-istanbul
安裝

npm install istanbul
npm install babel-istanbul

package.json

"scripts": {
     "test:cover": "babel-node ./node_modules/.bin/babel-istanbul cover _mocha -- tests/Js/* -R spec --recursive
    }

istanbul他也是不支持一些es6語法的，所以也需要babel轉(zhuǎn)譯
使用cover參數(shù)結(jié)合mocha，--代表后面參數(shù)傳遞給mocha

執(zhí)行命令

npm run test:cover

結(jié)果如圖

Mocha本身不帶斷言庫，所以必須先引入斷言庫。
我們這里使用 chai

npm install chai

chaijs有三種斷言風(fēng)格，詳細(xì)查看官網(wǎng)

jquery作為大部分都在使用的庫，那么如何對這類的代碼進(jìn)行單元測試呢
比如以下代碼
hide-element.js

export const hideElement = ($element) => {
  $element.on("click", ".hide", function() {
    $(this).hide();
  });
};

首先node環(huán)境和瀏覽器環(huán)境是不一樣的，所以我們跑這類的單元測試就需要模擬出瀏覽器環(huán)境
我們需要安裝 jsdom

npm install jsdom

test.js 如下

const assert = require("chai").assert;
const { hideElement } = require("xxxx/hide-element.js");
describe("test:hide-element.js", function(done) {
  before(function() {
    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");
    
    hideElement($("body"));
  });
  it("click event", function() {
    $("body").find(".hide").trigger("click");
    assert.equal($(".hide").css("display"), "none");
  });
});

mocha 由 describe，it基本元素組成

mocha 有四個鉤子函數(shù) before，after，beforeEach，afterEach

因為node中引入依賴時會緩存模塊，初始化jsdom環(huán)境時，最好在before中，防止污染jsdom環(huán)境，導(dǎo)致不同的單元測試之間互相影響

需要測試的代碼中依賴了其他的模塊時，為了測試需要測試的代碼，而不去關(guān)心依賴的模塊，這時候我們需要 sinon 去mock掉相關(guān)依賴

demo.js

import api from "api";
export const demo = (arg) => {
    if (arg == 1) {
      return api.get({
        params: params
      });
    }
    
    return "ok";
};

test.js

import { demo } from "xx/demo.js";
const assert = require("chai").assert;
const sinon = require("sinon");
import api from "api";

describe("demo", function() {
  it("demo(1)", function() {
    //mock api的get方法，并且指定返回值為 "N"
    let apiGet = sinon.stub(api, "get").returns("N");
    let expectedParams = {params: "yes"};
    let res = demo(1);
    //automate clean-up,防止影響其他單元測試
    apiGet.restore();
    //斷言調(diào)用api.get 是傳入的參數(shù)為 {params: "yes"}
    sinon.assert.calledWith(apiGet, expectedParams);
    
    assert.equal(res, "N");
  });
});

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/93583.html

發(fā)表評論

登陸后可評論

0條評論

AaronYuan

男|高級講師

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

TA的文章

10分鐘了解Jmeter性能測試工具，懂事的已經(jīng)點進(jìn)來看了

閱讀 1355·2021-11-15 11:45
C語言實現(xiàn)通訊錄

閱讀 3123·2021-09-27 13:36
前端每日實戰(zhàn)：139# 視頻演示如何用 CSS 和 D3 創(chuàng)作光斑粒子交相輝映的動畫

閱讀 2867·2019-08-30 15:54
轉(zhuǎn)載：瀏覽器常見兼容問題以及解決辦法

閱讀 984·2019-08-29 12:38
剖析簡易計算器帶你入門微信小程序開發(fā)

閱讀 2905·2019-08-29 11:22
js 調(diào)用棧機制與ES6尾調(diào)用優(yōu)化介紹

閱讀 2983·2019-08-26 13:52
vue權(quán)限問題

閱讀 2026·2019-08-26 13:30
Vue+Typescript中在Vue上掛載axios使用時報錯

閱讀 584·2019-08-26 10:37

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

前端單元測試實現(xiàn)教程 mocha + mochawesome + istanbul + sinon

相關(guān)文章

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

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

【Node Hero】9. Node.js 單元測試

前端單元測試初探

**ES6+mocha+istanbul,針對ES6語法的帶覆蓋率檢查的mocha測試**

發(fā)表評論

0條評論

AaronYuan

男|高級講師

TA的文章

10分鐘了解Jmeter性能測試工具，懂事的已經(jīng)點進(jìn)來看了

C語言實現(xiàn)通訊錄

前端每日實戰(zhàn)：139# 視頻演示如何用 CSS 和 D3 創(chuàng)作光斑粒子交相輝映的動畫

轉(zhuǎn)載：瀏覽器常見兼容問題以及解決辦法

剖析簡易計算器帶你入門微信小程序開發(fā)

js 調(diào)用棧機制與ES6尾調(diào)用優(yōu)化介紹

vue權(quán)限問題

Vue+Typescript中在Vue上掛載axios使用時報錯

最新活動

資訊專欄INFORMATION COLUMN

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

前端單元測試 實現(xiàn)教程 mocha + mochawesome + istanbul + sinon

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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

前端單元測試實現(xiàn)教程 mocha + mochawesome + istanbul + sinon