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

js单元测试框架的更多相关文章

  1. 前端测试框架对比(js单元测试框架对比)

    前端测试框架对比(js单元测试框架对比) 本文主要目的在于横评业界主流的几款前端框架,顺带说下相关的一些内容. 测试分类 通常应用会有 单元测试(Unit tests) 和 功能测试(Function ...

  2. JS单元测试框架:QUnit

    QUnit:jQuery的单元测试框架,但不仅限于jQuery(从这个工具不需要引用jquery.js可以看出) index.html <!-- 官网 http://qunitjs.com/ - ...

  3. javascript单元测试框架mochajs详解

    关于单元测试的想法 对于一些比较重要的项目,每次更新代码之后总是要自己测好久,担心一旦上线出了问题影响的服务太多,此时就希望能有一个比较规范的测试流程.在github上看到牛逼的javascript开 ...

  4. JavaScript单元测试框架JsUnit基本介绍和使用

    JavaScript单元测试框架JsUnit基本介绍和使用 XUnit framework XUnit是一套标准化的独立于语言的概念和结构集合,用于编写和运行单元测试(Unit tests). 每一个 ...

  5. JavaScript单元测试框架-Jasmine

    Jasmine的开发团队来自PivotalLabs,他们一开始开发的JavaScript测试框架是JsUnit,来源于著名的JAVA测试框架JUnit.JsUnit是xUnit的JavaScript实 ...

  6. 现在流行什么 JS库/框架?

    现在大家最感兴趣的 JS 库和框架是什么? jQuery 91.5% Underscore 38.6% AngularJS 28.5% Backbone 18.6% React 15.7% Knock ...

  7. Javascript单元测试框架比较Qunit VS Jasmine

    Javascript单元测试框架比较Qunit VS Jasmine 工欲行其事必先利其器,好的单元测试框架是TDD成功的一半.Javascript优秀的测试框架很多, 包括Jasmine,Qunit ...

  8. 玩转Node.js单元测试

    代码部署之前,进行一定的单元测试是十分必要的,这样能够有效并且持续保证代码质量.而实践表明,高质量的单元测试还可以帮助我们完善自己的代码.这篇博客将通过一些简单的测试案例,介绍几款Node.js测试模 ...

  9. Selenium+Python ---- 免登录、等待、unittest单元测试框架、PO模型

    1.免登录在进行测试的过程中难免会遇到登录的情况,给测试工作添加了工作量,本文仅提供一些思路供参考解决方式:手动请求中添加cookies.火狐的profile文件记录信息实现.人工介入.万能验证码.去 ...

随机推荐

  1. Problem A: Dreamweaver 解题报告

    人生首道非传统题给了交互... 考试的时候花了半小时搞清楚了这东西是啥,然后打了10分的暴力...但并没有拿到分. 而且一直不会本地测试... 捣鼓捣鼓了好久,问了人才知道.. 我本地没装g++,下发 ...

  2. 洛谷 P5162 WD与积木 解题报告

    P5162 WD与积木 题目背景 WD整日沉浸在积木中,无法自拔-- 题目描述 WD想买\(n\)块积木,商场中每块积木的高度都是\(1\),俯视图为正方形(边长不一定相同).由于一些特殊原因,商家会 ...

  3. hdu5449 Robot Dog (树形dp+倍增lca)

    (警告:本篇博客包含大量人类本质内容) 先处理出来lca,然后就只需要知道从每个点到他的父亲.和从他的父亲到这个点的期望时间就可以了 我们设f[x]为x到他父亲的期望时间:g[x]为从x的父亲到x的期 ...

  4. 【bzoj1040】 ZJOI2008—骑士

    http://www.lydsy.com/JudgeOnline/problem.php?id=1040 (题目链接) 题意 一个基环森林,从中选出不相邻的若干个点使得这些点的点权和最大. Solut ...

  5. QWidget窗体中使用Q_OBJECT后无法添加背景图片或背景色

    在继承自QWiget的窗体中,设置背景图片或背景色比较简单的方法是使用setStyleSheet()函数,比如在构造函数中可以这样来设置背景图片: this->setStyleSheet(&qu ...

  6. 洛谷P2469 星际竞速

    上下界费用流比较无脑,提供一种更巧妙的费用流,无需上下界. #include <cstdio> #include <algorithm> #include <queue& ...

  7. from表单文件上传后页面跳转解决办法

    from表单上传文件,路径跳转后,又不能转发回来. 本人的一个解决办法是.返回一段html代码,浏览器解析后后退一步,回到原来的页面并刷新. return "<html>< ...

  8. TensorFlow最佳实践样例

    以下代码摘自<Tensor Flow:实战Google深度学习框架> 本套代码是在 http://www.cnblogs.com/shanlizi/p/9033330.html 基础上进行 ...

  9. for循环遍历数组(数组1)

    package com.mon10.day24; import java.util.Scanner; /** * 类说明 :计算学生的总成绩和平均分 * @author 作者 : chenyanlon ...

  10. [六字真言]2.嘛.异常定制和通用.md

    幻世当空 恩怨休怀 舍悟离迷 六尘不改 且怒且悲且狂哉! 最近一直在循环的一首歌! 丰富自己,比取悦他人更有力量.种下梧桐树,引得凤凰来.你若盛开,蝴蝶自来! 言归正传! 言归正传! 不要去大包大揽 ...