前端测试框架调研丨【WEB前端大作战】
前端测试框架调研
前端测试框架综述
业界概览
目前为止的web测试领域已经趋于稳定，逐渐成熟。同时根据stateofjs（目前已更新到2022）的2020年的调查报告 1 ，表明对于现在一些流行的测试框架的满意度都高于90%。
我的调研基于业界使用程度最高的一些框架所展开，下面这张图从上至下就是目前为止业界使用最多的一些框架。
在这其中每个框架有不同的特性，也有不同的定位。基本上包含着单元测试、组件测试、集成测试，与大部分的测试体系一致。通过阅读 An Overview of JavaScript Testing in 2020(Vitali Zaidman)在其2020年的JavaScript测试总结 2 中提到各个测试框架基于功能、可以同时组合不同的工具以应用，下面的内容是对他的总结的一些提炼和翻译
-
能够基于一定配置在浏览器或是Node.js 中应用测试：Karma, Jasmine, Jest, TestCafe, Cypress, webdriverio
-
提供了测试框以帮助整个流程可读可扩展，目前通常基于BDD来构建测试用例：Mocha, Jasmine, Jest, Cucumber, TestCafe, Cypress
-
提供Mock能力即模拟函数、功能、场景并隔离能力：Mocha,Jasmine, Jest, Karma, TestCafe, Cypress
-
提供生成覆盖率报告单能力：IstanbulJS, Jest, Blanket
-
提供浏览器模拟控制的能力，比如模拟点击、拖动、敲击等动作：Nightwatch, Nightmare, Phantom, Puppeteer, TestCafe, Cypress
-
提供可视化回归工具，即对比网页的前后版本：Applitools, Percy, Wraith, WebdriverCSS
从上面能够看到我们需要从上面选择一个或一些框架来是我们的架构，一般而言建议至少两个部分包含，其一单元和集成，其二功能和端到端。这样两个线程在运行的时候就能够做到互不干扰，并将耗时与不耗时的操作分离。
下面逐一介绍一些目前业界在流行的框架
单元测试库
Unit tests are one of the reasons to use functional programming and pure functions as much as possible.
The purer your application is, the easier you can test it.
单元测试主要是通过模拟输入和预测输出的方式测试独立的函数或者类。
Jest
Jest 是一个专注于简易性的 JavaScript 测试框架。一个其独特的功能是可以为测试生成快照 (snapshot)，以提供另一种验证应用单元的方法。
vue官方推荐的单元测试框架，不需要任何配置的集成框架。facebook基于Jasmain改进后出品的单元测试框架，与react打配合会更加得心应手一些。集成了 Mocha ，Chai，jsdom，SinonJS等的一些功能。从2017年至今都是最为流行的测试框架 3 4 。默认安装了 JSDOM，内置断言且命令行的用户体验非常好。不过需要一个能够将单文件组件导入到测试中的预处理器。我们已经创建了 vue-jest 预处理器来处理最常见的单文件组件特性，但仍不是 vue-loader 100% 的功能。
可以适用的框架：Babel, TypeScript, Node, React, Angular, Vue
重点特性：
- 零配置：Jest的希望在大部分JS项目上实现开箱即用，自带断言库，附带类似于SinonJS的模拟库，除此之外还能模拟一些服务，也就是模拟API请求，无需配置。
- 快照：可以通过捕获屏幕截图来执行可视化回归测试，构建能够轻松追踪大Object的测试。快照可以独立于测试代码，也可以集成进代码行内。
- 覆盖率：自带覆盖率生成工具，该工具基于IstanbulJS，只需添加
--coverage标志就可生成代码覆盖率报告，无需额外设置。 - 快速： 为了让加速测试进程，Jest会先运行先前失败的测试，并根据测试文件需要多长时间重新组织测试。
- 文档：官方中文文档支撑，但是三方文档可能相对少，
- 受调查的使用者显示其满意度逐年上涨
- 全局默认注册了测试对象，无需显式的import或是require
缺点：
- 作为新兴的测试框架，三方文档相对少，前期学习成本相对高，虽说如此但其社区已经明显的发展壮大起来
- Jest 不支持太多的库或工具，这些库或工具有时对于在不支持 Jest的 ide 中调试测试用例非常方便。
Mocha
Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun.
Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases.
比较灵活成熟的JavaScript单元测试框架，由于没有内部集成，所以可以自主选择断言库（Chai）和侦听库（SinonJS）。
另外 Mocha 独特的功能是它不止可以在 Node.js 里运行测试，还可以在浏览器里运行测试。
重点特性：
- 开源：该测试框架是开源测试框架，灵活性高
- 文档：官方英文文档，三方教程文档齐全
- 扩展性极强，基于mocha的开源软件，三方库非常多
缺点：
- 在社区中的受欢迎程度即使用范围逐年下降
- 由于其灵活性，比较难以配合多个库来安装，前期学习成本高昂，但其毕竟有着自己的扩展支持
Jasmine
Jasmine is a Behavior Driven Development testing framework for JavaScript.
It does not rely on browsers, DOM, or any JavaScript framework.
Thus it’s suited for websites, Node.js projects, or anywhere that JavaScript can run.
Jasmine 主攻BDD断言库与异步测试的自动化测试框架，没有外部依赖。2009年正式发布，完全开源。Augular官方推荐的测试框架，有着对其的众多特性支持。
重点特性：
- 应用程序运行在 Node.js 上，通过连续运行测试用例，允许准确和灵活的 bug 报告
- 由于没有外部库，因此可以兼容所有的框架和库，并且同样集成了该有的断言库和mock库
- 与Jest一样，全局默认注册了一些测试特性，方便使用
- 作为Jest的底层框架，非常成熟，官方英文文档，三方文档齐全，学习曲线平滑，
缺点：
- 由于灵活性，所有的配置都需要显示的调用，过程令人繁琐
- 支持快照
Jasmine-snapshot但是配置复杂 - 在社区中的受欢迎程度即使用范围逐年下降
AVA
AVA is a test runner for Node.js with a concise API, detailed error output, embrace of new language features and process isolation that lets you develop with confidence 🚀
非常小型化、极简的测试框架，能够并行运行测试用例
重点特性：
- 自集成了应有的功能，除了监听的能力
- 没有配置全局变量需要显式引入
- API以及断言结构都非常简单，但却支持许多高级功能
- 多线程运行Nodejs实例
- 支持快照
缺点：
- 从下图可以看到是个鲜为人知的小众框架，受众面小，三方文档相对很少
Tape
总结
从上面的叙述来看我们总结在下面中
| 框架名称 | 是否提供断言 | 支持快照测试 | 支持覆盖率报告 | 支持仿真 | 是否有文档支撑（无/中/英） | 是否开源（否/协议） | 满意度 | 关注度 | 使用度 | 认知度 |
|---|---|---|---|---|---|---|---|---|---|---|
| Jest | 是 | 是 | 是 | 是 | 中文 | MIT licensed | 96% | 82% | 68% | 93% |
| Mocha | 否 | 否 | 否 | 否 | 英文 | MIT licensed | 74% | 54% | 53% | 91% |
| Jasmine | 是 | 是 | 否 | 是 | 英文 | MIT licensed | 62% | 40% | 42% | 78% |
| AVA | 是 | 是 | 是 | 否 | 中文 | MIT licensed | 61% | 37% | 8% | 28% |
| Tape | 是 | 否 | 否 | 否 | 英文 | MIT licensed | - | - | - | - |
可以看到Jest虽然出道较晚但功能相比较而言是最为齐全的，且配置有中文文档，官方文档也最详细，如果希望简单上手配置的话可以直接使用Jest起步。
Mocha 最为灵活但是其上手相对麻烦，如果在熟悉各个主框架并且了解各个辅助库的优劣势的情况下可以尝试使用。
Jasmine 作为Jest的底层，其特性显然不如Jest，但是其生态非常完善，无论是官方还是第三方文档都很完整，可以随时查阅资料，但是其官方的资料是英文的。
如果仅仅是需要测试的一个特性，可以考虑性能更好的AVA ，其采用多线程的方式让其测试用例运行的速度飞快。
组件测试库
组件测试测什么？
一般来讲，我们的TDD开发先确定需求任务，再进入开发工作，在组件测试中应当也有相似的逻辑：
- 确定业务逻辑，这个组件是做什么的，在业务中承担什么工作，即其中有什么行为，
- 确定输入和输出，什么数据进入到了组件里面，组件中改变了什么外部数据，输出的是什么内容。
测试大多数 Vue 组件时都必须将它们挂载到 DOM (虚拟或真实) 上，才能完全断言它们正在工作。
这是另一个与框架无关的概念。因此组件测试框架的诞生，是为了让用户能够以可靠的方式完成这项工作，同时还提供了 Vue 特有的诸如对 Vuex、Vue Router 和其他 Vue 插件的集成的便利性。
同时组件作为一个完整的模块拥有可测试性，应当有一套规范的测试方法保证其开发满足设计需求。
比如确保props中的输入正确性，created中的执行初始化内容是否正常，样式是否按照期望的样子渲染，DOM元素是否正常，组件内修改的浏览器缓存，vuex缓存，用户交互是否都正常，可以看到可测试的范围非常广，因此需要考虑专门针对组件测试去适配框架。
Testing Library
The more your tests resemble the way your software is used, the more confidence they can give you.
一个简单且完整的轻量级测试工具。专为不同的框架（react、vue、augular…）提供了不同的工具，也就是其家族内的所有产品，包括但不限于React Testing Library 、Vue Testing Library，同时也可以和端到端的测试框架打配合。提供了类似于jsdom的在DOM节点上查询的能力。
Vue Testing Library
Vue Testing Library 是一组专注于测试组件而不依赖实现细节的工具。
由于在设计时就充分考虑了可访问性，它采用的方案也使重构变得轻而易举。
它的指导原则是，与软件使用方式相似的测试越多，它们提供的可信度就越高。
Testing Library 封装的非常轻量化的组件测试库，基于DOM Testing Library封装及Vue Test Utils，也就是Testing Library中的核心底层框架同时结合了特定前端框架组件的一部分API而成。
实际上该框架测试组件也是通过检查实际的DOM树上的节点是否符合期望。
这里附一个别人写好的一个demo，有兴趣的可以看下
Vue Test Utils
Vue Test Utils 是官方的偏底层的组件测试库，它是为用户提供对 Vue 特定 API 的访问而编写的。
如果你对测试 Vue 应用不熟悉，我们建议你使用 Vue Testing Library，它是 Vue Test Utils 的抽象。
Vue Test Utils 是 Vue 组件单元测试的官方库。Vue CLI 的 webpack 模板对 Karma 和 Jest这两个测试运行器都支持，并且在 Vue Test Utils 的文档中有一些引导。
StoryBook
Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application.
准确来说StoryBook提供的是一个组件库管理的解决方案，在这其中集成了一部分的组件测试的方法，包括了单元测试、视觉回归测试、集成测试、快照测试的一系列针对于组件的测试方法。
其它测试工具
IstanbulJS
辅助性测试库，最为流行的覆盖率测试工具，可以生成语句、行、函数、分支的覆盖百分比
Karma
A simple tool that allows you to execute JavaScript code in multiple real browsers.
辅助性测试库，主要用于抹平环境，使得TDD流程更快更简单，同时支持直接集成单元测试框架
重点特性：
- 主要专攻于各个在不同的真实浏览器以及类浏览器（jsdom）上面进行测试
- 并且能够在本地开发过程、连续集成的服务器、以及每次保存的时候运行测试用例
- 可以集成 IstanbulJS自动生成覆盖性报告
Chai
辅助性测试库，最为流行的BDD、TDD断言库，支持不同种的方式去实现断言功能（Should、Expect、Assert）
Unexpected
辅助性测试库，专攻于BDD的断言库，语法与Chai稍有不同，但是其基于不同的前端框架又有不同的衍生品
SinonJS
A test spy is a function that records arguments, return value, the value of this and exception thrown (if any) for all its calls.
There are two types of spies: Some are anonymous functions, while others wrap methods that already exist in the system under test.
辅助性测试库，专攻于单元测试中的各种mock模拟情况
重点特性：
- 模拟前后台交互，测试数据
- 模拟依赖的函数，使得函数测试独立开来，从而达到解耦的目的。通过spy可以生成一个间谍函数对原有的函数进行封装并监听，记录下想要模拟的函数的参数、返回值、this、以及其中的异常。通常用于检查函数被调用多少次，过程传递的参数
- stub预编程行为函数，比spy更高级的功能，完全取代原函数，不会调用原函数。通常用于与外部交互比如网络请求，数据库连接等
- mock函数，行为级别的模拟，可以替换调一个对象中的多个方法。通常用于验证多个具体行为。
TestdoubleJS
This library was designed to work for both Node.js and browser interpeters.
It’s also test-framework agnostic, so you can plop it into a codebase using Jasmine, Mocha, Tape , Jest, or our own teenytest.
辅助性测试库，是一个基于TDD的模拟库，类似于SinonJS但又不一样，其使用一些更为熟悉的语法td.fucntion td.object td.replace。
我们可以通过阅读JavaScript Testing Tool Showdown: Sinon.js vs testdouble.js (Jani Hartikainen)写的这篇文章5 看到一些testdouble.js与SinonJS.js的区别：
- testdouble没有类似于spy的功能
- testdouble要求输入更为严格，根据模拟的函数来确定输入
- testdouble有内置的Promise功能，也就是内置同步
- testdouble的回调函数的鲁棒性更强，也就是更通用一些，但用起来也更复杂一些
- testdouble可以通过内置的方法完整的替换掉module
- testdouble缺少SinonJS独有的特性，比如fake系列的timers、XmlHttpRequest
Wallaby
Wallaby is a developer productivity tool that runs your JavaScript and TypeScript tests immediately as you type, highlighting results in your IDE right next to your code.
Cucumber
Cucumber 是一个能够理解用普通语言 描述的测试用例的行为驱动开发（BDD）的自动化测试工具。使用Gherkin这种标记语言去描述种种行为，也就是说可以用相对比较自然的语言去描述需求场景，同时也支持但不限于java、js、python等语言。在不同的团队中用于描述需求特性比较方便
端到端测试
E2E(end to end)测试是指端到端测试又叫功能测试，站在用户视角，使用各种功能、各种交互，是用户的真实使用场景的仿真。在产品高速迭代的现在，有个自动化测试，是重构、迭代的重要保障。对web前端来说，主要的测试就是，表单、动画、页面跳转、dom渲染、Ajax等是否按照期望。
Selenium
Selenium 曾经经典的端到端测试框架，其拥有的webdriver提供了基础的一个框架工具，使得可以访问主流的浏览器接口以及各种扩展。因此许多的端到端测试框架为了使用webdriver都是在此基础上的封装
Protractor
Protractor is an end-to-end test framework for Angular and AngularJS applications. Protractor runs tests against your application running in a real browser, interacting with it as a user would.
基于Selenium封装，并提供了一些特殊的语法，同时加强了对Angular的支持，Angular官方推荐端到端测试框架。除此之外还能生成测试报告以及对TypeScripted支持
WebdriverIO
Next-gen browser and mobile automation test framework for Node.js
拥有自己实现的Selenium webdriver，最为经典的端到端测试框架，非常的灵活。社区三方文档都非常齐全，支持基于Applitools的可视化回归性测试
Nightwatch
同样实现了Selenium webdriver，同时还提供了带断言的测试框架，也就是可以独立运行。语法简单和可读。不支持TypeScript。
Appium
主要专攻于移动手机平台的自动化测试框架
TestCafe Studio
跨平台与跨设备，由于其工作原理是将JS脚本注入到页面所以可以理论上可以在任何平台上面工作,可以同时运行多个测试用例。
Cypress
我们可以阅读Evaluating Cypress and TestCafe for end to end testing（Tamlyn Rhodes，2018）6 来看到其中具体的一些区别。
Reference
[1] 2020.stateofj, https://2020.stateofjs.com/zh-Hans/technologies/testing/
[2] Vitali Zaidman, An Overview of JavaScript Testing in 2020, 2020, https://medium.com/welldone-software/an-overview-of-javascript-testing-7ce7298b9870
[3] 2017.stateofj, https://2017.stateofjs.com/2017/testing/results
[4] 2018.stateofj, https://2018.stateofjs.com/testing/overview/
[5] Jani Hartikainen, JavaScript Testing Tool Showdown: Sinon.js vs testdouble.js, 2017, https://www.sitepoint.com/javascript-testing-tool-showdown-sinon-js-vs-testdouble-js/
[6] Evaluating Cypress and TestCafe for end to end testing, 2018, https://medium.com/yld-blog/evaluating-cypress-and-testcafe-for-end-to-end-testing-fcd0303d2103
- 点赞
- 收藏
- 关注作者
评论（0）