前端自动化测试 --Jest基础1

如今，一个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的其他匹配器我将在下面博客介绍