概述
使用faceBook公司开发的jest库写点自己ui库的测试用例。
使用
1、安装
npm install --save-dev jest
or
yarn add --dev jest
2、如何写测试文件
测试文件目录:tests
or__tests__
测试脚本文件取名:sum.test.js
待测试文件: sum.js
3、运行
将如下代码添加到 package.json
中:
{
"scripts": {
"test": "jest"
}
}
最后,运行 yarn test
或者 npm test
,Jest 将输出如下信息
jest教程
1、测试函数
test("测试用列描述信息",()=>{
})
// or
it("测试用例描述信息",()=>{
})
2、断言函数
运行结果与我们预期结果是否一致 断言函数用来验证结果是否正确
全部断言函数
exspect(运行结果).toBe(期望的结果);
//常见断言方法
expect({a:1}).toBe({a:1})//判断两个对象是否相等
expect(1).not.toBe(2)//判断不等
expect({ a: 1, foo: { b: 2 } }).toEqual({ a: 1, foo: { b: 2 } })
expect(n).toBeNull(); //判断是否为null
expect(n).toBeUndefined(); //判断是否为undefined
expect(n).toBeDefined(); //判断结果与toBeUndefined相反
expect(n).toBeTruthy(); //判断结果为true
expect(n).toBeFalsy(); //判断结果为false
expect(value).toBeGreaterThan(3); //大于3
expect(value).toBeGreaterThanOrEqual(3.5); //大于等于3.5
expect(value).toBeLessThan(5); //小于5
expect(value).toBeLessThanOrEqual(4.5); //小于等于4.5
expect(value).toBeCloseTo(0.3); // 浮点数判断相等
expect('Christoph').toMatch(/stop/); //正则表达式判断
expect(['one','two']).toContain('one'); //包含
3、分组函数
在antd的每个组件里面都有一个单独的分组函数
describe("关于每个功能或某个组件的单元测试",()=>{
// 不同用例的单元测试
})
4、 异步测试
基于jest提供的两个方法jest.useFakeTimers
和jest.runAllTimers
可以更优雅的对延时功能的测试。
describe('定时器相关测试', () => {
// 开启定时函数模拟
jest.useFakeTimers();
function foo(callback) {
console.log('foo...')
setTimeout(() => {
callback && callback();
}, 1000)
}
it('断言异步测试', () => {
//创建mock函数,用于断言函数被执行或是执行次数的判断
const callback = jest.fn();
foo(callback);
expect(callback).not.toBeCalled();
//快进,使所有定时器回调
jest.runAllTimers();
expect(callback).toBeCalled();
})
});
还可以使用async await
describe('定时器相关测试', () => {
function fetchData(v){
return new Promise((resolve,reject) => {
resolve(v)
})
}
test('the data is peanut butter', async () => {
const data = await fetchData();
expect(data).toBe('peanut butter');
});
test('the fetch fails with an error', async () => {
expect.assertions(1);
try {
await fetchData();
} catch (e) {
expect(e).toMatch('error');
}
});
}
\
5、Dom测试
实现dom渲染测试,以及点击事件等交互功能测试。
describe('Dom测试', () => {
it('测试按钮是否被渲染 ', () => {
document.body.innerHTML = `
<div>
<button id='btn'>小按钮</button>
</div> `
console.log(document.getElementById('btn'), document.getElementById('btn').toString())
expect(document.getElementById('btn')).not.toBeNull();
expect(document.getElementById('btn').toString()).toBe("[object HTMLButtonElement]");
});
it('测试点击事件', () => {
const onclick = jest.fn();
document.body.innerHTML = `
<div>
<button id='btn'>小按钮</button>
</div> `
const btn = document.getElementById('btn');
expect(onclick).not.toBeCalled();
btn.onclick = onclick;
btn.click();
expect(onclick).toBeCalled();
expect(onclick).toHaveBeenCalledTimes(1);
btn.click();
btn.click();
expect(onclick).toHaveBeenCalledTimes(3);
});
});