在瀏覽器中使用 Mocha 和 Chai 進行單元測試

Mocha

Mocha 是一個 JavaScript 的測試框架,目的是用來管理測試程式碼,可在 Node.js 或瀏覽器環境運行。

在這裡指定介面(Interface)為 BDD。若使用 BDD 則提供 describe()(同 context())、it()(同 specify())、before()after()beforeEach()afterEach()方法。以下對語法做簡單說明。

語法範例。

describe('hooks', function() {
  before(function() {
    // run before all tests in this block
  });

  after(function() {
    // run after all tests in this block
  });

  beforeEach(function() {
    // run before each test in this block
  });

  afterEach(function() {
    // run after each test in this block
  });

  // test case
  it('should ...', function() {
    // run test case
  });
});

Chai

Chai 提供 BDD 語法測試用的斷言庫(Assertion Library)。斷言庫是一種判斷工具,明確地將預測結果指出。若實際結果和預測不同,就是測試有誤。以下對語法做簡單說明。

Assert

var assert = chai.assert;

describe('AssertTest', function() {
  var foo = 'Hello';
  var bar = 'World';

  it('should be equal', function() {
    assert('foo' === 'bar', 'foo is not bar');
  });
});

Chai Assert

Chai - Assert 說明

Expect / Should

使用可串連的 getters 來完成斷言。這些可串聯的 getters 有 to、is、have 等。它很像英文,用很口語的方式做判斷。

var expect = chai.expect;

describe('ExpectTest', function() {
  it('should be equal', function() {
    expect(3).to.equal(2);
  });
});

Chai Expect

Chai - Expect / Should 說明

範例

完整程式碼在這裡。建立一個準備要測試的 function「addClass」,當對某個 element 加入 class 時,會檢查加入的 class 是否重覆,若沒有重覆就加進去

function addClass(el, newClass) {
  if (el.className.indexOf(newClass) === -1) {
    el.className += ' ' + newClass;
  }
}

因此檢測的項目可條列為

是否成功加入新的 class

加入一個新的 class,在這裡是加入 test-class,然後比對 element 的 class 是否擁有這個 class。在這裡的檢測方式是字串比對是否為「test-class」。

it('should add class into element', function() {
  addClass(element, 'test-class');
  assert.equal(element.className.trim(), 'test-class');
});

是否重覆加入 class

再次加入 test-class,因為前一次已經加過了,所以不可重覆加入。在這裡的檢測方式很簡單,由於是字串比對,因此只要看看字串是否是「test-class」,而非「test-class test-class」即可。

it('should not add a class which already exists in element', function() {
  addClass(element, 'test-class');
  assert.equal(element.className.trim(), 'test-class');
});

Hooks

在這裡也示範了before()after()beforeEach()afterEach()的使用方式。

before()、after()、beforeEach() 與 afterEach() 的使用方式

檢測報告

範例 - Unit Testing with Mocha and Chai

推薦閱讀


Mocha Chai Unit Test 單元測試