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

用户名

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

但是,在我的许多组件中,我都使用全局事件总线在组件之间进行通信并发出事件。例如,以下代码片段位于我的单个文件组件之一的创建的挂钩中。

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

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

WEBPACK于2331ms内成功编译

MOCHA测试...

[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)
});
马蒂亚斯

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

确保组件正在如上图所示调用在window对象上注册的总线后,请确保在将组件安装到测试文件中之前也添加以下内容:

import Vue from 'vue';

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Vue.js加载单个文件组件

使用Vue在单个文件组件中调用render方法

使用全局事件总线从子组件向(父)父组件发出Vue.js事件

vuejs2-如何为单个文件组件层次结构创建事件总线

依赖于全局事件总线的Vue组件的单元测试

Vue.js-在单个文件组件中使用子组件

Vue.js中的全局事件总线和通知

无法使.vue单个文件组件与NWjs一起使用

Vue 2 / Vue CLI 3:创建异步单个文件组件

重构vue单个文件组件

Laravel 5.5的Vue单个文件组件

我可以使用Vue和Vue Router CDN导入单个文件组件吗?

是否可以从单个文件组合将内容添加到全局Vue组件?

在使用dotnet new vue创建的项目中使用单个文件组件

vue-test-utils和jest:如何测试单个文件组件筛选器?

如何测试普通Vue组件(不是单个文件组件)

如何在Vue的单个文件组件中使用TypeScript?

从文件夹自动全局注册vue单个文件组件

如何使用赛普拉斯端到端快照测试来测试Vue单个文件组件

Vue单个文件组件,如何挂载多个?

Vue JS通过全局事件总线传递数据不起作用

Vue单个文件组件:从子组件打印组件元素

Jest在测试Vue单个文件组件时遇到意外令牌

处理单个文件Vue组件中的单击事件的正确方法

.vue单个文件组件中使用的基础问题

如何创建用于全局事件处理的 Vue 总线?

当组件使用事件时使用酶测试 React 组件

如何使用事件总线从不同的文件调用方法

在 Laravel 应用程序中从父组件到子组件发出 vue 事件而不使用事件总线