作为一个前端开发者，我们会经常遇到bug, 如安全性的bug、逻辑性的bug、性能bug、展示bug等等。
当我们遇到复杂的业务场景，或者对老代码进行修补时，遇到bug更是正常现象，在编码过程中，我们可以借助Typescript/Flow/Eslint/StyleLint等一些插件尽可能的去降低bug出现的概率，提高代码规范。为了防止bug会被带到线上的情况，我们需要在项目上线之前，借助一些自动化测试工具，来再次避免bug的产生。
什么是前端自动化测试
我们来写一段测试的js代码，通过测试的js代码，来运行我们实际业务中的代码。预期它的执行结果，并把我们的预期结果与实际结果比较是否相等。如果相等，说明代码没有问题，如果不相等，就说明代码有问题，抛出异常。
通过单元测试的demo，来理解自动化测试原理：
demo目录：
|--demo
|--index.html
|--math.js
|--math.test.js
math.js
// 加法函数
function add (a, b) {
return a + b;
}
// 减法函数
function minus (a, b) {
// return a - b; // 正确写法
return a * b; // 错误写法（这里可以故意写错，方便测试）
}
math.test.js
// 最初版
// 通过设置预期值，判断预期值和实际结果是否相等，若不相等则抛出错误
var result = add(3, 7);
var expected = 10;
if(result !== 10) {
throw Error(`3 + 7 应该等于${expected}, 但是结果却是${result}`);
}
var result = minus(3, 3);
var expected = 0;
if(result !== 0) {
throw Error(` 3 - 3 应该等于 ${expected}, 但是结果却是 ${result}`);
}
index.html （在html页面里引入math.js）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>math</title>
<script src="math.js"></script>
</head>
<body>
</body>
</html>
在浏览器中打开index.html页面，由于页面引入了math.js脚本，此时页面中已经存在add和minus函数了。打开控制台，我们把编写的测试代码复制到控制台执行：
- 结果符合我们预期，3 - 3应该等于0，而我们的实际执行结果却是9，是因为我们的minus函数中的计算写成了 ‘*’ （乘法）导致。
上方代码确实解决了我们的问题，但是如果业务代码较多的情况下，我们不可能针对每个函数都要写一遍测试代码，所以我们想到了测试代码的封装：（math.test.js中代码改写内容如下）
// 封装测试函数--第一版
function expect (result) {
return {
toBe: function(actual) {
if(result !== actual) {
throw new Error('预期值和实际值不相等');
}
}
}
}
expect(add(3, 7)).toBe(10);
expect(minus(3, 3)).toBe(0);
刷新index.html页面，把上方代码复制到控制台执行：
依然能抛出异常，但是存在一个问题就是：所有的报错信息都为预期值和实际值不相等，错误信息定位不准确。接下来再次进行优化：（math.test.js中代码改写内容如下）
// 再次优化--第二版 （通过传入描述，明确哪里出现了问题）
function expect (result) {
return {
toBe: function(actual) {
if(result !== actual) {
throw new Error(`预期值和实际值不相等 预期${actual} 结果却是${result}`);
}
}
}
}
function test(desc, fn) {
try {
fn();
console.log(`${desc} 通过了测试`);
}catch(e) {
console.log(`${desc} 没有通过测试 ${e}`);
}
}
test('测试加法 3 + 7', () => {
expect(add(3, 7)).toBe(10);
})
test('测试加法 3 - 3', () => {
expect(minus(3, 3)).toBe(0);
})
刷新index.html页面，复制上方代码到控制台执行：
通过优化，我们的测试结果可以详细的被获取到。通过测试代码就可以对我们编写的业务代码在上线之前，提前做一些测试，这就是我们自动化测试工具的实现原理。
对自动化测试工具而言：这些测试并不用通过我们手工操作，而是通过一些写好的代码来帮我们运行的，这就叫做前端自动化测试。
目前主流的自动化测试工具
- Jest (从性能、功能、易用性方面都比较有优势)
- Jasmine
- Mocha+chai
Jest的优势：
- 速度快
- (比如：有两个模块a和b, 两个模块互不关联，当我们第一次运行测试时，a和b都会运行。当我只改了a模块的代码，再重新运行这些测试的时候，Jest会只帮我们运行a模块的测试用例，不再运行b的测试用例。这样一来，就会从而提高执行效率，提升测试速度)
- API使用起来较简单
- API数量较少，简单学习下即可上手使用
- 易配置
- 安装之后，通过配置文件简单配置即可使用
- 隔离性好
- 每个测试文件执行时均相互隔离，避免了各测试单元的相互影响
- 提供了监控模式（Jest23版本）
- 更灵活的去运行我们的测试用例
- IDE整合
- 和我们使用的编辑器做融合，可以方便的在编辑器里做自动化测试
- Snapshot快照功能
- 快速编写测试用例
- 多项目并行
- 覆盖率
- Mock丰富
- 支持的技术栈比较丰富：Babel、Typescript、Node.js、React、Anguler、Vue.js等
