javascript / expert
Snippet
Überprüfung reaktiver Array-Mutationen mittels von Vue Test Utils ausgegebener Events
Beim Testen von Vue-Komponenten, die Array-Props mutieren oder neue Array-Referenzen ausgeben, bietet Vue Test Utils die emitted()-API zur Abfanganweisung benutzerdefinierter Events. Dieses Muster überprüft die Array-Unveränderlichkeit und präzise Array-Inhalte während Interaktionstests.
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
Erklärung
1
const wrapper = mount(TaskList, { props: { initialItems: ['alpha', 'beta'] } });
Mountet die Vue-Komponente isoliert und initialisiert deren Array-Prop.
2
await wrapper.find('button.add-item').trigger('click');
Simuliert ein Benutzer-Klick-Event, das eine asynchrone Zustandsaktualisierung auslöst.
3
const emitted = wrapper.emitted('update:items');
Extrahiert emittierte Payloads für das benutzerdefinierte Event 'update:items'.
4
expect(emitted[0][0]).toEqual(['alpha', 'beta', 'gamma']);
Prüft die exakte Struktur und Elementabfolge des neu emittierten Array-Payloads.