【实战】一、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 = nullexpect(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这个字符串,是返回passedexpect(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 : 退出监听模式


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

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

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

相关文章

Codeforces Round 925 (Div. 3) D. Divisible Pairs (Java)

Codeforces Round 925 (Div. 3) D. Divisible Pairs (Java) 比赛链接:Codeforces Round 925 (Div. 3) D题传送门:D.Divisible Pairs 题目:D.Divisible Pairs 题目描述 输出格式 For each test case, output a single integer — the num…

MATLAB | 情人节画个花瓣venn图?

之前七夕节情人节各种花,相册,爱心啥的都快画够了,今年画个花瓣韦恩图? 花瓣上的数字是仅属于该类的样本数,而中心的数字是属于每一类的样本数 教程部分 0 数据准备 % 给组起名t1 t2 t3...t15 setName compose(t%d,…

区块链互操作协议

1. 引言 Alexei Zamyatin等人2019年论文 SoK: Communication Across Distributed Ledgers。 参考资料 [1] 2019年论文 SoK: Communication Across Distributed Ledgers [2] A list of blockchain-related SoK papers [3] 2021年视频 FC21: SoK: Communica…

Java 基于 SpringBoot 的大药房管理系统

博主介绍:✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇…

QT:实现图片选择器

一、效果图 二、用到的类 qApp:可以快速获取到项目目录位置。 QSettings :编写config文件,记录上次打开图片的位置,下次打开图片会从上次的位置查找图片。 QPixmap:用于图片的缩放,防止图片过小&#xff0…

【电路笔记】-并联电感

并联电感 文章目录 并联电感1、概述2、并联电感示例13、互耦并联电感器4、并联电感示例25、并联电感示例36、总结当电感器的两个端子分别连接到另一个或多个电感器的每个端子时,电感器被称为并联连接在一起。 1、概述 所有并联电感器上的压降将是相同的。 然后,并联的电感器…

JavaScript中有哪些不同的数据类型

在 JavaScript 中,数据类型是一种用来表示数据的分类,它决定了我们可以对这个数据类型执行哪些操作。在 JavaScript 中有以下几种不同的数据类型: 基本数据类型 字符串 (String):表示一组字符,可以使用引号&#xff08…

【python学习篇1】python基本语法

一、第一个python程序 在控制台上面输出“你好 python”。 在venv目录下面,新建一个Main1.python的文件夹。 然后在文件当中使用print函数输出一句命令即可。 然后,在Main.py下面,右键一下,运行Main1.py:即可看到下…

java客运管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java客运管理系统是一套完善的java web信息管理系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发,数据库为Mysql5.0&#…

比特币突然大涨

作者:秦晋 2月9日,除夕夜,比特币突然大涨,最高涨至48219美元,涨幅超6%。据CNBC报道,本周比特币已经上涨10.76%,创下自12月8日以来的最佳的一周。本周ETH上涨8.46%,成为自1月12日以来…

Acwing---844.走迷宫

走迷宫 1.题目2.基本思想3.代码实现 1.题目 给定一个 nm 的二维整数数组,用来表示一个迷宫,数组中只包含 0 或 1,其中 0 表示可以走的路,1 表示不可通过的墙壁。最初,有 一个人位于左上角 (1,1)处,已知该…

Java并发基础:ConcurrentLinkedDeque全面解析!

内容概要 ConcurrentLinkedDeque类提供了线程安全的双端队列操作,支持高效的并发访问,因此在多线程环境下,可以放心地在队列的两端添加或移除元素,而不用担心数据的一致性问题。同时,它的内部实现采用了无锁算法&…