淺談前端單元測試

• assert(value[, message])
• assert.ok(value[, message])
• assert.equal(actual, expect[, message])
• assert.notEqual(actual, expected[, message])
• assert.strictEqual(actual, expect[, message])
• assert.notStrictEqual(actial, expected[, message])
• assert.deepEqual(actual, expect[, message])
• assert.notDeepEqual(actual, expected[, message])
• assert.deepStrictEqual(actual, expect[, message])
• assert.notDeepStrictEqual(actual, expected[, message])
• assert.throws(block[, error][, message])
• assert.doesNotThrow(block[, error][, message])

assert(value[, message])

斷言 value 的值是否為true，這裡的等於判斷使用的是 == 而不是 ===。message 是斷言描述，為可選引數。

const assert = require('assert');
assert(true);
複製程式碼

assert.ok(value[, message])

使用方法同 assert(value[, message])。

assert.equal(actual, expect[, message])

預期 actual 與 expect值相等。equal用於比較的 actual 和 expect 是基礎型別(string, number, boolearn, null, undefined)的資料。其中的比較使用的是 == 而不是 ===。

it('assert.equal', () => {
  assert.equal(null, false, 'null compare with false');  // 報錯
  assert.equal(null, true, 'null compare with true');  // 報錯
  assert.equal(undefined, false, 'undefined compare with false'); // 報錯
  assert.equal(undefined, true, 'undefined compare with true'); // 報錯
  assert.equal('', false, '"" compare with false');  // 正常
})
複製程式碼

notEqual(actual, expected[, message])

用法同 assert.equal(actual, expect[, message]) 只是對預期結果取反（即不等於）。

assert.strictEqual(actual, expect[, message])

用法同 assert.equal(actual, expect[, message]) 但是內部比較是使用的是 === 而不是 ==。

assert.notStrictEqual(actial, expected[, message])

用法同 assert.strictEqual(actual, expect[, message]) 只是對預期結果取反（即不嚴格等於）。

it('assert.strictEqual', () => {
  assert.strictEqual('', false); // 報錯
})
複製程式碼

assert.deepEqual(actual, expect[, message])

deepEqual 方法用於比較兩個物件。比較的過程是比較兩個物件的 key 和 value 值是否相同, 比較時用的是 == 而不是 ===。

it('assert.deepEqual', () => {
  const a = { v: 'value' };
  const b = { v: 'value' };
  assert.deepEqual(a, b);
})
複製程式碼

assert.notDeepEqual(actual, expected[, message])

用法同 assert.deepEqual(actual, expect[, message]) 只是對預期結果取反（即不嚴格深等於）。

assert.deepStrictEqual(actual, expect[, message])

用法同 assert.deepEqual(actual, expect[, message]) 但是內部比較是使用的是 === 而不是 ==。

assert.notDeepStrictEqual(actual, expected[, message])

用法同 assert.deepStrictEqual(actual, expect[, message]) 只是對結果取反（即不嚴格深等於）。

assert.throws(block[, error][, message])

錯誤斷言與捕獲, 斷言指定程式碼塊執行一定會報錯或丟擲錯誤。若程式碼執行未出現錯誤則會斷言失敗，斷言異常。

it('throws', () => {
  var fun = function() {
    xxx
  };
  assert.throws(fun, 'fun error');
})
複製程式碼

assert.doesNotThrow(block[, error][, message])

錯誤斷言與捕獲, 用法同 throws 類似，只是和 throws 預期結果相反。斷言指定程式碼塊執行一定不會報錯或丟擲錯誤。若程式碼執行出現錯誤則會斷言失敗，斷言異常。

it('throws', () => {
  var fun = function() {
    xxx
  };
  assert.doesNotThrow(fun, 'fun error');
})複製程式碼

• 安裝mocha

npm install mocha -g
複製程式碼

當然也可以在不在全域性安裝，只安區域性安裝在專案中

npm install mocha --save
複製程式碼

• 建立一個測試檔案 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, [1, 2, 3].indexOf(-1))
    })
  })
})
複製程式碼

這段檔案和簡單就是測試 Array 的一個 indexOf() 方法。這裡我是用的斷言庫是 Node 所提供的 Assert 模組裡的API。這裡斷言 -1 等於 陣列 [1, 2, 3] 執行 indexOf(-1)後返回的值，如果測試通過則不會報錯，如果有誤就會報出錯誤。

下面我們使用全域性安裝的 mocha 來執行一下這個檔案 mocha test.js。
下面是返回結果

基礎測試用例例項

const assert = require('assert');

describe('測試套件描述', function() {
  it('測試用例描述: 1 + 2 = 3', function() {
    // 測試程式碼
    const result = 1 + 2;
    // 測試斷言
    assert.equal(result, 3);
  });
});
複製程式碼

Mocha 測試用例主要包含下面幾部分:

1. describe 定義的測試套件(test suite)
2. it 定義的測試用例(test case)
3. 測試程式碼
4. 斷言部分

說明：每個測試檔案中可以有多個測試套件和測試用例。mocha不僅可以在node環境執行, 也可以在瀏覽器環境執行；在node中執行也可以通過npm i mocha -g全域性安裝mocha然後以命令列的方式執行測試用例也是可行的。

Mocha 的作用是執行測試指令碼，首先必須學會寫測試指令碼。所謂"測試指令碼"，就是用來測試原始碼的指令碼。下面是一個加法模組 add.js 的程式碼。

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

module.exports = add;
複製程式碼

要測試這個加法模組是否正確，就要寫測試指令碼。通常，測試指令碼與所要測試的原始碼指令碼同名，但是字尾名為.test.js（表示測試）或者.spec.js（表示規格）。比如，add.js 的測試指令碼名字就是 add.test.js。

// add.test.js
var add = require('./add.js');
var expect = require('chai').expect;

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

上面這段程式碼，就是測試指令碼，它可以獨立執行。測試指令碼里面應該包括一個或多個 describe 塊，每個 describe 塊應該包括一個或多個 it 塊。

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

it 塊稱為"測試用例"（test case），表示一個單獨的測試，是測試的最小單位。它也是一個函式，第一個引數是測試用例的名稱（"1 加 1 應該等於 2"），第二個引數是一個實際執行的函式。

expect 斷言的優點是很接近自然語言，下面是一些例子。

// 相等或不相等
expect(4 + 5).to.be.equal(9);
expect(4 + 5).to.be.not.equal(10);
expect(foo).to.be.deep.equal({ bar: 'baz' });

// 布林值為true
expect('everthing').to.be.ok;
expect(false).to.not.be.ok;

// typeof
expect('test').to.be.a('string');
expect({ foo: 'bar' }).to.be.an('object');
expect(foo).to.be.an.instanceof(Foo);

// include
expect([1, 2, 3]).to.include(2);
expect('foobar').to.contain('foo');
expect({ foo: 'bar', hello: 'universe' }).to.include.keys('foo');

// empty
expect([]).to.be.empty;
expect('').to.be.empty;
expect({}).to.be.empty;

// match
expect('foobar').to.match(/^foo/);
複製程式碼

基本上，expect 斷言的寫法都是一樣的。頭部是 expect 方法，尾部是斷言方法，比如 equal、a/an、ok、match 等。兩者之間使用 to 或 to.be 連線。如果 expect 斷言不成立，就會丟擲一個錯誤。事實上，只要不丟擲錯誤，測試用例就算通過。

it('1 加 1 應該等於 2', function() {});
複製程式碼

上面的這個測試用例，內部沒有任何程式碼，由於沒有丟擲了錯誤，所以還是會通過。

基於 karma 測試常用的一些模組

模組安裝

# 基礎測試庫
npm install karma-cli -g
npm install karma mocha karma-mocha --save-dev

# 斷言庫
npm install should --save-dev
npm install karma-chai --save-dev

# 瀏覽器相關
npm install karma-firefox-launcher --save-dev
npm install karma-chrome-launcher --save-dev
複製程式碼

配置

這裡的配置主要關注的是karma.conf.js的相關配置。如果要使用 karma 和 mocha 最好通過npm install karma-cli -g全域性安裝karma-cli。具體配置配置說明

需要注意的兩個欄位:

• singleRun: 如果值為 true, 則在瀏覽器執行完測試後會自動退出關閉瀏覽器視窗。singleRun的值我們可以更具執行環境來動態賦值, 可以啟動命令中新增NODE_ENV變數。
• browsers: 瀏覽器配置(可以配置多個瀏覽器); 如果瀏覽器無法啟動需要進行相關瀏覽器的配置。設定自啟動瀏覽器時候如果瀏覽器啟動失敗可能需要設定為--no-sandbox模式。

{
  "browsers": ["Chrome", "ChromeHeadless", "ChromeHeadlessNoSandbox"],
  "customLaunchers": {
    "ChromeHeadlessNoSandbox": {
      "base": "ChromeHeadless",
      "flags": ["--no-sandbox"]
    }
  }
}
複製程式碼

或者

{
  "browsers": ["Chrome_travis_ci"],
  "customLaunchers": {
    "Chrome_travis_ci": {
      "base": "Chrome",
      "flags": ["--no-sandbox"]
    }
  }
}複製程式碼

找到GitHub上剛才建立的需要測試的專案，並開啟測試

總結