目标 :
搭建jest环境
编写简单测试案例
介绍jest语法|常用jest匹配器
初始化项目
npm init
安装依赖
npm install -D jest babel-jest babel-core babel-preset-env regenerator-runtime @babel/preset-env
jest jest 测试工具 ,也可以全局安装 jest 工具 npm jest -g
babel-jest babel-core babel-preset-env regenerator-runtime @babel/preset-env 为了使用 es6 语法
添加.babelrc 文件
//.babelrc
{ "presets": ["@babel/preset-env"] }
修改 package.json 中的 test 脚本
//package.json
"scripts": {
"test": "jest"
}
新建 src 文件(主要代码) test 文件(测试代码)
jest 会识别项目中 所有 .test || .spec 文件 例如 demo.tes.js demo.spec.js
测试文件在实际项目中应该与模块放到一起 , 我这里新建 test 文件夹只为了方便演示
mkdir src/util.js
mkdit src/util.test.js
src 中新增案例文件 util.js 与代码
mkdir src/util.js
// src/util.js
const sum = (a,b) => {
return a+b
}
mkdir src/util.test.js
// src/util.test.js`
import { sum } from "./util";
test("sum(2 + 2) 等于 4", () => {
expect(sum(2, 2)).toBe(4);
});
常用匹配器
expect 方法可以内置不同匹配器 , 上面的 toBe 函数就是其中一个匹配器 用于 对比返回结果断言
toBe 用于判断函数值是否符合预期
not 用于 toBe 组合使用
expect(sum(2, 2)).not.toBe(5) //true;
expect(sum(2, 2)).not.toBe(4) //false;
toEqual 与 toBe 功能一直 , 但是 toEqual 会把类型也进行对比 类似于 === 与 ==
expect(sum(2, 2)).toEqual("4") //false;
expect(sum(2, 2)).toBe("4") //true;
toHaveLength 可以很方便的用来测试字符串和数组类型的长度是否满足预期
function getArr(){
return [1,2,3,4]
}
function getStr){
return "1234"
}
expect(getArr().toHaveLength(4) //true;
expect(getStr().toHaveLength(4) //false;
toThorw 用于检查函数是否异常,必须对函数进行封装
test("异常检查", () => {
function sumTestError(){
sum()
}
expect(sumTestError().toThrow("sum函数异常"));
});
toMatch 用于对结果进行正则判断
expect(sum(2,2).toMatch(/\d/)); //true
异步断言 , 利用 expect.assertions() 函数做
function asyncFn(){
return new Promise((resolve,reject)=>{
resolve("hello world")
})
}
test('asyncFn() 异步方法测试', () => {
//异步方法前必须使用expect.assertions(1)来定义有一个异步方法
expect.assertions(1);
return asyncFn().then(data => {
expect(data).toBe('hello world');
});
})
async await 版本
function asyncFn(){
return new Promise((resolve,reject)=>{
resolve("hello world")
})
}
test('asyncFn() 异步方法测试',async () => {
//异步方法前必须使用expect.assertions(1)来定义有一个异步方法
expect.assertions(1);
const data = await asyncFn();
expect(data).toBe('hello world');
})
