【实战】二、Jest难点进阶(三) —— 前端要学的测试课 从Jest入门到TDD BDD双实战(七)

文章目录

    • 一、Jest 前端自动化测试框架基础入门
    • 二、Jest难点进阶
      • 3.mock timers


学习内容来源:Jest入门到TDD/BDD双实战_前端要学的测试课


相对原教程,我在学习开始时(2023.08)采用的是当前最新版本:

版本
@babel/core^7.16.0
@pmmmwh/react-refresh-webpack-plugin^0.5.3
@svgr/webpack^5.5.0
@testing-library/jest-dom^5.17.0
@testing-library/react^13.4.0
@testing-library/user-event^13.5.0
babel-jest^27.4.2
babel-loader^8.2.3
babel-plugin-named-asset-import^0.3.8
babel-preset-react-app^10.0.1
bfj^7.0.2
browserslist^4.18.1
camelcase^6.2.1
case-sensitive-paths-webpack-plugin^2.4.0
css-loader^6.5.1
css-minimizer-webpack-plugin^3.2.0
dotenv^10.0.0
dotenv-expand^5.1.0
eslint^8.3.0
eslint-config-react-app^7.0.1
eslint-webpack-plugin^3.1.1
file-loader^6.2.0
fs-extra^10.0.0
html-webpack-plugin^5.5.0
identity-obj-proxy^3.0.0
jest^27.4.3
jest-enzyme^7.1.2
jest-resolve^27.4.2
jest-watch-typeahead^1.0.0
mini-css-extract-plugin^2.4.5
postcss^8.4.4
postcss-flexbugs-fixes^5.0.2
postcss-loader^6.2.1
postcss-normalize^10.0.1
postcss-preset-env^7.0.1
prompts^2.4.2
react^18.2.0
react-app-polyfill^3.0.0
react-dev-utils^12.0.1
react-dom^18.2.0
react-refresh^0.11.0
resolve^1.20.0
resolve-url-loader^4.0.0
sass-loader^12.3.0
semver^7.3.5
source-map-loader^3.0.0
style-loader^3.3.1
tailwindcss^3.0.2
terser-webpack-plugin^5.2.5
web-vitals^2.1.4
webpack^5.64.4
webpack-dev-server^4.6.0
webpack-manifest-plugin^4.0.2
workbox-webpack-plugin^6.4.1"

具体配置、操作和内容会有差异,“坑”也会有所不同。。。


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

  • 一、Jest 前端自动化测试框架基础入门(一)

  • 一、Jest 前端自动化测试框架基础入门(二)

  • 一、Jest 前端自动化测试框架基础入门(三)

  • 一、Jest 前端自动化测试框架基础入门(四)

二、Jest难点进阶

  • 二、Jest难点进阶(一)
  • 二、Jest难点进阶(二)

3.mock timers

接下来学习一下对定时器的模拟

新建 Jest\src\lesson11\index.js

export default (cbk) => {setTimeout(() => {cbk()}, 3000)
}

新建 Jest\src\lesson11_tests_\index.test.js

import timer from "../index";test('测试 timer', () => {timer(() => {expect(2).toEqual(1)})
})

执行测试用例,竟然成功了。。由于timer是一个异步函数,jest不会等cbk函数执行完毕,在cbk挂起期间没有明显问题直接就会返回成功

给它加点料,编辑 Jest\src\lesson11_tests_\index.test.js

import timer from "../index";test('测试 timer', (done) => {timer(() => {expect(2).toEqual(1)done()})
})

执行测试用例报错,这才对嘛(改为 expect(2).toEqual(1) 后会成功)

使用了done(),这时候测试用例就会等done()执行完毕出结果,但是若时间设置较长,这样的等待显然是不合理的

接下来进入正题,模拟 timer

编辑 Jest\src\lesson11_tests_\index.test.js(模拟 timer 后换一种测试方式)

import timer from "../index";jest.useFakeTimers()test('测试 timer', () => {const fn = jest.fn();timer(fn);expect(fn).toHaveBeenCalledTimes(1)
})

使用 jest.useFakeTimers() 模拟 timer

执行测试用例报错,信息如下(确实模拟了timer,但是没有执行)

Expected number of calls: 1
Received number of calls: 0

编辑 Jest\src\lesson11_tests_\index.test.js(执行模拟的 timer

import timer from "../index";jest.useFakeTimers()test('测试 timer', () => {const fn = jest.fn();timer(fn);jest.runAllTimers()expect(fn).toHaveBeenCalledTimes(1)
})

执行测试用例成功!

接下来看看其他相关用法

编辑 Jest\src\lesson11\index.js(定时器里面再放入一层,并执行 cbk 函数)

export default (cbk) => {setTimeout(() => {cbk()setTimeout(() => {cbk()}, 3000)}, 3000)
}

这时再运行之前的测试用例就通不过了,因为 runAllTimers 后,cbk 执行了两次

如何测试时只运行当前已触发的定时器呢?(运行代码时,只有最外层定时器加入队列,即触发)

编辑 Jest\src\lesson11_tests_\index.test.js(runAllTimers 改为 runOnlyPendingTimers

import timer from "../index";jest.useFakeTimers()test('测试 timer', () => {const fn = jest.fn();timer(fn);jest.runOnlyPendingTimers()expect(fn).toHaveBeenCalledTimes(1)
})

执行测试用例成功!

很显然只有这两个在日常测试是不够用的,接下来尝试另一个函数

编辑 Jest\src\lesson11_tests_\index.test.js(runOnlyPendingTimers 改为 advanceTimersByTime

import timer from "../index";jest.useFakeTimers()test('测试 timer', () => {const fn = jest.fn();timer(fn);jest.advanceTimersByTime(3000)expect(fn).toHaveBeenCalledTimes(1)
})

执行测试用例成功!

advanceTimersByTime 相当于是时间快进器,测试用例中在 3000 这个节点 fn 执行第一次,在 6000 这个节点 fn 执行第二次,因此在另外几个时间段的执行结果便呼之欲出了

当然 advanceTimersByTime 可以使用多次,不过需要注意的是,下一次使用是在上一次”快进“的基础上再次”快进“的

编辑 Jest\src\lesson11_tests_\index.test.js(多次使用advanceTimersByTime

import timer from "../index";jest.useFakeTimers()test('测试 timer', () => {const fn = jest.fn();timer(fn);jest.advanceTimersByTime(3000)expect(fn).toHaveBeenCalledTimes(1)jest.advanceTimersByTime(3000)expect(fn).toHaveBeenCalledTimes(2)
})

执行测试用例成功!

但是多个测试用例之间 advanceTimersByTime 会有相互影响

编辑 Jest\src\lesson11\index.js(在之前定时器里面再放入一层的基础上,再放入一层,并再执行 cbk 函数,一共三层,最终执行三次)

export default (cbk) => {setTimeout(() => {cbk()setTimeout(() => {cbk()setTimeout(() => {cbk()}, 3000)}, 3000)}, 3000)
}

编辑 Jest\src\lesson11_tests_\index.test.js(在多个测试用例中使用advanceTimersByTime

import timer from "../index";jest.useFakeTimers()describe('测试 timer', () => {const fn = jest.fn();timer(fn);test('第一次测试 timer', () => {jest.advanceTimersByTime(3000)expect(fn).toHaveBeenCalledTimes(1)})test('第二次测试 timer', () => {jest.advanceTimersByTime(3000)expect(fn).toHaveBeenCalledTimes(1)})test('第三次测试 timer', () => {jest.advanceTimersByTime(3000)expect(fn).toHaveBeenCalledTimes(1)})
})

执行测试用例成功!(0~3 3~6 6~9 各执行一次)

调整参数:

import timer from "../index";jest.useFakeTimers()describe('测试 timer', () => {const fn = jest.fn();timer(fn);test('第一次测试 timer', () => {jest.advanceTimersByTime(2000)expect(fn).toHaveBeenCalledTimes(0)})test('第二次测试 timer', () => {jest.advanceTimersByTime(4000)expect(fn).toHaveBeenCalledTimes(2)})test('第三次测试 timer', () => {jest.advanceTimersByTime(3000)expect(fn).toHaveBeenCalledTimes(1)})
})

执行测试用例成功!(0~2 没有执行 2~6 执行两次 6~9 执行一次)

调整参数:

import timer from "../index";jest.useFakeTimers()describe('测试 timer', () => {const fn = jest.fn();timer(fn);test('第一次测试 timer', () => {jest.advanceTimersByTime(2000)expect(fn).toHaveBeenCalledTimes(0)})test('第二次测试 timer', () => {jest.advanceTimersByTime(2000)expect(fn).toHaveBeenCalledTimes(1)})test('第三次测试 timer', () => {jest.advanceTimersByTime(5000)expect(fn).toHaveBeenCalledTimes(2)})
})

执行测试用例成功!(0~1 没有执行 1~2 没有执行 2~9 执行三次)

从这三次测试调整中可以发现,toHaveBeenCalledTimes 统计的是每个测试用例里的 fn 调用次数,而 advanceTimersByTime 之间从前往后是相互叠加的

若是想要隔离这种影响,可以使用钩子函数

编辑 Jest\src\lesson11_tests_\index.test.js

import timer from "../index";beforeEach(() => {jest.useFakeTimers();
})
describe('测试 timer', () => {test('第一次测试 timer', () => {const fn = jest.fn();timer(fn);jest.advanceTimersByTime(2000)expect(fn).toHaveBeenCalledTimes(0)})test('第二次测试 timer', () => {const fn = jest.fn();timer(fn);jest.advanceTimersByTime(2000)expect(fn).toHaveBeenCalledTimes(1)})test('第三次测试 timer', () => {const fn = jest.fn();timer(fn);jest.advanceTimersByTime(5000)expect(fn).toHaveBeenCalledTimes(2)})
})

执行测试用例,只有第一个成功!成功隔离(这里虚晃一枪,请看到最后)

注意使用了钩子函数之后,只有在测试用例中调用的定时器才是经过mock的!

来个烧脑的,编辑 Jest\src\lesson11_tests_\index.test.js(将 fn 的定义放在外边)

import timer from "../index";beforeEach(() => {jest.useFakeTimers();
})
describe('测试 timer', () => {const fn = jest.fn();test('第一次测试 timer', () => {timer(fn);jest.advanceTimersByTime(2000)expect(fn).toHaveBeenCalledTimes(0)})test('第二次测试 timer', () => {timer(fn);jest.advanceTimersByTime(2000)expect(fn).toHaveBeenCalledTimes(1)})test('第三次测试 timer', () => {timer(fn);jest.advanceTimersByTime(5000)expect(fn).toHaveBeenCalledTimes(2)})
})

执行测试用例,前两个成功!最后一个:

Expected number of calls: 2
Received number of calls: 5

执行过程:


0~2
第一个函数执行,第一个定时器触发但没有执行完 0

2~4
第一个函数执行,第一个定时器执行完,第二个定时器触发但没有执行完 1
第二个函数执行,,第一个定时器触发但没有执行完 0

4~9
第一个函数执行,第二个和第三个定时器执行完 2
第二个函数执行,第一个和第二个定时器执行完 2
第三个函数执行,第一个定时器执行完 1

并没有视频课程中所说的隔离。。。但是功能理解了,over


本文仅作记录, 实战要点待后续专文总结,敬请期待。。。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/688145.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何引导llm为自己写prompt生成剧本

如何使用写prompt让你自己生一个狗血修仙穿越短剧,且短剧有趣生动让人流连忘返 好的,我会尝试编写一个狗血修仙穿越短剧的prompt,以激发你的想象力,让你创作出一个既有趣又生动的短剧。以下是我的prompt: 标题&#x…

数组相关题目总结

33.搜索旋转排序数组 这题如果数组不进行循环平移那用二分做就很简单,平移后其实也可以用二分做,重点在于二分里面如何check。平移后数组可以分成两段各自升序的数组,并且第一段值大于第二段值。check的时候分两种情况,一种是tar…

简洁高效的短链接:优化互联网体验

title: 简洁高效的短链接:优化互联网体验 date: 2024/2/18 13:24:24 updated: 2024/2/18 13:24:24 tags: 短链接长网址缩短美观简洁分享优化点击率提升数据统计用户体验 在互联网时代,我们经常遇到需要分享长网址的情况。长网址不仅不美观,而…

【二维比较函数】有n个区间,对于每个区间,求该区间与其他区间的相交的最小值

题目 #include <bits/stdc++.h> using namespace std; #define int long long #define pb push_back #define fi first #define se second #define lson p << 1 #define rson p << 1 | 1 const int maxn = 1e6 + 5, inf = 1e18 + 5, maxm = 4e4 + 5, mod = …

Mysql开启bin-log日志

目录 一、安装配置 二、mysqlbinlog命令 一、安装配置 yum -y install mariadb mariadb-server#安装mysql数据库#默认配置文件/etc/my.cnfvim /etc/my.cnflog-binmariadb-bin #开启二进制日志 systemctl restart mariadb#会在/car/lib/mysql/产生二进制日志文件&#xff0…

返乡创业者:直播电商-连州农产品的新舞台

摘要&#xff1a;在广东省连州市&#xff0c;“连州年味直播争霸赛”为返乡创业者提供了展示才华的平台&#xff0c;将农特产品的故事传达给全国消费者。返乡创业者通过直播电商模式&#xff0c;挑战旧有销售渠道的局限性&#xff0c;探索农产品从田间到餐桌的新路径。 正文&a…

防火墙(三) -----------------关于iptables规则的保存

一、关于iptables规则的保存 之前写的iptables的设置&#xff0c;但是都是临时生效的&#xff0c;一旦电脑重启&#xff0c;那么就会失效&#xff0c;如何永久保存&#xff0c;需要借助iptables-save命令&#xff0c;开机生效需要借助iptables-restore命令&#xff0c;并写入规…

P1106 删数问题题解

题目 键盘输入一个高精度的正整数N&#xff08;不超过250位&#xff09;&#xff0c;去掉其中任意k个数字后剩下的数字按原左右次序将组成一个新的非负整数。编程对给定的N和k&#xff0c;寻找一种方案使得剩下的数字组成的新数最小。 输入输出格式 输入格式 输入两行正整数…

图像处理与计算机视觉算法

图像处理与计算机视觉算法是实现对图像和视频内容分析、理解和操作的一系列技术。这些算法可以分为多个类别,包括但不限于以下几个主要方面: 预处理: 像素操作:灰度化、二值化、直方图均衡化等,用于改善图像的对比度和亮度分布。去噪:高斯滤波、中值滤波、自适应滤波等,…

【C++搜索】DFS:拆分自然数

题目描述 “天下熙熙&#xff0c;皆为利来&#xff1b;天下攘攘&#xff0c;皆为利往”&#xff0c;监狱里的暗势力划分地盘的目的无非是为了获取利益&#xff0c;他们分配利益的方式是基于这样一个准则&#xff1a;设总利益为自然数&#xff2e;&#xff0c;则任何一个大于1的…

AB测试最小样本量

1.AB实验过程 常见的AB实验过程&#xff0c;分流-->实验-->数据分析-->决策&#xff1a;分流&#xff1a;用户被随机均匀的分为不同的组实验&#xff1a;同一组内的用户在实验期间使用相同的策略&#xff0c;不同组的用户使用相同或不同的策略。数据收集&#xff1a;…

HOOPS发布全新CAD文件支持以及改进的API性能版本!增加了对Navisworks和C#支持!

全球工程软件开发工具包的领先提供商Tech Soft 3D今天宣布推出HOOPS Exchange 2024&#xff08;支持30多种文件格式的领先CAD数据转换SDK&#xff09;和HOOPS Publish 2024&#xff0c;用于发布交互式3D PDF、3D HTML和3D CAD数据的领先工具包。 HOOPS Exchange现在支持Navisw…

C++day6

模拟跟随导演去动物园&#xff1a; #include <iostream>using namespace std; class Animal { private:string name; public:Animal(){}Animal(string name):name(name){}virtual void perform(){cout << name << "为我们讲解,说&#xff1a;" &…

php 数组函数

php 数组函数 1. 常用的php数组函数 1. 常用的php数组函数 array_pop() 删除数组中最后一个元素 array_push() 将一个或多个元素插入到数组的末尾 array_keys <?php $arr array("刘岩" > 30, "范冰冰" > 31, "娜扎" > 31);$…

~汉诺塔~(C语言)~

引言 汉诺塔&#xff08;Hanoi Tower&#xff09;&#xff0c;又称河内塔&#xff0c;源于印度一个古老传说。大梵天创造世界的时候做了三根金刚石柱子&#xff0c;在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘。大梵天命令婆罗门把圆盘从上面开始按大小顺序重新摆放在…

npm run serve启动报错npm ERR! Missing script: “serve“

启动项目的时候用npm run serve发现报了以下的错误 解决方法&#xff1a; 1.一般情况下&#xff0c;这个问题是因为package.json文件里面确实没有 这里没有可能因为你的脚手架版本比较低&#xff0c;如果不想换&#xff0c;可以用 这里面有的 npm run dev去启动也是可以的 n…

精工电联:定制精工线缆,赋能科技互联---致力于为客户提供卓越的连接线缆和连接器产品

精工电联 “定制精工线缆 &#xff0c;赋能科技互联”&#xff0c;精工电联致力于为高科技产业提供全方位、多维度的集成线缆解决方案。凭借深厚的研发实力和丰富的行业经验&#xff0c;精工电联已经成功地在工控设备、医疗设备、人工智能、新能源领域、轨道交通和超声波设备等…

Vue3之ElementPlus中Table选中数据的获取与清空方法

Vue3之ElementPlus中Table选中数据的获取与清空方法 文章目录 Vue3之ElementPlus中Table选中数据的获取与清空方法1. 点击按钮获取与清空选中表格的数据1. 用到ElementPlus中Table的两个方法2. 业务场景3. 操作案例 1. 点击按钮获取与清空选中表格的数据 1. 用到ElementPlus中…

分享一个学英语的网站

名字叫&#xff1a;公益大米网​​​​​​​ Freerice 这个网站是以做题的形式来记忆单词&#xff0c;题干是一个单词&#xff0c;给出4个选项&#xff0c;需要选出其中最接近题干单词的选项。 答对可以获得10粒大米&#xff0c;网站的创办者负责捐赠。如图 触发某些条件&a…

Web APIs - 06

正则表达式 正则表达式是一种字符串匹配的规则 使用场景&#xff1a; 例如验证表单&#xff1a;手机号表单要求用户只能输入11位的数字 (匹配)过滤掉页面内容中的一些敏感词(替换)&#xff0c;或从字符串中获取我们想要的特定部分(提取)等 正则基本使用 定义规则 const reg…