javascript / intermediate
Snippet
Prüfen ausgelöster Komponenten-Events mit Vue Test Utils
Das Testen von Schnittstellen umfasst die Überprüfung, ob Benutzerinteraktionen erwartete benutzerdefinierte Ereignisse mit korrekten Argumenten auslösen. Vue Test Utils stellt die `emitted()`-Methode bereit, die alle während des Komponentenlebenszyklus gesendeten Events aufzeichnet. Durch das Warten auf DOM-Trigger stellen Tests sicher, dass Mikrotasks und Watches abgearbeitet werden, bevor Nutzdaten geprüft werden.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { mount } from '@vue/test-utils';import CounterButton from './CounterButton.vue';describe('CounterButton', () => {it('emits increment payload on user click', async () => {const wrapper = mount(CounterButton, {props: { step: 5 }});await wrapper.find('button').trigger('click');const emittedEvents = wrapper.emitted('increment');expect(emittedEvents).toHaveLength(1);expect(emittedEvents[0]).toEqual([5]);});});
vue
Erklärung
1
const wrapper = mount(CounterButton, {
Erstellt die Zielkomponente in einer isolierten virtuellen DOM-Umgebung mit den angegebenen initialen Props.
2
await wrapper.find('button').trigger('click');
Findet das Button-Element, simuliert ein Klick-Ereignis und wartet den nachfolgenden Reaktionszyklus ab.
3
const emittedEvents = wrapper.emitted('increment');
Liest das Array aller aufgezeichneten Aufrufe für den Event-Namen 'increment' aus.
4
expect(emittedEvents[0]).toEqual([5]);
Überprüft, ob die erste Auslösung das erwartete Array an Argumenten als Nutzdaten übergeben hat.