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

文章目录

    • 一、Jest 前端自动化测试框架基础入门
    • 二、Jest难点进阶
      • 1.snapshot 快照测试


学习内容来源: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难点进阶

1.snapshot 快照测试

新建 lesson9.js

export const generateConfig = () => {return {server: 'http://localhost',port: 8080}
}

新建 lesson9.test.js

import { generateConfig } from "./lesson9";test('测试 generateConfig', async () => {expect(generateConfig()).toEqual({server: 'http://localhost',port: 8080})
})

对于这种配置文件最简单的测试思路就是如上面这样写,但是这样的话每次配置文件有改动都需要相应修改测试案例,并不友好,因此快照功能应运而生!!!

修改 lesson9.test.js

test('测试 generateConfig', async () => {expect(generateConfig()).toMatchSnapshot();
})

运行,日志如下:

 PASS  ./lesson9.test.js√ 测试 generateConfig (6ms)1 snapshot written.
Snapshot Summary› 1 snapshot written from 1 test suite.Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 written, 1 total
Time:        3.697s

toMatchSnapshot: 匹配快照,首次执行会在 测试案例文件所在目录下生成一个 __snapshots__ 目录,目录下有个文件 lesson9.test.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLPexports[`测试 generateConfig 1`] = `
Object {"port": 8080,"server": "http://localhost",
}
`;

若是下次测试生成快找文件与之前不同,则测试不会通过,试一下:

修改 lesson9.js

export const generateConfig = () => {return {server: 'http://localhost',port: 8080,alisa: {}}
}

运行测试用例,日志如下:

FAIL  src/lesson9/__tests__/lesson9.test.js× 测试 generateConfig (10ms)● 测试 generateConfigexpect(received).toMatchSnapshot()Snapshot name: `测试 generateConfig 1`- Snapshot+ ReceivedObject {+   "alisa": Object {},"port": 8080,"server": "http://localhost",}2 |3 | test('测试 generateConfig', async () => {> 4 |   expect(generateConfig()).toMatchSnapshot();|                            ^5 | })at Object.<anonymous> (src/lesson9/__tests__/lesson9.test.js:4:28)1 snapshot failed.
Snapshot Summary› 1 snapshot failed from 1 test suite. Inspect your code changes or re-run jest with `-u` to update them.Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   1 failed, 1 total
Time:        4.32s

失败,快照不匹配,若是确定要修改,且在命令行模式,可以输入 u 更新快照,若是一个文件中只能有一个包含多个快照 需要输入 i 进行交互式的一个个对比更新。最后回车返回即可。

在这里插入图片描述

不过这样的配置文件都是写死的,若是配置文件内容是动态变化的比如:

修改 lesson9.js

export const generateConfig = () => {return {server: 'http://localhost',port: 8080,time: new Date()}
}

这样的话每次生成的快照一定是不一样的,也就通不过测试了

修改 lesson9.test.js

test('测试 generateConfig', async () => {expect(generateConfig()).toMatchSnapshot({time: expect.any(Date)});
})

这样的话 time 只会对比类型,不会对比值,测试就可以通过啦

安装 prettier

npm i prettier@1.18.2 -S

修改 lesson9.test.js(toMatchSnapshot 改为 toMatchInlineSnapshot)

test("测试 generateConfig", async () => {expect(generateConfig()).toMatchInlineSnapshot({time: expect.any(Date)});
});

运行测试用例,日志如下:

PASS  src/lesson9/__tests__/lesson9.test.js√ 测试 generateConfig (27ms)1 snapshot written.› 1 snapshot obsolete.• 测试 generateConfig 1
Snapshot Summary› 1 snapshot written from 1 test suite.› 1 snapshot obsolete from 1 test suite. To remove it, re-run jest with `-u`.↳ src/lesson9/__tests__/lesson9.test.js• 测试 generateConfig 1Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 obsolete, 1 written, 1 total
Time:        4.151s

运行过后 lesson9.test.js 变了样子:

test("测试 generateConfig", async () => {expect(generateConfig()).toMatchInlineSnapshot({time: expect.any(Date)},`Object {"port": 8080,"server": "http://localhost","time": Any<Date>,}`);
});

可以看到快照作为第二个参数被保存到了测试案例里。


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

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

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

相关文章

jmeter遇到连接数据库的问题

jmeter连接mysql或者oracle简单&#xff0c;但是连接过inceptor吗&#xff1f; 上货 1、下载驱动inceptor 5.1.2.jar包 2、在添加驱动那里导入 3、在JBC request中的写法 PS:没什么可说的

【C++】类和对象(五)友元、内部类、匿名对象

前言&#xff1a;前面我们说到类和对象是一个十分漫长的荆棘地&#xff0c;今天我们将走到终点&#xff0c;也就是说我们对于&#xff23;算是正式的入门了。 &#x1f496; 博主CSDN主页:卫卫卫的个人主页 &#x1f49e; &#x1f449; 专栏分类:高质量&#xff23;学习 &…

[AIGC] Java 和 Kotlin 的区别

好的&#xff0c;我还是以“萌萌哒小码农”的身份继续回答您的问题。 Java 和 Kotlin 是两种不同的编程语言&#xff0c;它们有许多共同点&#xff0c;但也有一些重要的区别。以下是一些常见的 Java 和 Kotlin 的区别&#xff1a; 语法 Kotlin 的语法比 Java 简洁得多&#…

定点数,定点数二维向量,定点数三维向量,定点数数学类

定点数&#xff0c;定点数二维向量&#xff0c;定点数三维向量&#xff0c;定点数数学类 介绍浮点数定点数封装的定点数FixedNumber定点数二维向量定点数三维向量定点数数学类总结 介绍 众所周知定点数是用于做帧同步时保持不同cpu不同设备保持一致稳定的代替浮点数的变量&…

OpenMV学习笔记

一、感光元件----sensor sensor.reset() ----初始化感光元件 sensor.reset() 的功能包括&#xff1a; 初始化感光元件&#xff1a; 将摄像头感光元件初始化为默认状态&#xff0c;以确保其处于可用的工作状态。 恢复默认设置&#xff1a; 将摄像头的其他配置参数还原为默认…

嵌入式中全面解析 SPI 通信协议方法

SPI 的英文全称为 Serial Peripheral Interface&#xff0c;顾名思义为串行外设接口。SPI 是一种同步串行通信接口规范&#xff0c;主要应用于嵌入式系统中的短距离通信。该接口由摩托罗拉在20世纪80年代中期开发&#xff0c;后发展成了行业规范。 SPI 是一种高速的、全双工的…

算法沉淀——优先级队列(堆)(leetcode真题剖析)

算法沉淀——优先级队列 01.最后一块石头的重量02.数据流中的第 K 大元素03.前K个高频单词04.数据流的中位数 优先队列&#xff08;Priority Queue&#xff09;是一种抽象数据类型&#xff0c;它类似于队列&#xff08;Queue&#xff09;&#xff0c;但是每个元素都有一个关联的…

嵌入式Linux平台大文件生成以及处理方法

在日常工作中&#xff0c;为了验证某些场景下的功能&#xff0c;经常需要人为构造一些大文件进行测试&#xff0c;有时需要用大文件来测试下载速度&#xff0c;有时需要用大文件来覆盖磁盘空间&#xff1b;偶尔会看到一些网络博文会教大家如何构造大文件&#xff1b;但是当需要…

英伟达(NVIDIA)和CUDA

英伟达&#xff08;NVIDIA&#xff09;是一家知名的图形处理器&#xff08;GPU&#xff09;制造公司&#xff0c;而CUDA则是NVIDIA推出的一种并行计算架构和编程模型。CUDA全称为Compute Unified Device Architecture&#xff0c;即计算统一设备架构&#xff0c;它允许开发者使…

43. C++ 指针合集

C/C指针合集 1. 指针变量的空间大小 指针变量的空间大小是固定值&#xff08;64位下为8字节&#xff0c; 32位下为4字节&#xff09;&#xff0c;跟其指向的数据类型及多级指针无关&#xff0c;与编译平台相关&#xff08;指针大小由当前CPU运行模式的寻址位数决定&#xff0…

杨中科 ASP.NET DI综合案例

综合案例1 需求说明 1、目的:演示DI的能力; 2、有配置服务、日志服务&#xff0c;然后再开发一个邮件发送器服务。可以通过配置服务来从文件、环境变量、数据库等地方读取配置&#xff0c;可以通过日志服务来将程序运行过程中的日志信息写入文件、控制台、数据库等。 3、说明…

第三百四十九回

文章目录 1. 概念介绍2. 原理与方法2.1 知识对比2.2 使用方法 3. 示例代码4. 内容总结 我们在上一章回中介绍了"加密包crypto"相关的内容&#xff0c;本章回中将介绍characters包.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 在项目中会遇到获取字…

String类常用方法(Java)

String类 字符串相减/替换 使用 String 类的 replace() 方法来实现这个功能: replace(“target”,“replacement”) 如果你想将引号添加到字符串中&#xff0c;你可以使用转义字符 \" 来表示双引号。 String str1 "abcdefg"; String str2 "bcd"…

Django实战:部署项目 【资产管理系统】,Django完整项目学习研究(项目全解析,部署教程,非常详细)

导言 关于Django&#xff0c;我已经和大家分享了一些知识&#xff0c;考虑到一些伙伴需要在实际的项目中去理解。所以我上传了一套Django的项目学习源码&#xff0c;已经和本文章进行了绑定。大家可以自行下载学习&#xff0c;考虑到一些伙伴是初学者&#xff0c;几年前&#…

OpenAI又出王炸,Sora是否要开启视频AI新时代?

OpenAI又出王炸&#xff0c;Sora是否要开启视频AI新时代&#xff1f; 关注微信公众号 DeepGoAI 前几天我们还在讨论 如何让ChatGPT3.5变得更聪明 今天OpenAI就带着新王炸出现了 如同ChatGPT一般 在计算机领域掀起轩然大波 开启真正视频AI新时代 那就是 Sora 很多同学可…

结构体对齐规则及为什么会有结构体对齐

前言&#xff1a; 大家在学习结构体中&#xff0c;在计算结构体大小时想必会很疑惑&#xff0c;为什么结构体的大小不是按照常理像数组一样一个字节一个字节的挨在一起放&#xff1f;今天带大家一起深入探讨一下背后的规则和原因。 结构体对齐规则&#xff1a; 结构体对齐其实…

离散数学截图2

为什么G中阶大于2的元素&#xff0c;一定有偶数个 在有限群G中&#xff0c;阶大于2的元素个数一定是偶数的原因如下&#xff1a; 设 aaa 是群G中一个阶大于2的元素&#xff0c;那么根据群的定义和阶的概念&#xff08;即某个元素的幂次使得其等于单位元的最小正整数&#xff…

【Linux】 Linux 小项目—— 进度条

进度条 基础知识1 \r && \n2 行缓冲区3 函数介绍 进度条实现版本 1代码实现运行效果 版本2 Thanks♪(&#xff65;ω&#xff65;)&#xff89;谢谢阅读&#xff01;&#xff01;&#xff01;下一篇文章见&#xff01;&#xff01;&#xff01; 基础知识 1 \r &&a…

linux 安装docker

目录 环境 操作步骤 1 下载脚本 2 执行脚本 3 检查docker版本&#xff0c;证明安装成功 环境 阿里云 ubuntu 22.04 64位 操作步骤 参考linux系统安装docker-腾讯云开发者社区-腾讯云 (tencent.com) 1 下载脚本 curl -fsSL https://get.docker.com -o get-docker.sh …

牛客小白月赛87

说明 年后第一次写题&#xff0c;已经麻了&#xff0c;这次的题很简单但居然只写了两道题。有种本该发挥80分的水平&#xff0c;但是只做出了20分的水平的感觉。不过剩下几个题&#xff08;除了G题&#xff09;&#xff0c;比完赛一小时内就AC了。欢迎大家交流学习。&#xff0…