前言
前端早已不在是简单的切图仔,web前端工程师也在逐渐淡出江湖。大前端的时代早已来临,面对日新月异的技术我们只能不断学习,逐个点亮技能点。
现在随处可见的单元测试,在主流框架以及UI组件中都可以见到,单元测试的优势就不言而喻了。本系列文章将带你学习前端自动化测试 jest框架 ,包括基本的配置、jest匹配器、异步代码测试、钩子函数、mock以及在vue项目中的实际应用等等,如果想继续学习后面文章,请关注我,后面会不断写完整个jest的教程
为什么选择jest?
- 零配置:在大部分项目中都可以实现开箱即用,无需配置
- 速度快:根据文件的修改进行测试,不会每次测试全部实例
- 快照功能:能够进行简单快速的测试
- 隔离性好:不同的测试文件环境独立,不会相互影响
- api简单
- mock丰富
- 等等
基本安装配置
- 创建demo文件夹
- 进入文件夹中运行
npm init
初始化一个package.json文件 - 安装jest
npm install --save-dev jest
- 在demo文件夹中新建两个文件
index.js
index.test.js
- 在
index.js
中写入代码
function sum(a, b) {
return a + b
}
module.exports = sum
效果图:
- 在
index.test.js
中写入代码(不懂没关系,后面会讲到)
const sum = require('./index')
test('测试 sum', () => {
expect(sum(1, 2)).toBe(3)
})
效果图:
- 在
package.json
中的script加入以下命令
效果图:
最后运行npm run test
即可,出现下面这样,就表示基本配置完成
不知道你们有没有发现,上面的模块导出和导入都是使用commonjs的规范,在node环境中是没有问题的,但是实际开发中我们的代码是运行在浏览器端的。因此我们需要转换成浏览器能够识别的ES6模块方法,本身jest是不支持ES6的模块方法,我们可以借用babel来实现
使用babel让jest支持ES6模块导入导出
- 安装babel模块
npm install --save-dev @babel/core @babel/preset-env
- 在demo文件夹下新建一个
.babelrc
,并写入以下代码
{
"presets":[
["@babel/preset-env", {
"targets": {
"node": "current"
}
}]
]
}
这段babel配置意思是,根据当前node环境,自动将语法转换成commonjs的语法
注: 当你运行npm run jest
的时候,jest内部有个babel-jest模块会检测是否有babel,如果有就去加载babel配置文件,然后再去测试经过babel转化后的代码
- 将
index.js
和index.test.js
内的导入导出模块代码改写成es6语法
改后的效果图:
- 运行
npm run test
,即可看见测试成功的提示
到目前为止,我们已经完成的将jest的运行环境搭建起来,并成功的支持了es6的模块语法,后面的教程基本上都是以demo的目录结构为基础,进行一些api的讲解,大家有兴趣学习后面的可以将文件保存好以备后面的教程练习
下一节,我将介绍上面我们写的代码作用,以及重点jest中匹配器部分,jest的匹配器有非常多,我这里只介绍部分在项目中会常用到的匹配器。
本人能力有限,文章可能会有不正确或者不恰当的部分,希望你可以指出