前端测试框架对比(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