JavaScript單元測試框架

個人博客：JavaScript單元測試框架

簡介

測試是保證代碼質量的重要環節，web項目的單元測試雖然不能徹底完成功能測試，可是卻能保證底層單一模塊的工做質量，而且在代碼重構的時候保證對外接口不會發生變化。

測試框架

• Mocha
• Jasmine
• Jest
• Tape
• Karma

Mocha

Mocha 是一個靈活的測試框架，但它只是一個結構，你須要引入其餘插件來實現一些測試功能，好比斷言庫、覆蓋統計等。

Mocha安裝

npm 安裝：npm install mocha --save-dev

腳本語法

簡要示例：

// 引入需測試的模塊或類
const add = require("./add");
const assert = require("assert");

// describe：定義一組測試
describe("加法函數測試", function() {
    before(function() {
        // runs before all tests in this block
    });
    
    // it: 定義一個測試用例
    it("1 加 1 應該等於 2", function() {
        // assert: nodejs內置斷言模塊
        assert.equal(add(1, 1), 2);
    });
    
    after(function() {
        // runs after all test in this block
    });
});
複製代碼

使用方法

爲測試腳本建立目錄test-mocha，測試腳本命名應遵循[模塊名].test.js的風格，而後在package.json中配置測試命令：

"scripts": {
    "test-mocha": "mocha test-mocha/"
}
複製代碼

執行npm run test-mocha便可，將輸出測試結果以下圖：

斷言庫

Mocha 支持should.js, chai, expect.js, better-assert, unexpected等斷言庫。以上一個示例，能夠對比一下各個斷言庫的差異：

• assert

assert.ok(add(1, 1));
assert.equal(add(1, 1), 2);
複製代碼

• should.js

(add(1, 1)).should.be.a.Number();
(add(1, 1)).should.equal(2);
複製代碼

• expect.js

expect(add(1, 1)).to.be.a("number");
expect(add(1, 1)).to.equal(2);
複製代碼

• chai：支持should, expect, assert三種語法

綜上，should.js和expect.js相較於assert語義性更強，且支持類型檢測，而should.js在語法上更加簡明，同時支持鏈式語法.and。

hooks

Mocha 支持4種 hook，包括before / after / beforeEach / afterEach。

異步測試

Mocha 默認每一個測試用例執行2000ms，超出時長則報錯，因此在測試代碼中若是有異步操做，則須要經過done函數來明確測試用例結束。done接受Error參數。

BOM/DOM

Mocha 在node環境下運行時，不支持 BOM 和 DOM 接口，須要引入jsdom和jsdom-global庫。

Jasmine

Jasmine 是一個功能全面的測試框架，內置斷言expect；可是有全局聲明，且須要配置，相對來講使用更復雜、不夠靈活。

Jasmine安裝

npm 安裝：npm install jasmine --save-dev

腳本語法

const add = require("../src/add");

describe("加法函數測試", function () {
    it("1加1等於2", function() {
        expect(add(1, 1)).toEqual(2);
    });
    it("輸出數字", function() {
        expect(add(1, 1)).toEqual(jasmine.any(Number));
    });
});
複製代碼

Jasmine 的語法與 Mocha 很是類似，不過斷言採用內置的expect()。

使用方法

新建配置文件jasmine.json:

{
    // 測試腳本相對路徑
    "spec_dir": "test-jasmine",
    // 測試腳本
    "spec_files": [
        "*.test.js"
        "!*.notest.js"
    ],
    // 測試前須要引入的腳本
    "helpers": [],
    // 是否在遇到第一個報錯後中止測試
    "stopSpecOnExpectationFailure": false,
    // 是否以半隨機順序執行測試
    "random": false
}
複製代碼

建立測試腳本目錄test-jasmine，腳本文件命名爲[模塊名].test.js，在package.json中配置測試命令:

"scripts": {
    "test-jasmine": "jasmine --config=jasmine.json"
}
複製代碼

而後執行npm run test-jasmine便可，將輸出測試結果以下圖：

hook 和異步

與 Mocha 類似。

Jest

Jest 是一個功能全面的「零配置」測試框架，既集成了各類工具，且無需配置便可使用。

Jest安裝

npm 安裝：npm install --save-dev jest

腳本語法

Jest 語法與以上兩個框架不太相同：

const add = require("../src/add");

describe("加法函數測試", () => {
    test("1加1等於2", () => {
        expect(add(1, 1)).toBe(2);
    }); 
});

複製代碼

Jest 中以test定義一個測試用例，且自帶斷言expect，斷言庫功能強大，但語法相較於should.js來講更復雜。

斷言語法：

• 普通匹配：toBe, not.toBe
• 空匹配：toBeNull, toBeUndefined, toBeDefine, toBeTruthy, toBeFalsy
• 數字大小：toBeGreaterThan, toBeGreaterThanOrEqual, toBeLessThan, toEqual, toBeCloseTo(用於浮點數)
• 正則匹配：toMatch
• 數組查詢：toContain
• 構造匹配：toEqual(expect.any(constructor))

使用方法

建立測試腳本目錄test-jest，腳本文件命名爲[模塊名].test.js，在package.json中配置測試命令:

"scripts": {
    "test-jest": "jest test-jest/"
}
複製代碼

而後執行npm run test-jest便可，將輸出測試結果以下圖：

hook

Jest 一樣有四個hook，beforeAll/beforeEach/afterAll/afterEach。

BOM/DOM

Jest 內置對 DOM 和 BOM 接口的支持。

覆蓋統計

Jest 內置覆蓋統計，爲了更方便地進行相關配置，咱們能夠建立一個配置文件jest.config.js：

module.exports = {
    // 開啓覆蓋統計功能
    collectCoverage: true,
    // 指定須要覆蓋的文件
    collectCoverageFrom: [
        "src/*.js"
    ],
    // 指定輸出覆蓋統計結果的目錄
    coverageDirectory: "test-jest/coverage/",
    // 指定測試腳本
    testMatch: [
    	"**/test-jest/*.test.js"
    ]
};
複製代碼

而後將package.json中的命名修改一下："test-jest": "jest"，再運行後可得以下結果：