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

news2024/11/29 0:31:27

文章目录

    • 一、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 : 退出监听模式

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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【python】object() takes no parameters报错原因

【python】object() takes no parameters报错原因

__init__ 你以为写对了，其实错了，因为是左右都是2个下划线。是左边两个！！右边也是两个！！！不是合计2个！！！
阅读更多...
30. 异常

30. 异常

异常 1. 概述2. Throwable 方法2.1 概述2.2 代码示例 3. 异常分类4. 异常处理方式4.1 JVM默认处理异常4.2 自己处理（捕获异常）try...catch4.2.1 概述4.2.2 灵魂四问 4.3 抛出处理(throw和throws) 5. 自定义异常5.1 概述5.2 代码示例 6. 异常注意事项 文章…
阅读更多...
GPT-4影响高度创新思维的领域（一）

GPT-4影响高度创新思维的领域（一）

GPT-4的应用范围不再局限于对现有信息的检索、整理和复述，而是进一步拓展到了诸如文学创作、科学假设生成、教育辅导、商业策略建议等需要高度创新思维的领域。这种独立思考和创新能力赋予了GPT-4作为虚拟助手时更加丰富多元的角色定位，使其成为一种强大…
阅读更多...
如何在PDF 文件中删除页面？

如何在PDF 文件中删除页面？

查看不同的工具以及解释如何在 Windows、Android、macOS 和 iOS 上从 PDF 删除页面的步骤： PDF 是最难处理的文件格式之一。曾经有一段时间，除了阅读之外，无法用 PDF 做任何事情。但是今天，有许多应用程序和工具可以让您用它们做…
阅读更多...
寒假思维训练day21

寒假思维训练day21

今天更新一道不错的状态压缩DP题，顺带总结一下状态压缩DP。 摘要： Part1 浅谈状态压缩DP的理解 Part2 浅谈对状态机DP的理解 Part3 关于状态压缩DP的1道例题 Part1 状态压缩DP 1、状态压缩DP： 事物的状态可能包含多个特征，…
阅读更多...
Zotero插件分享（第二弹）

Zotero插件分享（第二弹）

今天紧接上一篇文章（Zotero常用插件分享），继续分享关于Zotero常用插件的相关内容。（排名不分先后） 1.Translate for Zotero 英文文献阅读辅助工具，可以实现将pdf中选中的文字翻译为指定语言，并…
阅读更多...
【学网攻】 第(27)节 -- HSRP(热备份路由器协议)

【学网攻】 第(27)节 -- HSRP(热备份路由器协议)

系列文章目录 目录 系列文章目录 文章目录 前言 一、HSRP(热备份路由器协议)是什么？ 二、实验 1.引入 实验目标 实验背景 技术原理 实验步骤 实验设备 实验拓扑图 实验配置 实验验证 文章目录 【学网攻】 第(1)节 -- 认识网络【学网攻】 第(2)节 -- 交…
阅读更多...
港口码头航吊远距离相位测距仪|传感器PHR-120100配置使用说明

港口码头航吊远距离相位测距仪|传感器PHR-120100配置使用说明

港口码头航吊远距离相位测距仪|传感器PHR-120100广泛应用于港口码头、航车、位移监测、形变监测、钢铁、堆垛机、龙门吊等领域。 本文重点介绍港口码头航吊远距离相位测距仪|传感器PHR-120100配置使用说明。 一、布局介绍 二、按键介绍 三、指示灯说明 四、显示屏操作说明 …
阅读更多...
使用LORA微调RoBERTa

使用LORA微调RoBERTa

模型微调是指在一个已经训练好的模型的基础上，针对特定任务或者特定数据集进行再次训练以提高性能的过程。微调可以在使其适应特定任务时产生显着的结果。 RoBERTa（Robustly optimized BERT approach）是由Facebook AI提出的一种基于Transfor…
阅读更多...
【EAI 020】Diffusion Policy: Visuomotor Policy Learning via Action Diffusion

【EAI 020】Diffusion Policy: Visuomotor Policy Learning via Action Diffusion

论文标题：Diffusion Policy: Visuomotor Policy Learning via Action Diffusion 论文作者：Cheng Chi, Siyuan Feng, Yilun Du, Zhenjia Xu, Eric Cousineau, Benjamin Burchfiel, Shuran Song 作者单位：Columbia University, Toyota Research…
阅读更多...
C#中implicit和explicit

