西安做网站朋朋西安的网络优化公司

---

学习内容来源：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

---

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