网站建设内部需求调查表,wordpress房产插件,哪个平台可以接推广任务,微信怎么开通微商城文章目录 一、Jest 前端自动化测试框架基础入门二、Jest难点进阶2.mock 深入学习 学习内容来源#xff1a;Jest入门到TDD/BDD双实战_前端要学的测试课 相对原教程#xff0c;我在学习开始时#xff08;2023.08#xff09;采用的是当前最新版本#xff1a;
项版本babel/co… 文章目录 一、Jest 前端自动化测试框架基础入门二、Jest难点进阶2.mock 深入学习 学习内容来源Jest入门到TDD/BDD双实战_前端要学的测试课 相对原教程我在学习开始时2023.08采用的是当前最新版本
项版本babel/core^7.16.0pmmmwh/react-refresh-webpack-plugin^0.5.3svgr/webpack^5.5.0testing-library/jest-dom^5.17.0testing-library/react^13.4.0testing-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 axiosexport const fetchData () {return axios.get(/).then(res res.data)
}新建 src\lesson10_tests_\index.test.js
import { fetchData } from ./lesson9;
import axios from axiosjest.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-apihttps://archive.jestjs.io/docs/en/24.x/jest-object 本文仅作记录 实战要点待后续专文总结敬请期待。。。
