自动化测试工具Jest的使用(持续更新)

入门

官方文档

安装

npm init -y
npm i @babel/core @babel/preset-env  [email protected] -D

配置

//添加.babelrc
    {
"presets":[
    ["@babel/preset-env",{
        "targets":{
            "node":"current"
        }
    }]
]
}
//package.json添加
"scripts":{
    "test":"jest --watchAll"
}

编码

// 根目录添加 index.js
export const add = (a, b) => {
  return a + b;
};

export const reduce = (a, b) => {
  return a - b;
};


// 根目录添加 index.test.js
import { add, reduce } from "./index";

test("测试add函数", () => {
  expect(add(1, 2)).toBe(3);
});

test("测试reduce函数", () => {
  expect(reduce(3, 1)).toBe(2);
});
运行 jest的时候 jest会自动检测到你后缀名为 .test.js的文件

运行

npm run test

结果

自动化测试工具Jest的使用(持续更新)_第1张图片

Jest里面常用的匹配器

test(描述 ,执行测试片段)
import { add, reduce } from "./index";  
​  
// toBe 数字  
test("测试add函数", () \=> {  
 expect(add(1, 2)).toBe(3);  
});  
​  
test("测试reduce函数", () \=> {  
 expect(reduce(3, 2)).toBe(1);  
});  
​  
// toEqual:测试对象中的值是否与测试结果一致  
test("测试对象中的值是否与测试结果一致", () \=> {  
 expect({ a: 1 }).toEqual({ a: 1 });  
});  
​  
// toHaveLength:判断字符串或者数组的长度  
test("判断字符串或者数组的长度", () \=> {  
 expect(\[1, 2, 3, 4, 5, 6, 7\]).toHaveLength(7);  
});  
​  
// toMatch:值是一个正则表达式 匹配字符串中是否存在某个字符  
test("匹配字符串中是否存在某个字符", () \=> {  
 expect("qwertyui").toMatch("qwe");  
});  
​  
//测试值是否为null  
test("测试toBeNull", () \=> {  
 var n \= null;  
 expect(n).toBeNull();  
});  
​  
//测试值是否为undefined  
test("测试toBeUndefined", () \=> {  
 var a \= undefined;  
 expect(a).toBeUndefined();  
});  
​  
// only 跳过其他测试用例 只测试当前这个用例  
test.only("测试toBeDefined",()\=>{  
 var a \= "";  
 expect(a).toBeDefined();  
})  
​  
//测试值是否为true  
test("测试toBeTruthy", () \=> {  
 var flag \= true;  
 expect(flag).toBeTruthy();  
});  
​  
//测试值是否为false  
test("测试toBeFalsy", () \=> {  
 expect(false).toBeFalsy();  
});  
​  
//测试数组中是否存在某个值  
test("toContain", () \=> {  
 var arr \= \[10, 20, 30, 40\];  
 expect(arr).toContain(10);  
});  
​  
//测试浮点数  
test("toBeCloseTo", () \=> {  
 var n \= 0.1;  
 var m \= 0.2;  
 // toBe(0.3)将报错因为,二进制计算的原因  
 expect(n + m).toBeCloseTo(0.3);  
});  
​  
//测试值要大于等于预期值  
test("toBeGreaterThanOrEqual", () \=> {  
 expect(10).toBeGreaterThanOrEqual(10);  
});  
​  
//测试值要小于等于预期值  
test("toBeLessThanOrEqual", () \=> {  
 expect(9).toBeLessThanOrEqual(9);  
});  
​  
//测试值要大于预期值  
test("toBeGreaterThan", () \=> {  
 expect(10).toBeGreaterThan(9);  
});  
​  
//测试值要小于预期值  
test("toBeLessThan", () \=> {  
 expect(8).toBeLessThan(9);  
});  
​  
//检测当前方法中是否抛出异常  
test("toThrow", () \=> {  
 expect(fn).toThrow();  
});  
​  
/\*\*\*\*\*\*\*\*\*测试异步代码\*\*\*\*\*\*\*\*\*\*\* \*/  
// axios请求  
import { fetchData } from "./index.js";  
//基于promise  
test("测试异步代码", () \=> {  
 return fetchData().then(data \=> {  
 expect(data.data).toEqual({ success: true });  
 });  
});  
​  
// async await  
test("测试异步代码", async () \=> {  
 var data \= await fetchData();  
 expect(data.data).toEqual({ success: true });  
});  
​  
// 测试对的  
test("异步测试", () \=> {  
 return expect(fetchData()).resolves.toMatchObject({  
 data: {  
 success: true  
 }  
 });  
});  
​  
// 测试错的  
test("异步测试失败", () \=> {  
 return expect(fetchData()).rejects.toThrow();  
});  
​  
// 推荐  
test("测试异步代码", async () \=> {  
 var data \= await fetchData();  
 expect(data.data).toMatchObject({ success: true });  
});  

你可能感兴趣的:(jest,前端,ces)