unit-testing - 测试使用全局事件总线的 Vue 单文件组件

Question

我第一次使用 Mocha 和 Webpack 测试我的 Vue 组件，并根据 docs 设置所有内容.

但是，在我的许多组件中，我使用 global event bus在组件之间通信和发出事件。例如，以下代码片段位于我的单个文件组件之一的创建 Hook 中。

created() {
            Event.$on("activate-edit-modal", (listing) => {
                this.isModalActive = true; // show delete modal
                this.listing = listing; // set listing as the emitted listing
            });
        },

不幸的是，当我在测试文件 (npm run test) 中运行以下测试代码时，出现以下错误。

import { mount } from '@vue/test-utils';
import editModal from '../../../src/components/admin/editModal.vue';

const wrapper = mount(editModal);
console.log(wrapper);

错误消息:我知道错误消息指的是创建的 Hook (在上面的代码片段中)并突出显示该创建的 Hook 中的“Event.$on”不是函数.

WEBPACK Compiled successfully in 2331ms

MOCHA Testing...

[Vue warn]: Error in config.errorHandler: "TypeError: Event.$on is not a function" TypeError: Event.$on is not a function at VueComponent.created ...

我应该如何测试使用全局事件总线的组件？请注意，我对测试事件总线本身不感兴趣；但是，我不知道如何继续测试出现此错误的组件的其他方面。

我在所有组件中使用的全局事件总线“事件”在/src/main.js 中声明，如下所示

import Vue from 'vue';
import App from './App.vue';
import router from "./router";
import store from "./store";

window.Event = new Vue();

let app = new Vue({
    el: '#app',
    router,
    store,
    render: h => h(App)
});

Answer 1

您正在尝试引用名为 Event 的本地事件总线。您应该调用在 window 对象上注册的总线，如下所示:window.Event.$on("activate-edit-modal"...。

在确保您的组件正在调用在窗口对象上注册的总线(如上所示)之后，请确保在将组件安装到测试文件之前添加以下内容，如下所示:

import Vue from 'vue';

window.Event = new Vue();
const wrapper = mount(adminResults);