如今,一个App,一个网页,一个网站需要团队的人不同协作完成
前端代码更是经过多人编写
一个项目的代码量是很庞大的
当我们遇到bug时、是不是要找很久可能也没找到
这时候、前端自动化测试就很有必要了
你可以这么理解:我们可以快速定位BUG,编写的测试有文档的作用,方便维护
首先、我们init下文件
npm init -y
然后、让我们来安装下jest
yarn add [email protected]
后面的版本号您可以任意选择
在package.json中的scripts可以配置下
"scripts": {
"test": "jest"
},
运行的时候直接
npm run test
让我们来看一段代码
index.js 正常的JS文件
module.exports = add =(a,b)=>{
return a+b
}
当我们使用jest时、需要创建一个后缀为.test.js的文件
因为jest会自动检测这种后缀名的文件
index.test.js
var add =require("./index.js")
test('测试add函数 ', () => {
expect(add(1,2)).toBe(3)
})
在这里简单的说明一下
test: 描述+执行测试片段
第一个参数是你的描述语句:例如、我要测试add函数
第二个参数是一个函数、函数里面的
expect:断言的 、里面是测试值
toBe是用来测试数字的 里面是预期值
上面的可以理解为 : 我要测试add函数的返回值是不是等于3
结果如图
这里显示,总共测试一个,一个通过
假如,我把add改为reduce、让他俩相减,这时候输出的值应该就是个错误的值
如图
当测试值不等于3、当然是失败的返回、这时、我们可以根据我们添加的信息迅速定位到出错的地方
这里还有讯息:期望值是3、但是你返回接受一个-1
这就是简单的jest一个应用
上面的是CommonJS规范、也就是相当于Node的代码
我们前端使用的ES6使用的import等导入是否有用呢
接下来看一下(我把index.js的导出和测试的导入导出换成ES6的import export,你们可以在自己代码下改一下 )
结果
这里给我标错了、证明我们不能使用ES6的语法
但是我i们在开发中、react等框架都是import导入等,所以我们需要下载插件转换一下
请往下看
安装
npm i @babel/core @babel/preset-env -D
安装完成后、需要与package.json同级目录创建.babelrc(就是.babelrc前面不要加东西)文件
配置
{
"presets": [
["@babel/preset-env",{
"targets":{
"node":"current"
}
}]
]
}
接着执行命令
功能正常
所以在项目中安装这两个插件就行了、改一下配置
关于jest的命令
你不想每次都手动执行命令、想要一个类似热更新
你可以在package.json中配置
"test": "jest --watchAll"
监听所有的文件
你也可以指定某个文件都可以
关于jest的其他匹配器我将在下面博客介绍