盘点 9 个前端测试框架工具！

哈喽，大家好！我是前端实验室的小师妹!

不知道大家平时项目，有没有使用单元测试呢？反正小师妹基本很少使用，因为忙呀...

但是随着项目工程的复杂化、代码高复用性要求和前端代码模块之间的高内聚低耦合的要求，前端工程的单元测试显然是很重要的。

今天整理了 9 个前端测试工具，常见的测试工具大致可分为测试框架、断言库、测试覆盖率工具等几类。

测试框架: 测试框架的作用是提供一些方便的语法来描述测试用例，以及对用例进行分组。 测试框架可分为两种： TDD （测试驱动开发）和 BDD （行为驱动开发）。

断言库: 断言库主要提供语义化方法，用于对参与测试的值做各种各样的判断。这些语义化方法会返回测试的结果，要么成功、要么失败。

测试覆盖率工具: 用于统计测试用例对代码的测试情况，生成相应的报表

接下来就让小师妹带领大家认识下这 9 款前端测试工具~

Vue Test Utils

Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。

Vue Test Utils是一组实用程序函数提供了一系列非常方便的工具，让我们更加方便的通过Jest为Vue应用编写单元测试。

项目地址：https://github.com/vuejs/vue-test-utils
Github Star: 3.5k

Jest

Jest 是 Facebook 出品的一个测试框架，相对其他测试框架，其一大特点就是就是内置了常用的测试工具，比如自带断言、测试覆盖率工具，实现了开箱即用。 而作为一个面向前端的测试框架， Jest 可以利用其特有的快照测试功能，通过比对 UI 代码生成的快照文件，实现对 React 等常见框架的自动测试。

它适用于使用的项目：Babel，TypeScript，Node，React，Angular，Vue等等！

项目地址：https://github.com/facebook/jest
Github Star: 40k

ava

AVA 是一种 JavaScript 单元测试框架，类似于unittest，是一个简约的测试库。

虽然 JavaScript 是单线程，但在 Node.js 里由于其异步的特性使得 IO 可以并行。AVA 利用这个优点让你的测试可以并发执行，这对于 IO 繁重的测试特别有用。另外，测试文件可以在不同的进程里并行运行，让每一个测试文件可以获得更好的性能和独立的环境。

它的优势是 JavaScript 的异步特性和并发运行测试, ES6语法支持更好，对aysnc/await有支持，而且语义上更简单，可谓是集众家之长。

项目地址：https://github.com/avajs/ava
Github Star: 19.9k

Karma

Karma 是一个集成了像 Jasmine（基于 BDD 的测试框架），PhantomJS（无界面的浏览器）等的测试工具。每一个测试结果对应每个浏览器，它的测试和显示都是通过命令行暴露给开发者的，这样就可以看到浏览器测试的通过或失败。

除了单元测试外还有一些其他有用的功能，比如生成代码覆盖率的报告等。

项目地址：https://github.com/karma-runner/karma
Github Star: 11.7k

Jasmine

Jasmine 是一个用来编写 Javascript 测试的 BDD(Behavior-driven development) 行为驱动开发框架)开发框架，它不依赖于浏览器，DOM 或任何 JavaScript 框架。因此，它适用于网站，Node.js 项目或 JavaScript 可以运行的任何地方。

它有拥有灵巧而明确的语法可以让你轻松的编写测试代码，这是一个非常优秀的Javascript测试框架！

项目地址：https://github.com/jasmine/jasmine
Github Star: 15.4k

Puppeteer

Puppeteer 是谷歌官方出品的一个 Node.js 库,提供了一个高级 API 来控制 DevTools 协议上的 Chrome 或 Chromium。Puppeteer默认无界面运行,但可以配置为运行有界面的 Chrome 或 Chromium。

相比较 Selenium 或是 PhantomJs,它最大的特点就是它的操作Dom可以完全在内存中进行模拟既在V8引擎中处理而不打开浏览器，而且关键是这个是Chrome团队在维护，会拥有更好的兼容性和前景。

项目地址：https://github.com/puppeteer/puppeteer
Github Star: 79.7k

SinonJs

Sinon 是一个非常强大的库，用于辅助进行单元测试。它允许我们对单元测试编写stubs、shims和mocks。有了Sinon，我们可以对stubs和shims进行控制，以验证它们是否被调用了以及被调用了多少次。

Sinon基于javascript的动态性,通过 test-doubles 替换任何Javascript函数，并提供很多方便测试的配置，从而帮助我们减少测试项编写的复杂度。

比如通过 Fake timers用来控制时间，例如触发一个setTimeout；通过Fake XMLHttpResquest and server来伪造Ajax请求和响应，用来解决测试中遇到的由外部依赖带来的所有复杂问题。

项目地址：https://github.com/sinonjs/sinon
Github Star: 9.1k

Chai

Chai 是一个用于 Node.js 和浏览器的 BDD/TDD 断言库，可以与任何 JavaScript 测试框架便捷配对。

断言库有很多，像node.js中自带的assert也是一个断言库，于此之外还有expect，should等断言库，但是其中chai也支持expect(),assert(),should风格的断言方式。

项目地址：https://github.com/chaijs/chai
Github Star: 7.7k

前端工程的单元测试对于系统的稳定性以及代码的维护意义重大，通过完善单元测试来提高代码质量，并在一定程度上可以提高开发效率，小伙伴们还是需要学习一下的~