javascript / beginner
Snippet
Testen von benutzerdefinierten Event-Emits in Vue
Interaktionstests für Komponenten prüfen mithilfe von wrapper.emitted(), ob Benutzeraktionen wie Klicks die erwarteten benutzerdefinierten Events mit der korrekten Häufigkeit auslösen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
import { mount } from '@vue/test-utils';import { expect, test } from 'vitest';import ActionButton from './ActionButton.vue';test('emits submit event upon button click', async () => {const wrapper = mount(ActionButton);await wrapper.find('button').trigger('click');expect(wrapper.emitted()).toHaveProperty('submit');expect(wrapper.emitted().submit).toHaveLength(1);});
vue
Erklärung
1
await wrapper.find('button').trigger('click');
Findet den Button im DOM und simuliert asynchron einen Mausklick des Nutzers.
2
expect(wrapper.emitted()).toHaveProperty('submit');
Überprüft, ob die Komponente ein Event mit dem Namen 'submit' ausgelöst hat.
3
expect(wrapper.emitted().submit).toHaveLength(1);
Stellt sicher, dass das 'submit'-Event während der Interaktion genau einmal ausgelöst wurde.