Question

我有一个组件，用于侦听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');

Answer 1

我弄清楚出了什么问题。我正确地发出了这个事件。问题是我的组件正在使用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);
  });
}

如何测试Vue组件是否响应$ root发出的事件？

1 个答案: