前言

在前端的开发领域中，决不仅仅是写完了就可以交付了，尤其是在大型项目中，测试用例是必不可少的，这可以保证我们代码的质量，以及编写出更加符合需求的代码，也大大提升了开发的效率。但是现在在前端领域各种测试工具层出不穷，纷繁乱杂，今天自己就来整理一下。

开发模式

  • TDD （测试驱动开发）

测试驱动开发是敏捷开发中的一项核心实践和技术，也是一种设计方法论。TDD的原理是在开发功能代码之前，先编写单元测试用例代码，测试代码确定需要编写什么产品代码。TDD的基本思路就是通过测试来推动整个开发的进行，但测试驱动开发并不只是单纯的测试工作，而是把需求分析，设计，质量控制量化的过程。TDD首先考虑使用需求（对象、功能、过程、接口等），主要是编写测试用例框架对功能的过程和接口进行设计，而测试框架可以持续进行验证。

  • BDD （行为驱动开发）

行为驱动开发是一种敏捷软件开发的技术，它鼓励软件项目中的开发者、QA和非技术人员或商业参与者之间的协作。主要是从用户的需求出发，强调系统行为。BDD最初是由Dan North在2003年命名，它包括验收测试和客户测试驱动等的极限编程的实践，作为对测试驱动开发的回应。

常见测试工具

  • 测试管理工具

常见测试管理工具有：karma

  • 测试框架

测试框架的作用是提供一些方便的语法来描述测试用例，以及对用例进行分组。
常见测试框架有：jest, mocha, qunit, jasmine

  • 断言库

断言库主要提供语义化方法，用于对参与测试的值做各种各样的判断。这些语义化方法会返回测试的结果，要么成功、要么失败。
常见的断言库有： chai, should.js, expect.js

  • 测试覆盖率

用于统计测试用例对代码的测试情况，生成相应的报表。
常见的覆盖率测试工具有：Istanbul

  • 自动化测试

常见的自动化测试工具有：Protractor, Selenium

  • ...

以及一些其他的测试工具等等

Jest

Jest 是 Facebook 出品的一个测试框架，相对其他测试框架，其一大特点就是就是内置了常用的测试工具，比如自带断言、测试覆盖率工具，实现了开箱即用，官网地址：https://facebook.github.io/jest/

Mocha

mocha是JavaScript的一种单元测试框架，既可以在浏览器环境下运行，也可以在Node.js环境下运行，官网地址：https://mochajs.org/

Istanbul

Istanbul 是 JavaScript 程序的代码覆盖率工具，官网地址：https://github.com/gotwarlost/istanbul

Chai

BDD/TDD风格断言库，适用于Nodejs和浏览器，可以很方便地和任何测试框架集成，官网地址：
http://www.chaijs.com/

Expect.js

极简的BDD风格断言库，适用于Nodejs和浏览器，官网地址：https://github.com/Automattic/expect.js

Should.js

BDD风格Nodejs断言库，官网地址：https://github.com/shouldjs/should.js

Qunit

QUnit是个强大简单易用的JavaScript测试框架，官网地址：http://qunitjs.com/

Jasmine

jasmine是一款非常流行的测试框架,不依赖任何别的库,语法简单，官网地址：https://jasmine.github.io/2.3/introduction.html

Karma

Karma 是Google 开源的一个基于Node.js 的 JavaScript 测试执行过程管理工具（Test Runner）。该工具可用于测试所有主流Web浏览器，也可集成到 CI （Continuous integration）工具，也可和其他代码编辑器一起使用。

Karma 可以在不同的桌面或移动设备浏览器上，或在持续集成的服务器上测试 JavaScript 代码。Karma 支持 Chrome、ChromeCanary、 Safari、Firefox、 IE、Opera、 PhantomJS，知道如何捕获浏览器正使用的默认路径，这些路径可能在启动器配置文件被忽视（overridden）。Karma 就是一个可以和多重测试框架协作的测试执行过程管理工具，它有针对Jasmine、 Mocha 和AngularJS 的适配器，它也可以与 Jenkins 或 Travis 整合，用于执行持续集成测试，官网地址：
https://github.com/karma-runner/karma

Phantomjs

PhantomJS是一个基于webkit的JavaScript API。它使用QtWebKit作为它核心浏览器的功能，使用webkit来编译解释执行JavaScript代码。任何你可以在基于webkit浏览器做的事情，它都能做到。它不仅是个隐形的浏览器，提供了诸如CSS选择器、支持Web标准、DOM操作、JSON、HTML5、Canvas、SVG等，同时也提供了处理文件I/O的操作，从而使你可以向操作系统读写文件等。PhantomJS的用处可谓非常广泛，诸如网络监测、网页截屏、无需浏览器的 Web 测试、页面访问自动化等，官网地址：
https://github.com/ariya/phantomjs

Selenium

Selenium是一个浏览器自动化测试库，大多时候我们用它来测试web应用，Selenium 可以胜任任何在浏览器上自动化测试的任务，官网地址：
https://github.com/SeleniumHQ/selenium

Protractor

Protractor通过程序模拟用户在浏览器中操作来做自动化测试。
Protractor可以为angular应用做自动化测试，它有些api是专门为angular提供的。
如果不是angular应用，也可以用Protractor做自动化测试，只要避开调用angular专属api就可以了，本文的示例就是非angular应用，官网地址：
https://github.com/angular/protractor

Sinon

Sinon.JS 为 JavaScript 提供了独立的 spies、stubs 和 mocks [译者注：Spy、Stub 和 Mock 都是测试专用名词，Stub 常被翻译为桩，spies 是 Spy 的复数形式，是一种可以监视方法、调用和参数的技术]。它不依赖任何东西，可以配合任何单元测试框架工作，官网地址：
http://sinonjs.org/

WebdriverIO

WebdriverIO 允许用户仅添加几行代码就可以控制浏览器或移动应用程序，使测试代码更简单、简洁、易读。集成的 TestRunner 同样允许你以同步的方式调用异步命令，这样你不需要关心如何处理 Promise 以避免竞态条件。此外，它取消了所有的繁琐的设置工作，并且会为您管理的 Selenium 会话，官网地址：
http://webdriver.io/

Nightwatch

Nightwatch.js 是一个易于使用的 Node.js，它是为基于浏览器的 app 和网站设计的终端到终端（E2E）的测试方法。它使用强大的 W3C WebDriver API ，用于在 DOM 元素上执行命令和断言，官网地址：
http://nightwatchjs.org/

PhantomCSS

PhantomCSS 获得 CasperJS 捕获的屏幕截图，并使用 Resemble.js 将其与基准图进行对比，以测试 RGB 像素差异。 PhantomCSS 然后生成图像差异对比，用于帮助您找到原因，官网地址：
https://github.com/Huddle/PhantomCSS

参考资料