Question

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

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

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

错误消息：我知道msg的错误是指创建的挂钩（在上面的代码片段中）并突出显示该创建的挂钩中的“Event。$ on”不是函数

WEBPACK在2331ms成功编译

MOCHA测试...

[Vue警告]：config.errorHandler出错：“TypeError：Event。$ on not not not not   函数“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。

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

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

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

3 个答案: