前端測試框架對比(js單元測試框架對比)

前端測試框架對比(js單元測試框架對比)

本文主要目的在於橫評業界主流的幾款前端框架，順帶說下相關的一些內容。

測試分類

一般應用會有 單元測試(Unit tests) 和 功能測試(Functional tests)，複雜大型應用可能會有整合測試(Integration tests)。
其中：

• 單元測試：關注應用中每一個零部件的正常運轉，防止後續修改影響以前的組件。
• 功能測試：確保其總體表現符合預期，關注可否讓用戶正常使用。
• 整合測試：確保單獨運行正常的零部件整合到一塊兒以後依然能正常運行。
  詳細資料1
  詳細資料2
  開發人員主要關注單元測試，做爲開發中的反饋。本文重點討論的單元測試框架。
  單元測試的好處：
• 若是能經過單元測試，那麼經過後續測試且軟件總體正常運行的機率大大提升。
• 單元測試發現的問題定位到細節，容易修改，節省時間。
• 追蹤問題變得更加方便。

選擇單元測試框架

單元測試應該：簡單，快速執行，清晰的錯誤報告。
測試框架基本上都作了同一件事兒：

• 描述你要測試的東西
• 對其進行測試
• 判斷是否符合預期
  選擇框架會考慮下面的點：
• 斷言(Assertions)：用於判斷結果是否符合預期。有些框架須要單獨的斷言庫。
• 適合 TDD / BDD：是否適合 測試驅動型 / 行爲驅動型 的測試風格。
• 異步測試：有些框架對異步測試支持良好。
• 使用的語言：大部分 js 測試框架使用 js。
• 用於特定目的：每一個框架可能會擅長處理不一樣的問題。
• 社區是否活躍。
  注：
• TDD：測試驅動型的開發方式，先寫測試代碼，以後編寫能經過測試的業務代碼，能夠不斷的在能經過測試的狀況下重構。
• BDD：與 TDD 很類似，測試代碼的風格是預期結果，更關注功能，看起來像需求文檔。
  其實都是先寫測試代碼，感受BDD 風格更人性。
  參考連接

測試工具的類型

組合使用工具很常見，即便已選框架也能實現相似的功能

• 提供測試框架(Mocha, Jasmine, Jest, Cucumber)
• 提供斷言(Chai, Jasmine, Jest, Unexpected)
• 生成，展現測試結果(Mocha, Jasmine, Jest, Karma)
• 快照測試(Jest, Ava)
• 提供仿真(Sinon, Jasmine, enzyme, Jest, testdouble)
• 生成測試覆蓋率報告(Istanbul, Jest, Blanket)
• 提供類瀏覽器環境(Protractor, Nightwatch, Phantom, Casper)
  解釋上面提到的點：
• 測試框架，即組織你的測試，當前流行 BDD 的測試結構。
• 快照測試(snapshot testing)，測試 UI 或數據結構是否和以前徹底一致，一般 UI 測試不在單元測試中
• 仿真(mocks, spies, and stubs)：獲取方法的調用信息，模擬方法，模塊，甚至服務器
  相關資料

各框架特色

Jest

• facebook 坐莊
• 基於 Jasmine 至今已經作了大量修改添加了不少特性
• 開箱即用配置少，API簡單
• 支持斷言和仿真
• 支持快照測試
• 在隔離環境下測試
• 互動模式選擇要測試的模塊
• 優雅的測試覆蓋率報告，基於Istanbul
• 智能並行測試(參考)
  
• 較新，社區不十分紅熟
• 全局環境，好比 describe 不須要引入直接用
• 較多用於 React 項目(但普遍支持各類項目)

Mocha

• 靈活(不包括斷言和仿真，本身選對應工具)
  流行的選擇：chai，sinon
• 社區成熟用的人多，測試各類東西社區都有示例
• 須要較多配置
• 可使用快照測試，但依然須要額外配置

Jasmine

• 開箱即用(支持斷言和仿真)
• 全局環境
• 比較'老',坑基本都有人踩過了

AVA

• 異步，性能好
• 簡約，清晰
• 快照測試和斷言須要三方支持

Tape

• 體積最小，只提供最關鍵的東西
• 對比其餘框架，只提供最底層的 API

總結一下，Mocha 用的人最多，社區最成熟，靈活，可配置性強易拓展，Jest 開箱即用，裏邊啥都有提供全面的方案，Tape 最精簡，提供最基礎的東西最底層的API。

參考

選擇測試框架並非非黑即白的事兒，就像你並不能證實PHP不是最好的語言。
我的傾向 Jest，緣由：容易上手，開箱即用，功能全面。

社區意見

下面是在 stackshare 最流行的三個測試框架以下，但應考慮到 Jest 比較年輕，參與投票的時間較短的因素。

下面是三個框架在過去一年裏 google 的搜索熱度，但應該考慮到 Jest 比較年輕，你們嘗試新東西，解決新問題，可能會帶來較大搜索量。

下面是用戶使用狀況的調查，能夠看出， Jest 忠誠度較高，使用後棄用的機率較低，Mocha 和 Jasmine 知名度最高。數據統計於 2017 年。

參考

代碼樣例

要測試的代碼

'use strict'
var Math = {
  add(a, b) {
    return a + b;
  }
}
module.exports = Math;

AVA

const test = require('ava');
const math = require('../Math');

const firstOperand = 2;
const secondOperand = 3;

test("Math add function", t => {
  const result = math.add(firstOperand, secondOperand);

  t.is(result, firstOperand + secondOperand);
});

Jasmine

var math = require('../Math');
describe("Math", function() {
  var firstOperand;
  var secondOperand;
  beforeEach(function() {
    firstOperand = 2;
    secondOperand = 3;
  });
  it("should add two numbers", function() {
    var result = math.add(firstOperand, secondOperand);
    expect(result).toEqual(firstOperand + secondOperand);
  });
});

Jest

jest.unmock('../Math'); // unmock to use the actual implementation of Math

var math = require('../Math');

describe("Math", function() {
  var firstOperand;
  var secondOperand;

  beforeEach(function() {
    firstOperand = 2;
    secondOperand = 3;
  });

  it("should add two numbers", function() {
    var result = math.add(firstOperand, secondOperand);
    expect(result).toEqual(firstOperand + secondOperand);
  });
});

Mocha

var assert = require('assert'); // nodejs 內建斷言
var math = require('../Math');
describe("Math", function() {
  var firstOperand;
  var secondOperand;
  beforeEach(function() {
    firstOperand = 2;
    secondOperand = 3;
  });
  it("should add two numbers", function() {
    var result = math.add(firstOperand, secondOperand);
    assert.equal(result, firstOperand + secondOperand);
  });
});

Tape

var test = require('tape');
var math = require('../Math');
var firstOperand = 2;
var secondOperand = 3;
test("Math add function", function(t) {
  var result = math.add(firstOperand, secondOperand);
  t.equal(result, firstOperand + secondOperand);
  t.end();
});

參考資料1
參考資料2
參考資料3