C#中implicit和explicit

理解: 使用等号代替构造函数调用的效果以类似重载操作符的形式定义用于类型转换的函数前者类型转换时候直接写等号赋值语法,后者要额外加目标类型的强制转换stirng str -> object o -> int a 可以 int a (int)(str as object)转换通过编译,但没有转换逻辑所以运行会报错…
阅读更多...
HCIA-HarmonyOS设备开发认证V2.0-轻量系统内核基础-事件event

HCIA-HarmonyOS设备开发认证V2.0-轻量系统内核基础-事件event

目录 一、事件基本概念二、事件运行机制三、事件开发流程四、事件使用说明五、事件接口坚持就有收获 一、事件基本概念 事件是一种实现任务间通信的机制，可用于实现任务间的同步，但事件通信只能是事件类型的通信，无数据传输。一个任务可以等…
阅读更多...
LeetCode、452. 用最少数量的箭引爆气球【中等，贪心，区间问题】

LeetCode、452. 用最少数量的箭引爆气球【中等，贪心，区间问题】

文章目录 前言LeetCode、452. 用最少数量的箭引爆气球【中等，贪心，区间问题】题目链接与分类思路贪心，连续区间数量问题 资料获取 前言 博主介绍：✌目前全网粉丝2W，csdn博客专家、Java领域优质创作者，博客…
阅读更多...
带你掌握getchar与putchar的基本用法

带你掌握getchar与putchar的基本用法

个人主页（找往期文章包括但不限于本期文章中不懂的知识点）：我要学编程(ಥ_ಥ)-CSDN博客 目录 getcahr putchar getchar 与 putchar 的配合使用 getchar相较于scanf的优缺点 putchar相较于printf的优缺点 getcahr 函数原型&#xff1a…
阅读更多...
【教程】MySQL数据库学习笔记（二）——数据类型（持续更新）

【教程】MySQL数据库学习笔记（二）——数据类型（持续更新）

写在前面： 如果文章对你有帮助，记得点赞关注加收藏一波，利于以后需要的时候复习，多谢支持！ 【MySQL数据库学习】系列文章 第一章 《认识与环境搭建》 第二章 《数据类型》 文章目录 【MySQL数据库学习】系列文章一、整…
阅读更多...
DFM-无监督图像匹配

DFM-无监督图像匹配

DFM：A Performance Baseline for Deep Feature Matching（深度特征匹配的性能基准） 2021.06.14 摘要 提出了一种新的图像匹配方法，利用现成的深度神经网络提取的学习特征来获得良好的图像匹配效果。该方法使用预训练的VGG结构作为…
阅读更多...
starknet之 class_hash

starknet之 class_hash

文章目录 问题背景什么是Class Hash问题背景 部署合约报错：ReferenceError: Buffer is not defined 什么是Class Hash 官方： https://book.starknet.io/ch04-03-01-deploy-standard-account.html?highlight=class%20hash#finding-the-class-hash 要部署智能合约，您需要在…
阅读更多...
【原创 附源码】Flutter集成Apple支付详细流程(附源码)

【原创 附源码】Flutter集成Apple支付详细流程(附源码)

最近有时间，特意整理了一下之前使用过的Flutter平台的海外支付，附源码及demo可供参考 这篇文章只记录Apple支付的详细流程，其他相关Flutter文章链接如下： 【原创 附源码】Flutter集成谷歌支付详细流程(附源码) 【原创 附源码】F…
阅读更多...
PR：熟悉PR工作环境

PR：熟悉PR工作环境

新建项目 设置自己的页面布局 首选项
阅读更多...
【JavaEE】_JavaScript基础语法

【JavaEE】_JavaScript基础语法

目录 1. JavaScript概述 1.1 JavaScript简介 1.2 HTML、CSS、JavaScript的关系 1.3 JavaScrip的组成 2. JavaScript的书写形式 2.1 内嵌式 2.2 行内式 2.3 外部式 3. 输出 3.1 alert 3.2 console.log 4. 变量的使用 4.1 创建变量 4.1.1 使用var 4.1.2 使用let …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023