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

Question

我是第一次使用 Mocha 和 Webpack 测试我的 Vue 组件，并根据 docs 进行设置。

但是，在我的许多组件中，我使用global event bus 在组件之间进行通信和发出事件。例如，以下 sn-p 在我的单个文件组件之一的 created 挂钩中。

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);

错误消息： 我知道错误消息指的是创建的钩子（在上面的代码 sn-p 中）并突出显示该创建的钩子中的“Event.$on”不是一个函数。

WEBPACK 2331ms 编译成功

摩卡测试...

[Vue 警告]：config.errorHandler 中的错误：“TypeError：Event.$on 不是 一个函数” TypeError: Event.$on 不是一个函数 在 VueComponent.created ...

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

我在所有组件中使用的全局事件总线“Event”在 /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);

Answer 2

您的全局事件总线“事件”：它是在哪里定义的？我看不到它被导入到有错误的组件的任何地方。我怀疑这是你的问题。

根据最近的 vue conf 中的一个演示文稿，当心全局事件总线是排名前五的反模式。我更喜欢一个普通的全局 javascript 对象作为全局状态存储。

Answer 3

您可以模拟您的事件总线并断言使用正确的参数在其上调用方法。

例如，在上面的场景中尝试 window.Event = { $on: sinon.spy() }。

安装后，您应该能够断言 $on 是使用正确的参数调用的。

这里是关于 Mocha 和间谍的文档。 https://github.com/mochajs/mocha/wiki/Spies

我对摩卡咖啡不太熟悉，所以我不确定我的细节是否正确。