如何使用Vue Test Utils测试Vue组件响应$root触发的事件？

Got it, let's break down why your test isn't working and fix it with a couple of practical solutions.

First, the most likely culprit is Vue's asynchronous reactivity system. When you emit the event, Vue doesn't update the component's data immediately—it batches updates for performance. Your assertion runs before the data has actually changed, which is why it fails.

Fix 1: Wait for Vue to finish updating #

Add await wrapper.vm.$nextTick() after emitting the event to give Vue time to process the reactive update:

it('sets the modal name on the open-modal event', async () => {
  const wrapper = mount(Modal);
  wrapper.vm.$root.$emit('open-modal', 'my-modal');
  
  // Wait for Vue to complete the data update
  await wrapper.vm.$nextTick();
  
  expect(wrapper.vm.name).to.equal('my-modal');
});

Fix 2: Simulate the global $root context #

If the issue persists, it's probably because when you directly mount the Modal component, its $root is the component itself—not the global Vue root instance your app uses. To replicate your app's context, create a mock root instance and pass it to the component:

import Vue from 'vue';
import { mount } from '@vue/test-utils';
import Modal from './Modal.vue';

it('sets the modal name on the open-modal event', async () => {
  // Create a mock global root instance
  const globalRoot = new Vue();
  
  const wrapper = mount(Modal, {
    // Provide the mock root to the component
    provide: {
      $root: globalRoot
    }
  });
  
  // Emit the event from the mock root
  globalRoot.$emit('open-modal', 'my-modal');
  await wrapper.vm.$nextTick();
  
  expect(wrapper.vm.name).to.equal('my-modal');
});

Bonus: Test core logic directly #

For cleaner unit tests, you can skip testing the $root event binding and test the component's internal method directly. This focuses on the core functionality without relying on external context:

it('updates the name property when openModal is called', () => {
  const wrapper = mount(Modal);
  wrapper.vm.openModal('my-modal');
  
  // No need for nextTick here since we're calling the method directly
  expect(wrapper.vm.name).to.equal('my-modal');
});

This is often a better unit testing practice because it isolates the component's logic from external dependencies like the global root instance.

内容的提问来源于stack exchange，提问作者Doug Steinberg