免费注册域名网站,山东泰安,用dw制作影视网站怎样做,建设部网站注册人员文章目录 一、Jest 前端自动化测试框架基础入门7.异步代码的测试方法8.Jest 中的钩子函数9.钩子函数的作用域 学习内容来源#xff1a;Jest入门到TDD/BDD双实战_前端要学的测试课 相对原教程#xff0c;我在学习开始时#xff08;2023.08#xff09;采用的是当前最新版本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 前端自动化测试框架基础入门二 7.异步代码的测试方法
安装 axios
npm i axios0.19.0 -S新建 fetchData.js:
import axios from axiosexport const fetchData (fn) {axios.get(http://www.dell-lee.com/react/api/demo.json).then(res fn(res.data))
}新建单元测试文件 fetchData.test.js:
import fetchData from ./fetchData// 回调类型异步函数的测试
test(fetchData 返回结果为 { success: true }, (done) {fetchData((data) {expect(data).toEqual({success: true})// 只有当 done 函数被执行到才认为是测试用例执行结束done();})
})不使用 done 的话测试用例执行到 fetchData 之后直接就返回 pass 还有一种情况将 Promise 对象直接返回出来修改 fetchData.js:
import axios from axiosexport const fetchData () {return axios.get(http://www.dell-lee.com/react/api/demo.json)
}相应修改单元测试文件 fetchData.test.js:
import fetchData from ./fetchDatatest(fetchData 返回结果为 Promise: { success: true }, () {return fetchData().then((res) {expect(res.data).toEqual({success: true})})
})若是想要单独测试 404可以修改为如下
import fetchData from ./fetchDatatest(fetchData 返回结果为 404, () {expect.assertions(1) // 下面的 expect 至少执行一个return fetchData().catch((e) {expect(e.toString().indexOf(404) -1).toBe(true)})
})若是不使用 expect.assertions 当测试 接口访问成功没走 catch 时相当于啥也没有执行也会通过加上后若是接口访问成功会报错Expected one assertion to be called but received zero assertion calls. 还有可以使用 expect 自带的函数识别结果
test(fetchData 返回结果为 Promise: { success: true }, () {return expect(fetchData()).resolves.toMatchObject({data: {success: true}})
})test(fetchData 返回结果为 404, () {return expect(fetchData()).rejects.toThrow()
})除了使用 return 还可以使用 async…await 的语法
test(fetchData 返回结果为 Promise: { success: true }, async () {await expect(fetchData()).resolves.toMatchObject({data: {success: true}})
})test(fetchData 返回结果为 404, async () {await expect(fetchData()).rejects.toThrow()
})还可以使用 async…await 先拿到响应结果再判断
test(fetchData 返回结果为 Promise: { success: true }, async () {const res await fetchData()expect(res.data).toEqual({success: true})
})test(fetchData 返回结果为 404, async () {expect.assertions(1) // 下面的 expect 至少执行一个try {await fetchData()} catch (e) {expect(e.toString()).toEqual(Error: Request failed with status code 404.)}
})8.Jest 中的钩子函数
Jest 中的钩子函数指的是在 Jest 执行过程中到某一特定时刻被自动调用的函数类似 Vue/React 中的生命周期函数
新建 Counter.js
export default class Counter {constructor() {this.number 0}addOne() {this.number 1}minusOne() {this.number - 1}
}新建 Counter.test.js
import Counter from ./Counter;describe(测试 Counter, () {const counter new Counter();test(测试 addOne 方法, () {counter.addOne()expect(counter.number).toBe(1)})test(测试 minusOne 方法, () {counter.minusOne()expect(counter.number).toBe(0)})
})运行测试用例直接通过但是两个测试用例共用了一个实例 counter相互之间有影响这显然是不可以的可以引入 Jest 的 钩子函数来做预处理
修改 Counter.test.js
import Counter from ./Counter;describe(测试 Counter, () {let counter nullbeforeAll(() {console.log(beforeAll)})beforeEach(() {console.log(beforeEach)counter new Counter();})afterEach(() {console.log(afterEach)// counter null})afterAll(() {console.log(afterAll)})test(测试 addOne 方法, () {console.log(测试 addOne )counter.addOne()expect(counter.number).toBe(1)})test(测试 minusOne 方法, () {console.log(测试 minusOne )counter.minusOne()expect(counter.number).toBe(-1)})
})这样就不会相互之间产生影响了
编辑 Counter.js 新增两个方法
export default class Counter {constructor() {this.number 0}addOne() {this.number 1}addTwo() {this.number 2}minusOne() {this.number - 1}minusTwo() {this.number - 2}
}这时候测试文件怎么写呢很显然功能有分类可以使用 describe
编辑 Counter.test.js
import Counter from ./Counter;describe(测试 Counter, () {let counter nullbeforeAll(() {console.log(beforeAll)})beforeEach(() {console.log(beforeEach)counter new Counter();})afterEach(() {console.log(afterEach)// counter null})afterAll(() {console.log(afterAll)})describe(测试“增加”相关的方法, () {test(测试 addOne 方法, () {console.log(测试 addOne )counter.addOne()expect(counter.number).toBe(1)})test(测试 addTwo 方法, () {console.log(测试 addTwo )counter.addTwo()expect(counter.number).toBe(2)})})describe(测试“减少”相关的方法, () {test(测试 minusOne 方法, () {console.log(测试 minusOne )counter.minusOne()expect(counter.number).toBe(-1)})test(测试 minusTwo 方法, () {console.log(测试 minusTwo )counter.minusTwo()expect(counter.number).toBe(-2)})})
})测试日志如下
测试 Counter测试“增加”相关的方法√ 测试 addOne 方法 (6ms)√ 测试 addTwo 方法 (4ms)测试“减少”相关的方法√ 测试 minusOne 方法 (4ms)√ 测试 minusTwo 方法 (4ms)console.log Counter.test.js:8beforeAllconsole.log Counter.test.js:12beforeEachconsole.log Counter.test.js:27测试 addOneconsole.log Counter.test.js:17afterEachconsole.log Counter.test.js:12beforeEachconsole.log Counter.test.js:32测试 addTwoconsole.log Counter.test.js:17afterEachconsole.log Counter.test.js:12beforeEachconsole.log Counter.test.js:41测试 minusOneconsole.log Counter.test.js:17afterEachconsole.log Counter.test.js:12beforeEachconsole.log Counter.test.js:46测试 minusTwoconsole.log Counter.test.js:17afterEachconsole.log Counter.test.js:22afterAllTest Suites: 1 passed, 1 total
Tests: 4 passed, 4 total
Snapshots: 0 total
Time: 4.411s9.钩子函数的作用域
每一个 describe 都可以有自己的 beforeAll、afterAll、beforeEach、afterEach执行顺序是从外往内。
外部的钩子函数可以对当前 describe 所有的测试用例起作用而内部的只对内部的测试用例起作用这就是钩子函数的作用域。
可以自行编写尝试这里就不再赘述了。
还有一个单元测试小技巧test 使用 only 修饰符可以让单元测试只运行这一个测试用例
test.only(, () {})注意代码执行顺序中最先执行的是不包含在任何测试用例和钩子函数中的语句直接暴露在各个 describe 内部最外层的语句且只执行一次后续才是测试用例和钩子函数的执行。 本文仅作记录 实战要点待后续专文总结敬请期待。。。
