javascript / expert
Snippet
Auditing Reactive Array Mutations via Vue Test Utils Emitted Events
When testing Vue components that mutate array props or emit new array references, Vue Test Utils provides the emitted() API to intercept custom events. This pattern verifies array immutability and precise array contents during user interaction tests.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { mount } from '@vue/test-utils';import { describe, it, expect } from 'vitest';import TaskList from './TaskList.vue';describe('TaskList Array Mutation Auditing', () => {it('tracks ordered array insertions without mutating original state', async () => {const wrapper = mount(TaskList, { props: { initialItems: ['alpha', 'beta'] } });await wrapper.find('button.add-item').trigger('click');const emitted = wrapper.emitted('update:items');expect(emitted).toHaveLength(1);expect(emitted[0][0]).toEqual(['alpha', 'beta', 'gamma']);expect(Object.isFrozen(emitted[0][0])).toBe(false);});});
vue
Breakdown
1
const wrapper = mount(TaskList, { props: { initialItems: ['alpha', 'beta'] } });
Mounts the Vue component in isolation, initializing its array prop.
2
await wrapper.find('button.add-item').trigger('click');
Simulates a user click event that triggers an asynchronous state update.
3
const emitted = wrapper.emitted('update:items');
Extracts emitted payloads for the update:items custom event.
4
expect(emitted[0][0]).toEqual(['alpha', 'beta', 'gamma']);
Asserts the exact structure and item sequence of the newly emitted array payload.