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

这篇具有很好参考价值的文章主要介绍了【实战】二、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.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 automatically
  automock: 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)
})