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();
// 很多点击事件和自定义事件等操作我们不好测,只能通过判断有没有被调用过被执行过来测