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

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

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

為什么要寫單元測(cè)試

減少bug

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

放心重構(gòu)

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

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

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

那么單元測(cè)試需要有那些要素呢

測(cè)試框架

測(cè)試報(bào)表

測(cè)試覆蓋率

斷言

mock

測(cè)試框架選用 mocha 官方文檔

安裝

npm install mocha

package.json

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

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

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

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

同時(shí)需要在項(xiàng)目根目錄添加.babelrc文件

{
  "presets": [ "es2015" ]
}

現(xiàn)在在 tests/Js/test目錄下創(chuàng)建一個(gè)文件 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é)果如下

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

有時(shí)候命令行的結(jié)果看著不明了，想要輸出測(cè)試報(bào)告呢
這時(shí)候可以使用 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é)果如圖,將會(huì)生成 html文件和json文件

"代碼覆蓋率"（code coverage）。它有四個(gè)測(cè)量維度。

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

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

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

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

那么如何知道每個(gè)js的覆蓋率呢
這時(shí)候用到了 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語(yǔ)法的，所以也需要babel轉(zhuǎn)譯
使用cover參數(shù)結(jié)合mocha，--代表后面參數(shù)傳遞給mocha

執(zhí)行命令

npm run test:cover

結(jié)果如圖

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

npm install chai

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

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

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

首先node環(huán)境和瀏覽器環(huán)境是不一樣的，所以我們跑這類的單元測(cè)試就需要模擬出瀏覽器環(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 有四個(gè)鉤子函數(shù) before，after，beforeEach，afterEach

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

需要測(cè)試的代碼中依賴了其他的模塊時(shí)，為了測(cè)試需要測(cè)試的代碼，而不去關(guān)心依賴的模塊，這時(shí)候我們需要 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,防止影響其他單元測(cè)試
    apiGet.restore();
    //斷言調(diào)用api.get 是傳入的參數(shù)為 {params: "yes"}
    sinon.assert.calledWith(apiGet, expectedParams);
    
    assert.equal(res, "N");
  });
});

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/93583.html

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

登陸后可評(píng)論

0條評(píng)論

AaronYuan

男|高級(jí)講師

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

TA的文章

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

閱讀 1422·2021-11-15 11:45
C語(yǔ)言實(shí)現(xiàn)通訊錄

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

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

閱讀 1043·2019-08-29 12:38
剖析簡(jiǎn)易計(jì)算器帶你入門微信小程序開(kāi)發(fā)

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

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

閱讀 2099·2019-08-26 13:30
Vue+Typescript中在Vue上掛載axios使用時(shí)報(bào)錯(cuò)

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

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

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

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

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

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

ES6+mocha+istanbul,針對(duì)ES6語(yǔ)法的帶覆蓋率檢查的mocha測(cè)試

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

0條評(píng)論

AaronYuan

男|高級(jí)講師

TA的文章

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

C語(yǔ)言實(shí)現(xiàn)通訊錄

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

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

剖析簡(jiǎn)易計(jì)算器帶你入門微信小程序開(kāi)發(fā)

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

vue權(quán)限問(wèn)題

Vue+Typescript中在Vue上掛載axios使用時(shí)報(bào)錯(cuò)

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

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

相關(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)！

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