javascript / intermediate
Snippet
Prüfen von benutzerdefinierten Event-Emits und Nutzdaten in Komponenten-Unit-Tests
Das Testen von Komponentenkommunikation erfordert die Überprüfung, ob Kindkomponenten benutzerdefinierte Ereignisse mit den erwarteten Nutzdatenstrukturen emittieren. Vue Test Utils stellt die Hilfsmethode emitted() bereit, um Event-Namen, Aufrufhäufigkeiten und übergebene Parameter zu analysieren.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { mount } from '@vue/test-utils';import StatusToggle from './StatusToggle.vue';describe('StatusToggle.vue', () => {it('emits state-change event with toggled boolean payload', async () => {const wrapper = mount(StatusToggle, {props: { initialActive: false }});await wrapper.find('button.toggle-btn').trigger('click');const emittedEvents = wrapper.emitted('state-change');expect(emittedEvents).toBeDefined();expect(emittedEvents).toHaveLength(1);expect(emittedEvents[0]).toEqual([{ active: true, timestamp: expect.any(Number) }]);});});
vue
Erklärung
1
const wrapper = mount(StatusToggle, {
Rendert die Komponente in einer isolierten Testumgebung und übergibt anfängliche Test-Props.
2
await wrapper.find('button.toggle-btn').trigger('click');
Simuliert asynchron einen Benutzerklick und wartet auf DOM- sowie Reaktivitätsaktualisierungen.
3
const emittedEvents = wrapper.emitted('state-change');
Liest das Array aller übergebenen Argumente für alle Auslösungen des angegebenen benutzerdefinierten Events aus.
4
expect(emittedEvents[0]).toEqual([{ active: true, timestamp: expect.any(Number) }]);
Validiert, dass das erste ausgelöste Event ein Objekt mit dem erwarteten umgeschalteten Status und korrekten Datentypen enthält.