一、引言
前端这几年发展的非常迅速，我们的系统的功能正在变的越来越复杂，这对我们的前端工程化能力提出了更高的要求，听到工程化，大家的第一反应肯定是高质量的代码设计和高质量的代码实现。
但实际上，前端 自动化测试 也是前端工程化里面非常重要的一个环节。
二、 Jest基础入门
一个普通前端听到自动化测试，第一反应可能是：我工作这么多年也没写过测试，这个东西有用吗？
答：非常有用
如果你打开GitHub，去看一下流行的开源库或者框架的源码，你会发现，在这些源码里面，全部都包含了大量的自动化测试的代码。比如antd、lodash、再比如vue、react、echarts、redux等等……
开源的工具需要稳定性，而引入前端自动化测试为开源项目提供稳定性，是再好不过的选择了。
三、学习前提
阅读这篇 文章 需要以下知识储备：
·js、es6 基础语法
·node、npm 相关知识
·git 的相关操作
·react或者vue，至少了解一个
·状态管理工具，至少了解一个
四、背景及原理
首先在任意目录下创建一个math.js文件，假设这个文件是一个数学库，里面定义两个函数，分别是加法和减法：
// math.js
function add(a, b) {
return a + b
}
function minus(a, b) {
return a - b
}
这时候我们可以在业务代码里去使用这个数学库。
但是，假如，上面的minus函数我们不小心写错了，把减法写成了乘法，如果直接在业务代码中使用这个方法，就会带来无法预期的bug。
所以这时候，我们就需要对math.js这个公共库进行自动化测试，确保没问题之后，再让业务组件去调用，这样就会保证不会出特别多的bug了。
我们可以这样做：
在该目录下创建一个math.test.js文件，然后写一点测试代码：
const result = add(3, 7)
const expect = 10
if (result !== expect) {
throw new Error(`3 + 7 应该等于${expect}，结果却是${result}`)
}
const result = minus(3, 3)
const expect = 0
if (result !== expect) {
throw new Error(`3 - 3 应该等于${expect}，结果却是${result}`)
}
这时候我们运行这段代码，会发现没有抛出任何异常，说明这两个 测试用例 都通过了。
这就是自动化测试最原始的雏形。
然后我们思考一个问题，如何将这堆代码进行简化，做成一个公用的函数，比如这样：
// 测试 3 + 3 是否等于 6
expect(add(3, 3)).toBe(6)
// 测试 3 - 3 是否等于 0
expect(minus(3, 3)).toBe(0)
expect 方法实现：
function expect(result) {
return {
toBe(actual) {
if (result !== actual) {
throw new Error("预期值和实际值不相等")
}
},
}
}
这时候我们运行这段代码，会发现没有抛出任何异常，说明这两个测试用例都通过了。
虽然实现了 expect 函数，但是报错的内容始终是一样的，我们不知道是具体哪个方法出现了问题，这时候我们就会想到，我们需要将这个 expect 方法进一步做改良，我们如果能在 expect 方法外部再包装一层，就可以多传递一些额外的内容，比如创造这样的写法：
test("测试加法 3 + 3", () =>{
expect(add(3, 3)).toBe(6)
})
test("测试减法 3 - 3", () =>{
expect(minus(3, 3)).toBe(0)
})
这样封装之后，我们既能进行测试，又能得到测试的描述。
test 方法实现：
function test(desc, fn) {
try {
fn()
console.log(`${desc} 通过测试`)
} catch {
console.log(`${desc} 没有通过测试`)
}
}
所以前端自动化测试到底是什么？
答：实际上就是写了一段其它的用来测试的js代码，通过测试代码去运行业务代码，判断实际结果是否满足预期结果，如果满足，就是没有问题，如果不满足，就是有问题。
上面实现的 expect 方法 和 test 方法 实际上和主流的前端自动化测试框架 jest 里面的语法是完全一致的。所以上面的示例代码可以理解为 jest 的底层实现原理。
1、Jasmine
Jasmine是一个行为驱动的测试开发框架，用于对JavaScript代码进行测试。它不依赖其它任何JavaScript框架，也不需要DOM。它的语法简洁、明确，写测试非常容易。
2、Mocha
Mocha是一个功能丰富的JavaScript测试框架，既运行于Node.js环境中，也可以运行于浏览器环境中。Mocha以串行方式运行测试，能做出灵活而准确的报告，也能将测试中未捕捉的异常映射到正确的测试用例。
3、Chai
Chai是个支持BDD/TDD的库，可用于node和浏览器，可配合任何JavaScript测试框架使用。
4、QUnit
QUnit是个功能强大又易于使用的JavaScript单元测试框架。jQuery、jQueryUI和jQueyMobile项目都使用这个框架，它能测试普通的JavaScript代码。
5、Sinon
Sinon.JS为JavaScript提供了独立的spies、stubs和mocks[译者注：Spy、Stub和Mock都是测试专用名词，Stub常被翻译为桩，spies是Spy的复数形式，是一种可以监视方法、调用和参数的技术]。它不依赖任何东西，可以配合任何单元测试框架工作。
6、Karma
Karma是针对连通浏览器的一个框架无关测试运行器。每一个测试结果对应每个浏览器，它的测试和显示都是通过命令行暴露给开发者的，这样他们就可以看到浏览器测试的通过或失败。
7、Selenium
Selenium有一个简单的目标：就是自动化浏览器。它主要用于自动化测试web应用程序，但是只是很简单地考虑到了基于网络的管理任务。
8、WebdriverIO
WebdriverIO允许用户仅添加几行代码就可以控制浏览器或移动应用程序，使测试代码更简单、简洁、易读。集成的TestRunner同样允许你以同步的方式调用异步命令，这样你不需要关心如何处理Promise以避免竞态条件。此外，它取消了所有的繁琐的设置工作，并且会为您管理的Selenium会话。
9、Nightwatch
Nightwatch.js是一个易于使用的Node.js，它是为基于浏览器的app和网站设计的终端到终端（E2E）的测试方法。它使用强大的W3CWebDriverAPI，用于在DOM元素上执行命令和断言。
10、PhantomCSS
PhantomCSS获得CasperJS捕获的屏幕截图，并使用Resemble.js将其与基准图进行对比，以测试RGB像素差异。java课程http://www.kmbdqn.cn/发现PhantomCSS然后生成图像差异对比，用于帮助您找到原因。
11、PhantomFlow
PhantomFlow使用决策树提供UI测试方案。针对PhantomJS,CasperJS和PhantomCSS的NodeJS包装器——PhantomFlow能够流畅地在代码中描述用户流程，同时生成用于可视化的结构化树数据。
