我是第一次使用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] 删除。
我来说两句