活动网站推广方案,适合夜间看的直播app大全,苏州制作网页哪家好,网站维护外包文章目录 一、Jest 前端自动化测试框架基础入门5.Jest 中的匹配器toBe 匹配器toEqual匹配器toBeNull匹配器toBeUndefined匹配器和toBeDefined匹配器toBeTruthy匹配器toBeFalsy匹配器数字相关的匹配器字符串相关的匹配器数组相关的匹配器异常情况的匹配器 6.Jest 命令行工具的使… 文章目录 一、Jest 前端自动化测试框架基础入门5.Jest 中的匹配器toBe 匹配器toEqual匹配器toBeNull匹配器toBeUndefined匹配器和toBeDefined匹配器toBeTruthy匹配器toBeFalsy匹配器数字相关的匹配器字符串相关的匹配器数组相关的匹配器异常情况的匹配器 6.Jest 命令行工具的使用模式 f模式 o模式 t模式 p 学习内容来源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 前端自动化测试框架基础入门上 5.Jest 中的匹配器
什么是匹配器呢在之前的案例中toBe就是一个最基本的匹配器
toBe 匹配器
toBe 匹配器类似于 Object.is 或者 精确相等。
test(测试toBe, () {expect(10).toBe(10); // passed
});test(测试toBe, () {const a {one: 1}expect(a).toBe( {one: 1}); // failed,因为两个对象的地址是不一样的
});toEqual匹配器
测试对象的内容是否相等不比较对象的地址只关心对象的内容是否一致递归检查对象或数组的每个字段。
test(测试toEqual, () {const a {one: 1}expect(a).toEqual( {one: 1}); // passed
});toBeNull匹配器
测试某个变量是否为null如果是则Passed否则failed
test(测试toBeNull, () {const a nullexpect(a).toBeNull(); // passed
});toBeUndefined匹配器和toBeDefined匹配器
测试某个变量是否未定义如果是则Passed否则failed
test(测试toBeUndefined, () {const a undefined;expect(a).toBeUndefined(); // passed
});test(测试toBeUndefined, () {const a ;expect(a).toBeUndefined(); // failed
});test(测试toBeUndefined, () {const a null;expect(a).toBeUndefined(); // failed
});
test(测试toBeDefined, () {const a null;expect(a).toBeDefined(); // passed
});test(测试toBeDefined, () {const a undefined;expect(a).toBeDefined(); // failed
});
toBeTruthy匹配器
测试某个变量是否为真如果是则Passed否则failed
test(测试toBeTruthy, () {const a undefined;expect(a).toBeTruthy(); // undefined 视为false
});test(测试toBeTruthy, () {const a null;expect(a).toBeTruthy(); // null视为false
});test(测试toBeTruthy, () {const a 0;expect(a).toBeTruthy(); // 0 视为false
});test(测试toBeTruthy, () {const a 1;expect(a).toBeTruthy(); // 1 视为true
});toBeFalsy匹配器
测试某个变量是否为假如果是则Passed否则failed
test(测试toBeFalsy, () {const a 1;expect(a).toBeFalsy(); // failed因为1 视为true
});test(测试toBeFalsy, () {const a undefined;expect(a).toBeFalsy(); // passed因为undefined 视为false
});test(测试toBeFalsy, () {const a null;expect(a).toBeFalsy(); // passed因为null 视为false
});test(测试toBeFalsy, () {const a 0;expect(a).toBeFalsy(); // passed因为0 视为false
});
test(测试toBeFalsy, () {const a 0;expect(a).not.toBeFalsy(); // failed因为0 视为false,但是匹配器要的是真
});数字相关的匹配器
test(测试toBeGreaterThan, () {const count 10;expect(count).toBeGreaterThan(9); // passed表示希望count这个变量的值比9大
});test(测试toBeLessThan, () {const count 10;expect(count).toBeLessThan(9); // failed表示希望count这个变量的值比9小
});test(测试toBeGreaterThanOrEqual, () {const count 9;expect(count).toBeGreaterThanOrEqual(9); // passed表示希望count这个变量的值大于等于9
});test(测试toBeLessThanOrEqual, () {const count 9;expect(count).toBeLessThanOrEqual(9); // passed表示希望count这个变量的值小于等于9
});test(测试toBeCloseTo, () {const firstNumber 0.1;const secondNumber 0.2;expect(firstNumber secondNumber).toEqual(0.3); // 结果是failed因为js计算浮点数的时expect(value).toBe(0.3); // 这句会报错因为浮点数有舍入误差候有可能会溢出或者说不准确这种情况下最好用toBeCloseTo
});test(测试toBeCloseTo, () {const firstNumber 0.3;const secondNumber 0.4;expect(firstNumber secondNumber).toBeCloseTo(0.7); // passed
});字符串相关的匹配器
test(测试toMatch, () {const str www.baidu.com;expect(str).toMatch(baidu); // passed, 表示str字符串中是否包含baidu这个字符串是返回passedexpect(str).toMatch(/baidu/); //passed这里还可以写正则表达式
});数组相关的匹配器
test(测试toContain, () {const arr [dee, lee];expect(arr).toContain(dee); // passed, 表示arr数组中是否包含dee这个字符串元素是返回passed
});test(测试toContain, () {const arr [dee, lee];const data new Set(arr);expect(data).toContain(dee); // passed, 表示arr数组中是否包含dee这个字符串元素是返回passed
});异常情况的匹配器
const throwNewErrorFunc () {throw new Error(this is a new error);
}test(测试toThrow, () {expect(throwNewErrorFunc).toThrow(); // passed, 表示希望throwNewErrorFunc这个方法运行的时候能够抛出一个异常
});test(测试toThrow, () {expect(throwNewErrorFunc).not.toThrow(); // failed, 表示希望throwNewErrorFunc这个方法运行的时候不能够抛出异常
});test(测试toThrow, () {expect(throwNewErrorFunc).toThrow(this is a new error); // passed, 表示希望throwNewErrorFunc这个方法运行的时候能够抛出一个异常并且内容是this is a new errorexpect(throwNewErrorFunc).toThrow(/this is a new error/); // 也可以是正则表达式
});更多的匹配器可以查看Jest官网 匹配器的使用 · JestExpect 断言 · Jest 6.Jest 命令行工具的使用
Ctrl Shift P 打开 vscode 的命令窗口输入
install code command会显示如下 直接点击code 命令会添加到系统 path 中
这样在随便一个命令行窗口输入 code 就可以打开 vscode输入 code filePath/directoryPath 即可在 vscode 中打开对应文件或目录 目前在 windows 中安装 vscode 过程中该命令会自动添加到 path 中 接下来这节内容便是和这命令行有关啦
运行 npm run test 之后jest 会运行所有测试用例最后会显示这样一句
Watch Usage: Press w to show more.输入 w 后显示
Watch Usage› Press f to run only failed tests.› Press o to only run tests related to changed files. › Press p to filter by a filename regex pattern.› Press t to filter by a test name regex pattern.› Press q to quit watch mode.› Press Enter to trigger a test run.模式 f
在修改测试用例所在文件后只运行上一次失败了的测试用例其他跳过skip PS若是上一次运行成功后面再改动也不会自动运行 模式 o
只运行与修改文件相关联的测试用例 需要借助 git 来获取文件变动记录否则会报错 安装 git项目根目录运行 git init 初始化一个 git 仓库运行 git add . 将项目下的所有文件添加到 git 仓库运行 git commit -m version 1 将文件变化提交并做备注到了这一步就已经满足 o 模式的运行条件啦运行 git push 将已提交的文件变动推送到线上 git 仓库 之前配置 package.jsontest: jest --watchAll 默认会进入 a 模式配置为 --watch 则会默认进入 o 模式
{...scripts: {test: jest --watch},...
}模式 t
通过正则表达式过滤只运行通过过滤的测试用例
模式 p
类似模式 t 通过正则表达式过滤只运行通过过滤的测试文件 q : 退出监听模式 本文仅作记录 实战要点待后续专文总结敬请期待。。。
