【实战】一、Jest 前端自动化测试框架基础入门（二） —— 前端要学的测试课 从Jest入门到TDD BDD双实战（二）

文章目录

    • 一、Jest 前端自动化测试框架基础入门
      • 5.Jest 中的匹配器
        • toBe 匹配器
        • toEqual匹配器
        • toBeNull匹配器
        • toBeUndefined匹配器和toBeDefined匹配器
        • toBeTruthy匹配器
        • toBeFalsy匹配器
        • 数字相关的匹配器
        • 字符串相关的匹配器
        • 数组相关的匹配器
        • 异常情况的匹配器
      • 6.Jest 命令行工具的使用
        • 模式 f
        • 模式 o
        • 模式 t
        • 模式 p

学习内容来源：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 前端自动化测试框架基础入门（一）

5.Jest 中的匹配器

什么是匹配器呢？在之前的案例中，toBe就是一个最基本的匹配器

toBe 匹配器

toBe 匹配器类似于 Object.is 或者 ===，精确相等。

test('测试toBe', () => {
  expect(10).toBe(10); // passed
});
 
 
test('测试toBe', () => {
  const a = {one: 1}
  expect(a).toBe( {one: 1});  // failed,因为两个对象的地址是不一样的
});
toEqual匹配器

测试对象的内容是否相等，不比较对象的地址，只关心对象的内容是否一致，递归检查对象或数组的每个字段。

test('测试toEqual', () => {
  const a = {one: 1}
  expect(a).toEqual( {one: 1});  // passed
});
toBeNull匹配器

测试某个变量是否为null，如果是则Passed，否则failed

test('测试toBeNull', () => {
  const a = null
  expect(a).toBeNull();  // passed
});
toBeUndefined匹配器和toBeDefined匹配器

测试某个变量是否未定义，如果是则Passed，否则failed

test('测试toBeUndefined', () => {
  const a = undefined;
  expect(a).toBeUndefined();  // passed
});
 
test('测试toBeUndefined', () => {
  const a = '';
  expect(a).toBeUndefined();  // failed
});
 
test('测试toBeUndefined', () => {
  const a = null;
  expect(a).toBeUndefined();  // failed
});
test('测试toBeDefined', () => {
  const a = null;
  expect(a).toBeDefined();  // passed
});
 
test('测试toBeDefined', () => {
  const a = undefined;
  expect(a).toBeDefined();  // failed
});
toBeTruthy匹配器

测试某个变量是否为真，如果是则Passed，否则failed

test('测试toBeTruthy', () => {
  const a = undefined;
  expect(a).toBeTruthy();  // undefined 视为false
});
 
test('测试toBeTruthy', () => {
  const a = null;
  expect(a).toBeTruthy();  // null视为false
});
 
test('测试toBeTruthy', () => {
  const a = 0;
  expect(a).toBeTruthy();  // 0 视为false
});
 
test('测试toBeTruthy', () => {
  const a = 1;
  expect(a).toBeTruthy();  // 1 视为true
});
toBeFalsy匹配器

测试某个变量是否为假，如果是则Passed，否则failed

test('测试toBeFalsy', () => {
  const a = 1;
  expect(a).toBeFalsy();  // failed，因为1 视为true
});
 
test('测试toBeFalsy', () => {
  const a = undefined;
  expect(a).toBeFalsy();  // passed，因为undefined 视为false
});
 
test('测试toBeFalsy', () => {
  const a = null;
  expect(a).toBeFalsy();  // passed，因为null 视为false
});
 
test('测试toBeFalsy', () => {
  const a = 0;
  expect(a).toBeFalsy();  // passed，因为0 视为false
});
test('测试toBeFalsy', () => {
  const a = 0;
  expect(a).not.toBeFalsy();  // failed，因为0 视为false,但是匹配器要的是真
});
数字相关的匹配器
test('测试toBeGreaterThan', () => {
  const count = 10;
  expect(count).toBeGreaterThan(9);  // passed，表示希望count这个变量的值比9大
});
 
test('测试toBeLessThan', () => {
  const count = 10;
  expect(count).toBeLessThan(9);  // failed，表示希望count这个变量的值比9小
});
 
test('测试toBeGreaterThanOrEqual', () => {
  const count = 9;
  expect(count).toBeGreaterThanOrEqual(9);   // passed，表示希望count这个变量的值大于等于9
});
 
