我有一个组件,用于侦听Vue $ root实例发出的事件。
retval
我还有另一个地方代码,我正在调用该事件。
export default {
data() {
return {
name: ''
}
},
methods: {
openModal(name) {
this.name = name
}
},
mounted() {
this.$root.$on('open-modal', name => {
this.openModal(name);
});
}
}
如何在$ root上编写一个调用该事件的单元测试并声明该事件已被调用?我正在使用Vue test utils https://vue-test-utils.vuejs.org/en/,但无法找到调用该事件的方法。
我尝试了这个,但它不起作用。
this.$root.$emit('open-modal', 'some-name');
答案 0 :(得分:0)
我弄清楚出了什么问题。我正确地发出了这个事件。问题是我的组件正在使用VueRouter并在openModal方法中调用$ router.push()(我把它留在代码示例中以保持简短)。我必须在我的测试中存根VueRouter,一切正常。这是我的测试现在的样子。
import { shallow, createLocalVue } from 'vue-test-utils';
import VueRouter from 'vue-router';
import Modal from '../cw-modal.vue';
const localVue = createLocalVue();
localVue.use(VueRouter);
describe('cw-modal component', () => {
it('sets visible to true when the "open-modal" even is called with the modalName', () => {
const wrapper = shallow(Modal, {
propsData: {
cwModalName: 'my-modal'
},
localVue,
router: new VueRouter()
});
wrapper.vm.$root.$emit('open-modal', 'my-modal');
expect(wrapper.vm.$data.visible).to.equal(true);
});
}