imooc-02-Jest 前端自动化测试框架基础入门（重点复习，项目中遇到这个问题了）

1-1 什么是前端自动化测试

前端测试在开源库一定会存在，有了前端测试才能保证开源项目的稳定，例如 react和vuegithub仓库都会有一个test文件夹，这是用于项目测试的。

用处

例如一些旧项目的老代码bug多，重构耗时耗力而且不一定比旧的好，如果用自动化测试去解决会省很多事情。
例如每次增加或者新增代码都去写测试用例去测主流程通不通，如果没问题则可以直接上线。
所以相比重构，前端自动化测试简单得多。

主要涉及的知识点

收获

2-1 自动化测试背景及原理

一般解决上线前的bug都是利用自测或者测试同事，以及灰度发布这些，前端主要通过以下方法降低bug率提高代码质量。

示例

例如在add方法中本来运算符是+，但不小心改成了-，那么测试代码就可以帮我们检测到，可以检测新增或者修改的代码是否影响到现在的代码。

进一步简化测试代码（封装）

继续优化（可获得描述和结果）

以上基本都是jest和mocha的工作原理多写写

2-2 前端自动化测试框架 Jest

测试框架都差不多，会一个其他基本都一样

概念

mock模拟请求，不然在测试中请求会很慢。
多项目，node后台或react都可以同时测。
snapshot，例如测试一些不重要的，可以快速简单的编写测试用例去解决。

2-3 使用 Jest 修改自动化测试样例

必须以模块的方式导出测试

html中解决mudole报错问题

原理就是html一行一行执行，直到try这里就报错不执行了。
但我们测试环境不需要担心，因为是node环境。

2-4 Jest 的简单配置

初始化配置文件

npx jest --coverage

注意这个属性是修改文件夹名称的，也就是生成报告后方的文件夹。

测试esm的代码 （重点，项目中遇到这个问题了）

把方法export export function add（）{}
这里会报错。
因为jest在node环境下只认识comjs的语法（require）。

解决

用babel把esm转换成comjs就行了

配置

运行成功。

原理

执行jest后，jest会先看看有没有babel配置文件，有则执行按照babel转换的代码。

2-5 Jest 中的匹配器

比较简单，直接去看官网匹配器的api
https://www.jestjs.cn/docs/expect
取反的匹配器

范围


string和arr的

2-6 Jest 命令行工具的使用

f模式

f是继续测试没通过的，也就是测试100个方法中，只有一个没通过，那么按f进入这个模式，就只测试这个，不然的话100个方法都会重新跑一遍，没有必要。

o模式（需要git支持不然jest不知道那些文件被改了）

只测试当前改变相关的文件，这样就不用改变一个文件去测试所有文件了。

t模式

匹配指定方法名去测试。

2-7 异步代码的测试方法（1）

2-8 异步代码的测试方法（2）

2-9 Jest 中的钩子函数

2-10 钩子函数的作用域

2-11 Jest 中的 Mock（1）

2-12 Jest 中的 Mock（2）

2-13 章节小结