测试 Vuejs EventBus

Question

我已经尝试解决这个问题一段时间了，但我无法让它工作！我在互联网上找到了一些示例，但没有解决它，每次我运行测试时都会得到：

 Expected number of calls: 1
 Received number of calls: 0

> 186 |        expect(wrapper.vm.EventBus.$on).toHaveBeenCalledTimes(1);

组件如下所示：

import {EventBus} from 'eventbus'
export default{
    data(){ return {}},
    mounted(){
        EventBus.$on('saveTerminal', function(){
             this.someOtherFunction()        
        })
    }
}

事件总线文件如下所示

import Vue from 'vue';
export const EventBus = new Vue();

测试看起来像这样：

    const GlobalPlugins = {
         install(v) {
            v.prototype.EventBus = new Vue();
         },
     };
    //Vue.prototype.EventBus = new Vue(); <-- I tried this also, didn't do anything
    
    // Mounting component
    const $t = () => {}
    const params = { localVue, store, router,
        propsData: {
            isEdit: false
        },
        data(){
            return {
                loading: false,
                tabIndex: 1
            };
        },
        mocks:{
            $t,
            EventBus: {
                $on: jest.fn(),
                $off: jest.fn(),
                $emit: jest.fn()
            }
        },
     }
    
    const wrapper = shallowMount(MyComponent, params)
   describe('My component', () => { 
       it('Event bus', () => {
           wrapper.vm.EventBus.$emit('saveTerminal');
    
           expect(wrapper.vm.EventBus.$on).toHaveBeenCalledTimes(1);
        expect(wrapper.vm.EventBus.$on).toHaveBeenCalledWith('saveTerminal', expect.any(Function))
       });
    })

Answer 1

您可以使用jest.mock() to mock the EventBus module。您的测试将require() 模块访问模拟，然后验证其$on 被调用：

import { shallowMount } from '@vue/test-utils'
import MyComponent from '@/components/MyComponent.vue'

jest.mock('@/utils/EventBus')

describe('MyComponent.vue', () => {
  it(`listens to 'saveTerminal' upon mounting`, async () => {
    const { EventBus } = require('@/utils/EventBus')
    shallowMount(MyComponent)
    expect(EventBus.$on).toHaveBeenCalledWith('saveTerminal', expect.any(Function))
  })
})

demo