How do you test emitted events using Vue Test Utils?

What's really being asked

This question probes whether you treat components as black boxes and verify their public contract. In Vue, parent-child communication happens through props down and events up. The interviewer wants to see that you know how to simulate user interaction and then inspect the emitted event log rather than checking internal state. It also checks if you understand the specific shape of the data structure returned by wrapper.emitted().

The full answer

First, mount the component with mount(). Second, find the target element using wrapper.find() and simulate the user action with trigger('click'). Third, retrieve the event history. Calling wrapper.emitted() with no arguments returns an object where keys are event names and values are arrays of payload arrays. Calling wrapper.emitted('increment') filters to just that event and returns an array of arrays. Fourth, assert on the length of that array if the button was clicked multiple times. Fifth, assert on the contents of the inner arrays because each entry represents one emission and each argument passed to emit becomes an element in that inner array.

The mistakes people make

A major red flag is importing the component method and calling it directly, which skips the template and defeats the purpose of a component test. Another mistake is asserting on wrapper.vm.count or internal refs instead of wrapper.emitted(); this leaks into implementation details and makes tests brittle. Some candidates also forget that emitted('increment') returns an array of arrays, so they write expect(wrapper.emitted('increment')).toEqual([1]) instead of expect(wrapper.emitted('increment')[0]).toEqual([1]). Finally, failing to await next tick or using trigger incorrectly can lead to false negatives.

What usually comes next

The interviewer might ask how you would test an event emitted from a deeply nested child component, which leads to discussing emitted() on the parent wrapper or using stubbed children. They could also ask how to test v-model, which relies on update:modelValue events. Another angle is testing async event handlers where you must wait for promises to resolve before checking emitted(). They might also ask how you verify no event was emitted, which is done by checking that wrapper.emitted('increment') is undefined.

A concrete example

Suppose a Counter component emits an increment event with the current count. After two clicks, wrapper.emitted('increment') returns [ [1], [2] ]. To verify the first click, you write expect(wrapper.emitted('increment')[0]).toEqual([1]). To verify the second, expect(wrapper.emitted('increment')[1]).toEqual([2]). If the payload were an object like { count: 1, isEven: false }, the inner array would contain that object: expect(wrapper.emitted('increment')[0]).toEqual([{ count: 1, isEven: false }]).