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

文章目录

学习内容来源：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.0babel-jest^27.4.2babel-loader^8.2.3babel-plugin-named-asset-import^0.3.8babel-preset-react-app^10.0.1bfj^7.0.2browserslist^4.18.1camelcase^6.2.1case-sensitive-paths-webpack-plugin^2.4.0css-loader^6.5.1css-minimizer-webpack-plugin^3.2.0dotenv^10.0.0dotenv-expand^5.1.0eslint^8.3.0eslint-config-react-app^7.0.1eslint-webpack-plugin^3.1.1file-loader^6.2.0fs-extra^10.0.0html-webpack-plugin^5.5.0identity-obj-proxy^3.0.0jest^27.4.3jest-enzyme^7.1.2jest-resolve^27.4.2jest-watch-typeahead^1.0.0mini-css-extract-plugin^2.4.5postcss^8.4.4postcss-flexbugs-fixes^5.0.2postcss-loader^6.2.1postcss-normalize^10.0.1postcss-preset-env^7.0.1prompts^2.4.2react^18.2.0react-app-polyfill^3.0.0react-dev-utils^12.0.1react-dom^18.2.0react-refresh^0.11.0resolve^1.20.0resolve-url-loader^4.0.0sass-loader^12.3.0semver^7.3.5source-map-loader^3.0.0style-loader^3.3.1tailwindcss^3.0.2terser-webpack-plugin^5.2.5web-vitals^2.1.4webpack^5.64.4webpack-dev-server^4.6.0webpack-manifest-plugin^4.0.2workbox-webpack-plugin^6.4.1"
具体配置、操作和内容会有差异，“坑”也会有所不同。。。

一、Jest 前端自动化测试框架基础入门

• 一、Jest 前端自动化测试框架基础入门（一）

---

• 一、Jest 前端自动化测试框架基础入门（二）

---

• 一、Jest 前端自动化测试框架基础入门（三）

---

• 一、Jest 前端自动化测试框架基础入门（四）

二、Jest难点进阶

• 二、Jest难点进阶（一）

2.mock 深入学习

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

新建 src\lesson10\index.js

import axios from'axios'exportconstfetchData=()=>{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'})()"})awaitfetchData().then(data=>{expect(eval(data)).toEqual('123')})})

执行测试用例，成功！

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

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

exportconstfetchData=()=>{returnnewPromise((resolved, reject)=>{resolved({data:"(function(){return '123'})()"})})}

修改 src\lesson10_tests_\index.test.js（直接模拟待测试文件，调用时会自动到

__mocks__

目录下寻找，将异步变为同步）

jest.mock('../index');import{ fetchData }from"../index";test('测试 fetchData',async()=>{awaitfetchData().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()=>{awaitfetchData().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

...exportconstgetNumber=()=>{return123}

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

getNumber

）

jest.mock('../index');import{ fetchData }from"../index";const{ getNumber }= jest.requireActual('../index')test('测试 fetchData',async()=>{awaitfetchData().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

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