前端自动化测试框架Jest 基础入门

lsekfe

　一、引言
　　前端这几年发展的非常迅速，我们的系统的功能正在变的越来越复杂，这对我们的前端工程化能力提出了更高的要求，听到工程化，大家的第一反应肯定是高质量的代码设计和高质量的代码实现。
　　但实际上，前端自动化测试也是前端工程化里面非常重要的一个环节。

　　二、Jest 基础入门
　　一个普通前端听到自动化测试，第一反应可能是：我工作这么多年也没写过测试，这个东西有用吗？
　　答：非常有用
　　如果你打开GitHub，去看一下流行的开源库或者框架的源码，你会发现，在这些源码里面，全部都包含了大量的自动化测试的代码。比如antd、lodash、再比如vue、react、echarts、redux等等……
　　开源的工具需要稳定性，而引入前端自动化测试为开源项目提供稳定性，是再好不过的选择了。

　　三、学习前提
　　阅读这篇文章需要以下知识储备：
　　·js、es6 基础语法
　　·node、npm 相关知识
　　·git 的相关操作
　　·react或者vue，至少了解一个
　　·状态管理工具，至少了解一个

　　四、背景及原理
　　首先在任意目录下创建一个math.js文件，假设这个文件是一个数学库，里面定义两个函数，分别是加法和减法：

1. // math.js
   
2. 
   
3. function add(a, b) {
   
4.   return a + b;
   
5. }
   
6. 
   
7. function minus(a, b) {
   
8.   return a - b;
   
9. }

复制代码

这时候我们可以在业务代码里去使用这个数学库。
　　但是，假如，上面的minus函数我们不小心写错了，把减法写成了乘法，如果直接在业务代码中使用这个方法，就会带来无法预期的bug。
　　所以这时候，我们就需要对math.js这个公共库进行自动化测试，确保没问题之后，再让业务组件去调用，这样就会保证不会出特别多的bug了。
　　我们可以这样做：
　　在该目录下创建一个math.test.js文件，然后写一点测试代码：

1. const result = add(3, 7);
   
2. const expect = 10;
   
3. 
   
4. if (result !== expect) {
   
5.   throw new Error(`3 + 7 应该等于${expect}，结果却是${result}`);
   
6. }

复制代码

1. const result = minus(3, 3);
   
2. const expect = 0;
   
3. 
   
4. if (result !== expect) {
   
5.   throw new Error(`3 - 3 应该等于${expect}，结果却是${result}`);
   
6. }

复制代码

这时候我们运行这段代码，会发现没有抛出任何异常，说明这两个测试用例都通过了。
　　这就是自动化测试最原始的雏形。
　　然后我们思考一个问题，如何将这堆代码进行简化，做成一个公用的函数，比如这样：

1. // 测试 3 + 3 是否等于 6
   
2. expect(add(3, 3)).toBe(6);
   
3. 
   
4. // 测试 3 - 3 是否等于 0
   
5. expect(minus(3, 3)).toBe(0);

复制代码

expect 方法实现：

1. function expect(result) {
   
2.   return {
   
3.     toBe(actual) {
   
4.       if (result !== actual) {
   
5.         throw new Error("预期值和实际值不相等");
   
6.       }
   
7.     },
   
8.   };
   
9. }

复制代码

　这时候我们运行这段代码，会发现没有抛出任何异常，说明这两个测试用例都通过了。
　　虽然实现了 expect 函数，但是报错的内容始终是一样的，我们不知道是具体哪个方法出现了问题，这时候我们就会想到，我们需要将这个 expect 方法进一步做改良，我们如果能在 expect 方法外部再包装一层，就可以多传递一些额外的内容，比如创造这样的写法：

1. test("测试加法 3 + 3", () => {
   
2.   expect(add(3, 3)).toBe(6);
   
3. });
   
4. 
   
5. test("测试减法 3 - 3", () => {
   
6.   expect(minus(3, 3)).toBe(0);
   
7. });

复制代码

这样封装之后，我们既能进行测试，又能得到测试的描述。
　　test 方法实现：

1. function test(desc, fn) {
   
2.   try {
   
3.     fn();
   
4.     console.log(`${desc} 通过测试`);
   
5.   } catch {
   
6.     console.log(`${desc} 没有通过测试`);
   
7.   }
   
8. }

复制代码

所以前端自动化测试到底是什么？
　　答：实际上就是写了一段其它的用来测试的js代码，通过测试代码去运行业务代码，判断实际结果是否满足预期结果，如果满足，就是没有问题，如果不满足，就是有问题。
　　上面实现的 expect 方法 和 test 方法 实际上和主流的前端自动化测试框架 jest 里面的语法是完全一致的。所以上面的示例代码可以理解为 jest 的底层实现原理。