本文主要是介绍vue-test-util中mock掉elementUI的$confirm弹窗及jest.spyOn和jest.fn的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
我们在使用elementUI的$confirm弹窗时经常用来删除确认,写单测的时候我们并模拟不了用户点了是或否,弹窗是在body外面的,所以使用wrapper.find在组件内也拿不到弹窗中的确定或者取消按钮,模拟真实用户点击就行不通了,单测中也没有document对象查询不了body,所以这里为了执行到点是后面的逻辑,写单测时直接将确定这一步跳过,自己mock掉这个过程,只保留确定后的删除逻辑:
组件中:
this.$confirm('确认删除吗?', '警告', {confirmButtonText: '确认',cancelButtonText: '取消',type: 'warning',}).then(() => {// 删除的逻辑});.catch(() => {});单测中:
import {shallowMount,createLocalVue,
} from '@vue/test-utils';
import ElementUI from 'element-ui';
const localVue = createLocalVue();
localVue.use(ElementUI);
// mock删除弹窗的$confirm方法
const confirm = jest.fn(() => new Promise((res) => {res();// 删除的逻辑搬到这里来,这样.then时就跳过了询问阻塞的那一步直接执行删除逻辑
}));
// 挂载到临时Vue实例的原型上,复写elementUI的$confirm,这样单测跑的时候执行的就是我们的方法了
localVue.prototype.$confirm = confirm;// API介绍: jest.fn:这个方法是一个jest全局内置对象上的一个方法,用于生成一个空函数,不传东西等同于()=>{},传了东西就是自己实现这个空函数,一般用来mock难以跑通和调用的方法,直接返回想要的结果,不用走原组件中方法的实现,帮助我们更好的写单测
// jest.spyOn:这个方法也是全局内置对象上的API,他和前者很像,spyOn更多时候用来证明一个方法是否被调用过:比如mock掉代码中console对象的log方法:
spyLog = jest.spyOn(console, 'log') // 第一个参数是方法所属的对象,第二个参数是,mock的方法名,还有第三个参数,支持代理方法的getter,setter,这里就不详述了,我自己也没用过...
// 执行你要测的逻辑后,断言是否被调用过,如果是就说明打印语句执行过了
expect(spyLog).toHaveBeenCalled();
// 很多点击事件和自定义事件等操作我们不好测,只能通过判断有没有被调用过被执行过来测
这篇关于vue-test-util中mock掉elementUI的$confirm弹窗及jest.spyOn和jest.fn的使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
