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

文章目录

    • 一、Jest 前端自动化测试框架基础入门
    • 二、Jest难点进阶
      • 2.mock 深入学习


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

  • 二、Jest难点进阶(一)

2.mock 深入学习

先来回顾一下之前学习过的内容

新建 src\lesson10\index.js

import axios from 'axios'export const fetchData = () => {return axios.get('/').then(res => res.data)
}

新建 src\lesson10_tests_\index.test.js

import { fetchData } from "./lesson9";
import axios from 'axios'jest.mock('axios');test('测试 fetchData', async () => {axios.get.mockResolvedValue({data: "(function(){return '123'})()"})await fetchData().then(data => {expect(eval(data)).toEqual('123')})
})

执行测试用例,成功!

按照往常的思路,我们会写上面的代码来完成对接口的模拟测试,接下来介绍另一种模拟方式

新建 src\lesson10_mocks_\index.js(用来做待测试文件的平替

export const fetchData = () => {return new Promise((resolved, reject) => {resolved({data: "(function(){return '123'})()"})})
}

修改 src\lesson10_tests_\index.test.js(直接模拟待测试文件,调用时会自动到__mocks__目录下寻找,将异步变为同步)

jest.mock('../index');
import { fetchData } from "../index";test('测试 fetchData', async () => {await fetchData().then(data => {expect(eval(data)).toEqual('123')})
})

执行测试用例,成功!

mock 相对,还有 unmock,即是取消模拟:jest.unmock('../index')

再次修改 src\lesson10_tests_\index.test.js(取消模拟)

import { fetchData } from "../index";test('测试 fetchData', async () => {await fetchData().then(data => {expect(eval(data)).toEqual('123')})
})

修改 Jest\lesson2\jest.config.js (打开全局自动模拟)

module.exports = {// All imported modules in your tests should be mocked automaticallyautomock: true,...
};

再次执行测试用例,成功!

全局自动模拟会自动在测试文件所在目录下优先引用 __mocks__ 下的同名文件

若是待测试文件中除了异步函数之外还有同步函数需要调用测试怎么办呢?

修改 src\lesson10\index.js

...
export const getNumber = () => {return 123
}

再次修改 src\lesson10_tests_\index.test.js(真实调用getNumber

jest.mock('../index');
import { fetchData } from "../index";
const { getNumber } = jest.requireActual('../index')test('测试 fetchData', async () => {await fetchData().then(data => {expect(eval(data)).toEqual('123')})
})test('测试 getNumber', async () => {expect(getNumber()).toEqual(123)
})

执行测试用例,成功!

其他 mock 中的方法,可在以下文档中查缺补漏:

  • https://archive.jestjs.io/docs/en/24.x/mock-function-api
  • https://archive.jestjs.io/docs/en/24.x/jest-object

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

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

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

相关文章

STM32 寄存器操作 systick 滴答定时器 与中断

一、什么是 SysTick SysTick—系统定时器是属于CM3内核中的一个外设,内嵌在NVIC中。系统定时器是一个24bit的向下递减的计数器, 计数器每计数一次的时间为1/SYSCLK,一般我们设置系统时钟SYSCLK等于72M。当重装载数值寄存器的值递减到0的时候…

ES6中的数组解构赋值【详解】

文章目录 1.数组的解构赋值1.1 基本用法1.2 默认值1.3更多对象解构赋值 1.数组的解构赋值 1.1 基本用法 ES6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称为结构。 let [a, b, c] [1, 2, 3];如果解构不成功&#xff0c…

python学习(三):pip安装及如何加速安装第三方组件

pip全称Package Installer for Python,即用来安装第三方组件的工具 一.安装pip Python3中setuptools、Pip安装详解 1、安装setuptools 命令如下: wget --no-check-certificate https://pypi.python.org/packages/source/s/setuptools/setuptools-19.…

不确定性、先验概率_后验概率、概率密度、贝叶斯法则、朴素贝叶斯_、最大似然估计

【人工智能】— 不确定性、先验概率/后验概率、概率密度、贝叶斯法则、朴素贝叶斯 文章目录 【人工智能】— 不确定性、先验概率/后验概率、概率密度、贝叶斯法则、朴素贝叶斯不确定性不确定性与理性决策基本概率符号先验概率(无条件概率)/后验概率(条件概率)随机变量概率密度联…

【web | CTF】BUUCTF [网鼎杯 2020 青龙组]AreUSerialz

天命:php的序列化题目简直是玄学,既不能本地复现,也不能求证靶场环境 天命:本地php是复现不了反序列化漏洞的,都不知道是版本问题还是其他问题 天命:这题也是有点奇怪的,明明用字符串2也应该是可…

优雅地用eruda在移动端上调试网页

eruda简介 github开源项目网址:eruda Eruda 是一个专为手机网页前端设计的调试面板,类似 DevTools 的迷你版,其主要功能包括:捕获 console 日志、检查元素状态、捕获XHR请求、显示本地存储和 Cookie 信息等等。 其有以下功能: Console面板:捕获Console日志,支持log、…

C语言—指针

碎碎念:做指针题的时候我仿佛回到了原点&#xff0c;总觉得目的是为了把框架搭建起来&#xff0c;我胡说的哈31 1.利用指针变量将一个数组中的数据反向输出。 /*1.利用指针变量将一个数组中的数据反向输出。*/#include <stdio.h> #include <time.h> #include <…

phpstrom创建thinkphp项目

安装php和composer 参考 安装phpstrom 创建项目 查看thinkphp版本 https://packagist.org/packages/topthink/think 打开所在项目编辑配置 即可调试运行

二维码的颜色怎么改变?轻松3步修改二维码样式

怎么修改二维码的颜色呢&#xff1f;一般我们制作的二维码或者经过系统生成的二维码大多都是黑白颜色的&#xff0c;有些小伙伴会觉得不太美观无法满足自己的使用需求。那么对于想要修改二维码样式的小伙伴&#xff0c;可以使用二维码生成器的二维码美化功能来处理&#xff0c;…

小红书种草笔记是什么?小红书种草什么意思?

小红书种草笔记是指在小红书这个平台上&#xff0c;用户发布的关于生活方式、消费经验、美妆、时尚、旅行等方面的分享和推荐。这种笔记通常以第一人称叙述&#xff0c;以个人体验和感受为基础&#xff0c;向其他用户推荐自己喜欢或认为值得尝试的产品、服务或体验。种草一词源…

07 按键控制 LED

按键简介 按键开关是一种电子开关&#xff0c;属于电子元器件类。常见的按键开关有两种&#xff0c;第一种是轻触式按键开关&#xff08;简称轻触开关&#xff09;&#xff0c;使用时以向开关的操作方向施加压力使内部电路闭合接通&#xff0c;当撤销压力时开关断开&#xff0…

git分布式版本控制工具基本操作

Windows操作 1.1 git基本操作 1.设置用户签名 git config user.name xx git config user.email xxb163.com2.初始化本地库 git init3.查看本地库状态 git status4.添加暂存区 git add 文件名称 git add *5.提交本地库 git commit -m "描述信息" 文件6.查看版本…

《富爸爸:巴比伦最富有的人》读书笔记

目录 作者简介 感悟 经典摘录 观点&#xff1a; 支付给自己(理解是投资自己) 观点&#xff1a;源源不断地放入金币 观点&#xff1a; 把收入的一部分留给我自己 观点&#xff1a; 从专业的人士得到建议 观点&#xff1a;一旦为自己规定了任务&#xff0c;就一定要完成 …

虚拟环境(二)venv

1、创建虚拟环境 python3 -m venv fastapi_test2、激活虚拟环境 source <环境名称>/bin/activate3、关闭虚拟环境 deactivate4、从虚拟环境生成 requirement.txt 在激活虚拟环境下敲pip freeze > requirement.txt 5、安装依赖包 在激活虚拟环境下敲使用pip inst…

微波炉维修笔记

微波主要是靠2.45GHz 左右的微波(12.2cm 波长)加热水分子实现食物加热 所有不要使用金属器皿进行加热&#xff0c;要么因为电磁屏蔽&#xff0c;起不到加热效果&#xff0c;要么火光四射 微波炉基本组成 借鉴姜师傅的视频 碰到不加热其它都正常的问题 1.检查高压电容 使用万…

自动驾驶中的 DCU、MCU、MPU、SOC 和汽车电子架构

自动驾驶中的 DCU、MCU、MPU 1. 分布式电子电气架构2. 域集中电子电气架构架构2.1 通用硬件定义 3. 车辆集中电子电气架构4. ADAS/AD系统方案演变进程梳理4.1 L0-L2级别的ADAS方案4.2 L2以上级别的ADAS方案 5. MCU和MPU区别5.1 MCU和MPU的区别5.2 CPU与SoC的区别5.3 举个例子 R…

算法:柠檬水找零

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、问题描述 二、解法分析 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 例如&#xff1a;随着人工智能的不断发展&#xff0…

【STM32】软件SPI读写W25Q64芯片

目录 W25Q64模块 W25Q64芯片简介 硬件电路 W25Q64框图 Flash操作注意事项 状态寄存器 ​编辑 指令集 INSTRUCTIONS​编辑 ​编辑 SPI读写W25Q64代码 硬件接线图 MySPI.c MySPI.h W25Q64 W25Q64.c W25Q64.h main.c 测试 SPI通信&#xff08;W25Q64芯片简介&am…

关于CDN

CDN&#xff08;内容分发网络&#xff09;是一种分布式的服务器系统&#xff0c;旨在有效地提供互联网上的内容&#xff0c;特别是静态资源&#xff0c;如图片、样式表、脚本文件等。CDN的主要目标是提高网站的性能、降低加载时间&#xff0c;并减轻原始服务器的负载。 CDN的工…

12-输入/输出项目构建命令行程序

上一篇&#xff1a; 11-编写自动化测试 本章是对迄今为止所学到的许多技能的回顾&#xff0c;也是对一些标准库特性的探索。我们将创建一个与文件和命令行输入/输出交互的命令行工具&#xff0c;以练习你现在掌握的一些 Rust 概念。 Rust 的速度、安全性、单一二进制输出和跨平…