test('测试toBeLessThanOrEqual', () => {
  const count = 9;
  expect(count).toBeLessThanOrEqual(9);   // passed，表示希望count这个变量的值小于等于9
});
 
 
test('测试toBeCloseTo', () => {
  const firstNumber = 0.1;
  const secondNumber = 0.2;
  expect(firstNumber + secondNumber).toEqual(0.3);  // 结果是failed，因为js计算浮点数的时
  expect(value).toBe(0.3);          //  这句会报错，因为浮点数有舍入误差候，有可能会溢出或者说不准确，这种情况下最好用toBeCloseTo
});
 
test('测试toBeCloseTo', () => {
  const firstNumber = 0.3;
  const secondNumber = 0.4;
  expect(firstNumber + secondNumber).toBeCloseTo(0.7);   // passed
});
字符串相关的匹配器
test('测试toMatch', () => {
  const str = 'www.baidu.com';
  expect(str).toMatch('baidu');   // passed, 表示str字符串中是否包含baidu这个字符串，是返回passed
  expect(str).toMatch(/baidu/); //passed，这里还可以写正则表达式
});
数组相关的匹配器
test('测试toContain', () => {
  const arr = ['dee', 'lee'];
  expect(arr).toContain('dee');   // passed, 表示arr数组中是否包含dee这个字符串元素，是返回passed
});
 
test('测试toContain', () => {
  const arr = ['dee', 'lee'];
  const data = new Set(arr);
  expect(data).toContain('dee');   // passed, 表示arr数组中是否包含dee这个字符串元素，是返回passed
});
异常情况的匹配器
const throwNewErrorFunc =  () => {
  throw new Error('this is a new error');
}
 
test('测试toThrow', () => {
  expect(throwNewErrorFunc).toThrow();   // passed, 表示希望throwNewErrorFunc这个方法运行的时候能够抛出一个异常
});
 
test('测试toThrow', () => {
  expect(throwNewErrorFunc).not.toThrow();   // failed, 表示希望throwNewErrorFunc这个方法运行的时候不能够抛出异常
});
 
test('测试toThrow', () => {
  expect(throwNewErrorFunc).toThrow('this is a new error');   // passed, 表示希望throwNewErrorFunc这个方法运行的时候能够抛出一个异常，并且内容是'this is a new error'
  expect(throwNewErrorFunc).toThrow(/this is a new error/); // 也可以是正则表达式
});

更多的匹配器可以查看Jest官网：

  • 匹配器的使用 · Jest
  • Expect 断言 · Jest

6.Jest 命令行工具的使用

Ctrl + Shift + P 打开 vscode 的命令窗口，输入

install code command

会显示如下

在这里插入图片描述

直接点击，code 命令会添加到系统 path 中

这样在随便一个命令行窗口输入 code 就可以打开 vscode，输入 code filePath/directoryPath 即可在 vscode 中打开对应文件或目录

目前在 windows 中安装 vscode 过程中该命令会自动添加到 path 中

接下来这节内容便是和这命令行有关啦

运行 npm run test 之后，jest 会运行所有测试用例，最后会显示这样一句：

Watch Usage: Press w to show more.

输入 w 后，显示：

Watch Usage
 › Press f to run only failed tests.
 › Press o to only run tests related to changed files.     
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press q to quit watch mode.
 › Press Enter to trigger a test run.
模式 f

在修改测试用例所在文件后只运行上一次失败了的测试用例，其他跳过（skip）

PS：若是上一次运行成功，后面再改动也不会自动运行

模式 o

只运行与修改文件相关联的测试用例

需要借助 git 来获取文件变动记录，否则会报错

  • 安装 git
  • 项目根目录运行 git init 初始化一个 git 仓库
  • 运行 git add . 将项目下的所有文件添加到 git 仓库
  • 运行 git commit -m 'version 1' 将文件变化提交并做备注（到了这一步就已经满足 o 模式的运行条件啦）
  • 运行 git push 将已提交的文件变动推送到线上 git 仓库

之前配置 package.json："test": "jest --watchAll" 默认会进入 a 模式，配置为 --watch 则会默认进入 o 模式：

{
  ...
  "scripts": {
    "test": "jest --watch"
  },
  ...
}
模式 t

通过正则表达式过滤，只运行通过过滤的测试用例

模式 p

类似模式 t， 通过正则表达式过滤，只运行通过过滤的测试文件

q : 退出监听模式

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

C++【AVL树】

C++【AVL树】

