【实战】一、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.rhkb.cn/news/258357.html

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

相关文章

C++中类的6个默认成员函数 【拷贝构造函数】

C++中类的6个默认成员函数 【拷贝构造函数】

文章目录 拷贝构造函数的使用拷贝构造对于自定义类型【浅拷贝】深拷贝拷贝构造函数典型调用场景 拷贝构造函数的使用 在前几章学习对象的时候，我们有的时候需要一个与已存在对象一某一样的新对象 那在创建对象时，可否创建一个与已存在对象一某一样的新对…
阅读更多...
Qlik Sense : 条形图

Qlik Sense : 条形图

条形图 “条形图适合比较多个值。维度轴显示所比较的类别条目，度量轴显示每个类别条目的值。” Qlik Sense中的条形图是一种数据可视化工具，用于展示不同类别或维度之间的比较。它通过水平或垂直的条形表示数据，并根据数值的大小进行排序。…
阅读更多...
win10 环境下Python 3.8按装fastapi paddlepaddle 进行图片文字识别1

win10 环境下Python 3.8按装fastapi paddlepaddle 进行图片文字识别1

###按装 用conda 创建python 3.8的环境，可参看本人python下的其它文章。 在pycharm开发环境下按装相关的模块： pip install -i https://pypi.tuna.tsinghua.edu.cn/simple fastapi pip install -i https://pypi.tuna.tsinghua.edu.cn/simple "uvi…
阅读更多...
《Go 简易速速上手小册》第1章：Go 语言基础（2024 最新版）

《Go 简易速速上手小册》第1章：Go 语言基础（2024 最新版）

文章目录 1.1 Go 语言的安装与环境配置1.1.1 基础知识讲解案例 Demo：简单的 Go 程序 1.1.2 重点案例：搭建一个 Go Web 服务准备工作步骤 1：创建项目目录步骤 2：编写 Web 服务代码步骤 3：运行你的 Web 服务步骤 4&#…
阅读更多...
寒假 6

寒假 6

1.现有无序序列数组为{23,24,12,5,33,5,34,7}&#xff0c;请使用以下排序实现编程。 函数1:请使用冒泡排序实现升序排序 函数2︰请使用简单选择排序实现升序排序 函数3:请使用直接插入排序实现升序排序 函数4∶请使用插入排序实现升序排序 #include <stdio.h> #inclu…
阅读更多...
牛客小白月赛87

牛客小白月赛87

说明 年后第一次写题&#xff0c;已经麻了&#xff0c;这次的题很简单但居然只写了两道题。有种本该发挥80分的水平&#xff0c;但是只做出了20分的水平的感觉。不过剩下几个题&#xff08;除了G题&#xff09;&#xff0c;比完赛一小时内就AC了。欢迎大家交流学习。&#xff0…
阅读更多...
【2024年毕设系列】如何使用Anaconda和Pycharm

【2024年毕设系列】如何使用Anaconda和Pycharm

【2024年毕设系列】如何使用Anaconda和Pycharm 视频教程地址&#xff1a;【2024毕设系列】Anaconda和Pycharm如何使用_哔哩哔哩 Hi&#xff0c;各位好久不见&#xff0c;这里是肆十二&#xff0c;首先在这里给大伙拜年了。 诸位过完年之后估计又要开始为了大作业和毕业设计头疼…
阅读更多...
【蓝桥杯单片机入门记录】LED灯（附多个例程）

【蓝桥杯单片机入门记录】LED灯（附多个例程）

目录 一、LED灯概述 1.1 LED发光原理 1.2电路原理图 1.3电路实物图 1.4 开发板LED灯原理图 1.4.1共阳极LED灯操控原理&#xff08;本开发板&#xff09; &#xff08;非实际原理图&#xff0c;便于理解版本&#xff09;由图可以看出&#xff0c;每个LED灯的左边&#xf…
阅读更多...
关于在分布式环境中RVN和使用场景的介绍3

关于在分布式环境中RVN和使用场景的介绍3

简介 在《关于在分布式环境中RVN和使用场景的介绍2》和《关于在分布式环境中RVN和使用场景的介绍1》中我们介绍了RVN的概念和在一些具体用例中的使用。在本文中我们讨论一下在分布式环境中使用RVN需要注意的问题。 问题 我们在收到一条待处理的事件时&#xff0c;需要检查该…
阅读更多...
css3实现炫彩字体

css3实现炫彩字体

这个字体颜色是动态变化的&#xff0c;直接上代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title&…
阅读更多...
Java 新手如何使用Spring MVC 中的查询字符串和查询参数

Java 新手如何使用Spring MVC 中的查询字符串和查询参数

目录 前言 什么是查询字符串和查询参数&#xff1f; Spring MVC中的查询参数 处理可选参数 处理多个值 处理查询参数的默认值 处理查询字符串 示例&#xff1a;创建一个RESTful服务 总结 作者简介&#xff1a; 懒大王敲代码&#xff0c;计算机专业应届生 今天给大家…
阅读更多...
【Node.js】path 模块进行路径处理

【Node.js】path 模块进行路径处理

Node.js 执行 JS 代码时&#xff0c;代码中的路径都是以终端所在文件夹出发查找相对路径&#xff0c;而不是以我们认为的从代码本身出发&#xff0c;会遇到问题&#xff0c;所以在 Node.js 要执行的代码中&#xff0c;访问其他文件&#xff0c;建议使用绝对路径 实例&#xff1…
阅读更多...
【Rust】使用Rust实现一个简单的shell

【Rust】使用Rust实现一个简单的shell

一、Rust Rust是一门系统编程语言&#xff0c;由Mozilla开发并开源&#xff0c;专注于安全、速度和并发性。它的主要目标是解决传统系统编程语言&#xff08;如C和C&#xff09;中常见的内存安全和并发问题&#xff0c;同时保持高性能和底层控制能力。 Rust的特点包括&#x…
阅读更多...
车载诊断协议DoIP系列 —— 车辆以太网节点需求汇总

车载诊断协议DoIP系列 —— 车辆以太网节点需求汇总

车载诊断协议DoIP系列 —— 车辆以太网节点需求汇总 我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师（Wechat：gongkenan2013）。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 本就是小人物，输了就是输了，不要在意别人怎么看自己。江湖一碗茶，…
阅读更多...
《CSS 简易速速上手小册》第7章：CSS 预处理器与框架（2024 最新版）

《CSS 简易速速上手小册》第7章：CSS 预处理器与框架（2024 最新版）

文章目录 7.1 Sass&#xff1a;更高效的 CSS 编写7.1.1 基础知识7.1.2 重点案例&#xff1a;主题颜色和字体管理7.1.3 拓展案例 1&#xff1a;响应式辅助类7.1.4 拓展案例 2&#xff1a;深色模式支持 7.2 Bootstrap&#xff1a;快速原型设计和开发7.2.1 基础知识7.2.2 重点案例…
阅读更多...
【NLP】MHA、MQA、GQA机制的区别

【NLP】MHA、MQA、GQA机制的区别

Note LLama2的注意力机制使用了GQA。三种机制的图如下&#xff1a; MHA机制&#xff08;Multi-head Attention&#xff09; MHA&#xff08;Multi-head Attention&#xff09;是标准的多头注意力机制&#xff0c;包含h个Query、Key 和 Value 矩阵。所有注意力头的 Key 和 V…
阅读更多...
排序算法---计数排序

排序算法---计数排序

原创不易&#xff0c;转载请注明出处。欢迎点赞收藏~ 计数排序&#xff08;Counting Sort&#xff09;是一种线性时间复杂度的排序算法&#xff0c;其核心思想是通过统计待排序元素的个数来确定元素的相对位置&#xff0c;从而实现排序。 具体的计数排序算法步骤如下&#xff…
阅读更多...
基于Python实现Midjourney集成到（个人/公司）平台中

基于Python实现Midjourney集成到（个人/公司）平台中

目前Midjourney没有对外开放Api&#xff0c;想体验他们的服务只能在discord中进入他们的频道进行体验或者把他们的机器人拉入自己创建的服务器中&#xff1b;而且现在免费的也用不了了&#xff0c;想使用就得订阅。本教程使用midjourney-api这个开源项目&#xff0c;搭建Midjou…
阅读更多...
鸿蒙开发-HarmonyOS UI架构

鸿蒙开发-HarmonyOS UI架构

初步布局Index 当我们新建一个工程之后&#xff0c;首先会进入Index页。我们先简单的做一个文章列表的显示 class Article {title?: stringdesc?: stringlink?: string }Entry Component struct Index {State articles: Article[] []build() {Row() {Scroll() {Column() …
阅读更多...
Web项目利用MybatisPlus进行分页查询

Web项目利用MybatisPlus进行分页查询

之前在写博客系统前台页面的时候&#xff0c;遇到了利用mp进行分页查询的情况&#xff0c;由于涉及到的知识点相对较为重要&#xff0c;固写一篇博客以此巩固。 一、功能需求 在首页和分类页面都需要查询文章列表。 首页&#xff1a;查询所有的文章分类页面&#xff1a;查询…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023