Jest是Facebook开源的一套JavaScript测试框架， 它集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具。
官方简介：一个令人愉快的javascript测试框架。 我的理解是，不用加班改bug了，可以提前下班，陪女朋友喝奶茶！
# 项目中使用
yarn init -y
yarn add --dev jest
# 或者全局安装，随时随地使用
yarn global add jest 编写以下两个js文件，控制台输入命令jest --no-cache --verbose(全局安装)，或者npx jest --no-cache --verbose（项目依赖安装），jest会搜索项目下所有测试脚本并执行输出测试结果。
// hello.js
module.exports = function(){
return "hello world";
}
// hello.test.js
const hello = require('../hello');
it('should ', () => {
expect(hello()).toBe('hello world');
});待测试文件: hello.js
测试脚本文件取名：hello.test.jsorhello.spec.js
测试目录:testsor__tests__
test("测试用列描述信息",()=>{
})
// or
it("测试用例描述信息",()=>{
})测试即运行结果是否与我们预期结果一致 断言函数用来验证结果是否正确
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'); //不解释describe("关于每个功能或某个组件的单元测试",()=>{
// 不同用例的单元测试
}){
"nocache": "jest --no-cache", //清除缓存
"watch": "jest --watchAll", //实时监听
"coverage": "jest --coverage", //生成覆盖测试文档
"verbose": "npx jest --verbose" //显示测试描述
}describe('对象测试', () => {
it("是否同一个对象", () => {
const foo = { a: 1 }
expect(foo).toBe(foo)
})
it("对象值是否相等", () => {
expect({ a: 1, foo: { b: 2 } }).toEqual({ a: 1, foo: { b: 2 } })
})
test('对象赋值', () => {
const data = { one: 1 };
data['two'] = 2;
expect(data).toEqual({ one: 1, two: 2 });
});
});异步测试脚本执行完，单元测试就结束了，如果需要延时才能断言的结果，单元测试函数需要设置done形参，在定时回调函数中调用，显示的通过单元测试已完成。
describe('异步操作测试', () => {
function foo(callback) {
console.log('foo...')
setTimeout(() => {
callback && callback();
}, 1000)
}
it('异步测试', (done) => {
function bar() {
console.log('bar..')
done();
}
foo(bar);
});
});基于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();
})
});实现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);
});
});如果你创建的项目没有安装unit-jest依赖包，可以通过vue add @vue/unit-jest命令添加。否则通过脚手架手动模式创建一个包含unit-jest的项目。
mount和shallowMount的区别
- shallowMount只挂载指定组件，不挂载子组件
- mount挂载所有组件
Vue的渲染机制 默认情况下 Vue 会异步地批量执行更新 (在下一轮 tick)，以避免不必要的 DOM 重绘或者是观察者计算
异步测试需要在nextTick()之后执行
vue组件渲染测试
it('挂载countBtn组件', () => {
const wraper = shallowMount(CountBtn);
const btn = wraper.find("button");
expect(wraper.html()).toBe(`<button>点击次数0</button>`);
});vue组件点击事件测试
it('测试countBtn组件点击', (done) => {
const wraper = shallowMount(CountBtn);
const btn = wraper.find("button");
expect(wraper.html()).toBe(`<button>点击次数0</button>`);
btn.trigger('click');
setTimeout(() => {
expect(wraper.html()).toBe(`<button>点击次数1</button>`);
done();
}, 1000);
});
it('优雅的测试点击事件', async () => {
const wraper = shallowMount(CountBtn);
const btn = wraper.find("button");
expect(wraper.html()).toBe(`<button>点击次数0</button>`);
btn.trigger('click');
await wraper.vm.$nextTick();
expect(wraper.html()).toBe(`<button>点击次数1</button>`);
});模拟异步请示，测试渲染结果是否一致
<!-- User.vue -->
<template>
<table>
<tr v-for="item in list" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table>
</template>
<script>
export default {
data() {
return {
list: []
}
},
created() {
this.$http.get('/user').then(({
data
}) => {
this.list = data
})
}
}
</script>// User.spec.js
import { mount } from '@vue/test-utils';
import User from '@/components/User';
it('测试用户组件', async() => {
const wrapper = mount(User,{
mocks:{
$http:{
get: url=>Promise.resolve({data:[{id:1,name:'xxxx',age:18},{id:2,name:'yyyy',age:19}]})
}
}
})
console.log(wrapper.html())
// 渲染前
expect(wrapper.html()).toBe('<table></table>');
await wrapper.vm.$nextTick();
// 渲染后
// console.log(wrapper.html())
// console.log(wrapper.find('tr'))
expect(wrapper.findAll('tr').length).toBe(2)
expect(wrapper.findAll('td').at(2).html()).toBe('<td>18</td>')
});github地址
demo中还包含express+restful接口的测试用例，不想用postman测试接口的同学，可以用jest来代替。
顺手点个小爱心，以示鼓励。😘😍🥰
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent