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

我会带着你远行 2022-11-18 01:18 161阅读 0赞

### 目录 ###

*  1-1 什么是前端自动化测试
 *   *  用处
     *  主要涉及的知识点
 *  2-1 自动化测试背景及原理
 *   *  示例
     *   *  进一步简化测试代码（封装）
         *  继续优化（可获得描述和结果）
 *  2-2 前端自动化测试框架 Jest
 *  2-3 使用 Jest 修改自动化测试样例
 *   *   *  html中解决mudole报错问题
 *  2-4 Jest 的简单配置
 *   *  测试esm的代码 （重点，项目中遇到这个问题了）
     *   *  解决
         *  原理
 *  2-5 Jest 中的匹配器
 *  2-6 Jest 命令行工具的使用
 *   *  f模式
     *  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 章节小结

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

前端测试在开源库一定会存在，有了前端测试才能保证开源项目的稳定，例如 react和vuegithub仓库都会有一个test文件夹，这是用于项目测试的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]

## 用处 ##

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

## 主要涉及的知识点 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 1]  
收获  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 2]

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

一般解决上线前的bug都是利用自测或者测试同事，以及灰度发布这些，前端主要通过以下方法降低bug率提高代码质量。  
![在这里插入图片描述][20210410232011281.png]

## 示例 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 3]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 4]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 5]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 6]  
以上基本都是jest和mocha的工作原理多写写  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 7]

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

测试框架都差不多，会一个其他基本都一样  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 8]  
概念  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 9]  
mock模拟请求，不然在测试中请求会很慢。  
多项目，node后台或react都可以同时测。  
snapshot，例如测试一些不重要的，可以快速简单的编写测试用例去解决。

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 10]  
必须以模块的方式导出测试  
![在这里插入图片描述][20210411120252919.png]

### html中解决mudole报错问题 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 11]  
原理就是html一行一行执行，直到try这里就报错不执行了。  
但我们测试环境不需要担心，因为是node环境。

# 2-4 Jest 的简单配置 #

初始化配置文件  
![在这里插入图片描述][20210411121039115.png]  
npx jest --coverage  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 12]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 13]  
注意这个属性是修改文件夹名称的，也就是生成报告后方的文件夹。  
![在这里插入图片描述][20210411121421590.png]

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

把方法export `export function add（）{}`![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 14]  
这里会报错。  
因为jest在node环境下只认识comjs的语法（require）。

### 解决 ###

用babel把esm转换成comjs就行了  
![在这里插入图片描述][20210411121825250.png]  
配置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 15]  
运行成功。

### 原理 ###

执行jest后，jest会先看看有没有babel配置文件，有则执行按照babel转换的代码。  
![在这里插入图片描述][2021041112204971.png]

# 2-5 Jest 中的匹配器 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 16]  
比较简单，直接去看官网匹配器的api  
https://www.jestjs.cn/docs/expect  
取反的匹配器  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 17]  
范围  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 18]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 19]  
string和arr的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 20]

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

## f模式 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 21]  
f是继续测试没通过的，也就是测试100个方法中，只有一个没通过，那么按f进入这个模式，就只测试这个，不然的话100个方法都会重新跑一遍，没有必要。

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

只测试当前改变相关的文件，这样就不用改变一个文件去测试所有文件了。  
![在这里插入图片描述][20210411125343234.png]

## t模式 ##

匹配指定方法名去测试。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 22]  
![在这里插入图片描述][20210411125718239.png]

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

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

# 2-9 Jest 中的钩子函数 #

# 2-10 钩子函数的作用域 #

# 2-11 Jest 中的 Mock（1） #

# 2-12 Jest 中的 Mock（2） #

# 2-13 章节小结 #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]: /images/20221022/0c2aa45211c0487d81e6ce315b5e4933.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/56301b10ff6f4ab8bc47109be5abc541.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 2]: /images/20221022/0ab5482e094c4c27a326f5e713e77dc5.png
[20210410232011281.png]: /images/20221022/02395565e41645279083fa594cd45c00.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 3]: /images/20221022/80cc8c514f284c5699c159dc5d3bdf27.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 4]: /images/20221022/646bd74ea5754231bdaa258fb87cc88b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 5]: /images/20221022/7d25ba2bf09643be9462e84a3b1a1b1f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 6]: /images/20221022/c7b86cd75e0e4a63a15266440ab1ac60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 7]: /images/20221022/e13d423cb15e47909dddefe45ebaa9c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 8]: /images/20221022/5f1aaef866a04674b8a5a06df8da956a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 9]: /images/20221022/6ae08e54217349e9a04ba7c0f223b42c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 10]: /images/20221022/4748282e454e43368fd5333af3500e9e.png
[20210411120252919.png]: /images/20221022/dc1d8e7c5ad449f8823ac786e13c4a60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 11]: /images/20221022/5aa84dbd536b4bbdac060ed68d77fd13.png
[20210411121039115.png]: /images/20221022/39360ac11d3a488080a0d6bd70f79b56.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/2021041112120520.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 13]: /images/20221022/6366a0adab78441e82598d72bbd66d73.png
[20210411121421590.png]: /images/20221022/d6ef14891c3d4efd80aeff89fefc04aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 14]: /images/20221022/1149539e7f344ff99c1f808e2683d6ba.png
[20210411121825250.png]: /images/20221022/10c87677c1ad488ca93d163814316ae2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 15]: /images/20221022/f1c277860b114b7aa5d04f43f5190272.png
[2021041112204971.png]: /images/20221022/c1c4f2cddcdd420e88b2a0d03f32ecf9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 16]: /images/20221022/8ae4a7443e4742efb7d20e3eea8264fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 17]: /images/20221022/b72f5c745afd4e88a50ab9c22c0a0a85.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 18]: /images/20221022/3b9691b50c574fa4ad5d75f1644058ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 19]: /images/20221022/81068275b0774a54be69a06aac984f08.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 20]: /images/20221022/526a4ab3b5d54fe389c00050a80c8755.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 21]: /images/20221022/dbc68dbc08b344fab2aaa7b370ab0c2e.png
[20210411125343234.png]: /images/20221022/3fe623d0d9b84e8ba1eaa37df84e9a3b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 22]: /images/20221022/f0a8fa8c6c654e42b2c724e175db199c.png
[20210411125718239.png]: /images/20221022/ed2653029b5142229c88616879a254ee.png