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

Question

我有一个组件可以监听 Vue $root 实例发出的事件。

export default {
   data() {
     return {
       name: ''
     }

   },
   methods: {
     openModal(name) {
       this.name = name
     }
   },
   mounted() {
     this.$root.$on('open-modal', name => {
       this.openModal(name);
     });
   }
 }

我还有另一个地方是我调用该事件的代码。

this.$root.$emit('open-modal', 'some-name');

如何编写一个在 $root 上调用该事件并断言该事件已被调用的单元测试？我正在使用 Vue 测试工具https://vue-test-utils.vuejs.org/en/并且找不到调用事件的方法。

我试过这个，但它不起作用。

it('sets the modal name on the open-modal event', () => {
    const wrapper = mount(Modal);
    wrapper.vm.$root.$emit('open-modal', 'my-modal')
    expect(wrapper.vm.$data.name).to.equal('my-modal');
  });

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