目录 1.AVL树（高度平衡搜索二叉树）定义 1.1平衡因子（Balance Factor简写成bf） 1.2avl树的定义 2.AVL树插入的基本操作 2.1逻辑抽象图 2.2插入流程 2.3左单旋 2.4右单旋 2.5右左双旋 2.6左右双旋 3.AVL树的检验技巧 3.1…
阅读更多...
AI：127-基于卷积神经网络的交通拥堵预测

AI：127-基于卷积神经网络的交通拥堵预测

🚀点击这里跳转到本专栏，可查阅专栏顶置最新的指南宝典~ 🎉🎊🎉 你的技术旅程将在这里启航！ 从基础到实践，深入学习。无论你是初学者还是经验丰富的老手，对于本专栏案例和项目实践都有参考学习意义。 ✨✨✨ 每一个案例都附带有在本地跑过的关键代码，详细讲解供…
阅读更多...
2024-02-13 Unity 编辑器开发之编辑器拓展4 —— EditorGUIUtility

2024-02-13 Unity 编辑器开发之编辑器拓展4 —— EditorGUIUtility

文章目录 1 EditorGUIUtility 介绍2 加载资源2.1 Eidtor Default Resources2.2 不存在返回 null2.3 不存在则报错2.4 代码示例 3 搜索框查询、对象选中提示3.1 ShowObjectPicker3.2 PingObject3.3 代码示例 4 窗口事件传递、坐标转换4.1 CommandEvent4.2 GUIPoint 和 ScreenPoi…
阅读更多...
Excel模板2：进度条甘特图

Excel模板2：进度条甘特图

Excel模板2：进度条甘特图 ‍ 今天复刻B站up【名字叫麦兜的狗狗】的甘特图：还在买Excel模板吗？自己做漂亮简洁的甘特图吧！_哔哩哔哩_bilibili 阿里网盘永久分享：https://www.alipan.com/s/cXhq1PNJfdm 当前效果&…
阅读更多...
片上网络NoC（5）——非直连拓扑

片上网络NoC（5）——非直连拓扑

目录 一、前言 二、概念阐述 三、交叉开关 四、蝶形网络 五、clos网络 六、fat tree网络 6.1 clos网络的折叠过程 七、总结 一、前言 本文继续介绍片上网络的拓扑，在之前的文章中，我们已经介绍了片上网络的拓扑指标和直连拓扑的相关内容&#xf…
阅读更多...
【新年第一辑 | TortoiseGit常见用法】

【新年第一辑 | TortoiseGit常见用法】

TortoiseGit常见用法 概述常用操作建立仓库提交代码更新代码回滚版本添加忽略文件设置比较工具🩸 解决冲突 主页传送门 ： 📀 传送 概述 TortoiseGit是一个Windows平台上的Git客户端工具，它提供了一个直观和易于使用的图形用户界面…
阅读更多...
面向对象2：继承

面向对象2：继承

目录 2.1继承 2.2 继承的好处 2.3 权限修饰符 2.4 单继承、Object 2.5 方法重写 2.6 子类中访问成员的特点 2.7 子类中访问构造器的特点 面向对象1：静态 2.1继承 向对象编程之所以能够能够被广大开发者认可，有一个非常重要的原因，是…
阅读更多...
springboot184基于springboot的校园网上店铺的设计与实现

springboot184基于springboot的校园网上店铺的设计与实现

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的 适用于计算机类毕业设计，课程设计参考与学习用途。仅供学习参考， 不得用于商业或者非法用途，否则，一切后果请用户自负。 看运行截图看 第五章 第四章 获取资料方式 **项…
阅读更多...
如何把华为手机上的数据转移到荣耀手机上？

如何把华为手机上的数据转移到荣耀手机上？

方法/步骤 点击并进入华为手机（旧手机）的【手机克隆】应用，选择【这是旧设备】； 点击并进入荣耀手机（新手机）的【换机克隆】应用，选择【这是新设备】； 荣耀手机（新…
阅读更多...
LeetCode-第70题-爬楼梯

LeetCode-第70题-爬楼梯

1.题目描述 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢？ 2.样例描述 3.思路描述 画图就可以发现规律，典型的斐波那契额数列 4.代码展示 class Solution {public int climbStair…
阅读更多...
webgis后端安卓系统部署攻略，超详细Termux攻略

webgis后端安卓系统部署攻略，超详细Termux攻略

目录 前言 一、将后端项目编译ARM64 二、安卓手机安装termux 1.更换为国内源 2.安装ssh远程访问 3.安装文件远程访问 三、安装postgis数据库 1.安装数据库 2.数据库配置 3.数据导入 四、后端项目部署 五、自启动设置 总结 前言 因为之前一直做的H5APP开发&#xf…
阅读更多...
机器学习、深度学习、强化学习、迁移学习的关联与区别

机器学习、深度学习、强化学习、迁移学习的关联与区别

Hi，大家好，我是半亩花海。本文主要了解并初步探究机器学习、深度学习、强化学习、迁移学习的关系与区别，通过清晰直观的关系图展现出四种“学习”之间的关系。虽然这四种“学习”方法在理论和应用上存在着一定的区别，但它们之间也…
阅读更多...
2024幻兽帕鲁服务器创建教程_阿里PK腾讯超简单

2024幻兽帕鲁服务器创建教程_阿里PK腾讯超简单

幻兽帕鲁官方服务器不稳定？自己搭建幻兽帕鲁服务器，低延迟、稳定不卡，目前阿里云和腾讯云均推出幻兽帕鲁专用服务器，腾讯云直接提供幻兽帕鲁镜像系统，阿里云通过计算巢服务，均可以一键部署，鼠标…
阅读更多...
深度学习-吴恩达L1W2作业

深度学习-吴恩达L1W2作业

作业1：吴恩达《深度学习》L1W2作业1 - Heywhale.com 作业2：吴恩达《深度学习》L1W2作业2 - Heywhale.com 作业1 你需要记住的内容： -np.exp（x）适用于任何np.array x并将指数函数应用于每个坐标 -sigmoid函数及其梯度…
阅读更多...
【编程题】合法括号的判断

【编程题】合法括号的判断

合法括号的判断—难度&#xff1a;⭐⭐ 我的答案&#xff1a;错误 class Parenthesis {public:bool chkParenthesis(string A, int n) { // write code hereif (n % 2 ! 0) {return false;}stack<char> st;auto ch A.begin(); // cout<<"hello?"<&l…
阅读更多...
react渲染流程是怎样的

react渲染流程是怎样的

整体流程&#xff1a; react的核心可以用uifn(state)来表示&#xff0c;更详细可以用&#xff1a; const state reconcile(update); const UI commit(state);上面的fn可以分为如下一个部分&#xff1a; Scheduler&#xff08;调度器&#xff09;&#xff1a; 调度任务&…
阅读更多...
Netty应用(十一) 之 ChannelHandler Channel生命周期 @Sharable 心跳

Netty应用(十一) 之 ChannelHandler Channel生命周期 @Sharable 心跳

目录 27.ChannelHandler总结 27.1 一些概念 27.2 到底有几个handler&#xff1f;真的只有你想的那样吗&#xff1f; 27.3 channel.writeAndFlush 和 ctx.writeAndFlush的区别 27.4 ByteBuf的创建和销毁 27.5 Channel的生命周期方法 27.5.1 handlerAdded 27.5.2 channelR…
阅读更多...
VS Code主题设置（美化VS Code）

VS Code主题设置（美化VS Code）

主题的具体效果放在了文章末尾&#xff0c;这篇文章后续也会进行更新 目录 切换整体主题&#xff08;整体主题&#xff09; 1.VS Code内置主题&#xff08;快捷键&#xff1a;CtrlK &#xff0c;CtrlT&#xff09; 1.VS Code左上角点击文件 2.选择首选项-->主题-->颜色…
阅读更多...
理解JAVA EE设计模式

理解JAVA EE设计模式

理解JAVA EE设计模式 在Web应用程序的设计和开发阶段，开发人员在开发类似的项目时可能会遇到相似的问题。每名开发人员可能会遇到的问题找出不同或相似的解决方案。但是，这导致一些时间和精力浪费在为相似的问题寻找解决方案上。因此，要啊节省时间和精力，需要记录常见问题…
阅读更多...
【Pyhton4Delpi】学习笔记（二）安装验证篇

【Pyhton4Delpi】学习笔记（二）安装验证篇

D12环境下安装P4D。 一、下载 Python4Delphi&#xff08;下称P4D&#xff09;: 下载地址&#xff1a;https://github.com/pyscripter/python4delphi 下载或者克隆P4D到指定的目录&#xff0c;例如&#xff1a;MDS_New&#xff0c;目录结构如下&#xff0c;P4D就是克隆下来的…
阅读更多...
最新文章

Copyright @ 2022~2023