javascript / beginner
Snippet
Auslösen von Button-Klick-Events mit Vue Test Utils
Komponenten-Unit-Tests überprüfen, ob Benutzerinteraktionen die erwarteten Events auslösen. Die trigger()-Methode von Vue Test Utils simuliert Klicks asynchron, sodass anschließend überprüfende Assertions auf die Liste der emittierten Events ausgeführt werden können.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
import { mount } from '@vue/test-utils';import CounterButton from './CounterButton.vue';import { test, expect } from 'vitest';test('emits increment event on button click', async () => {const wrapper = mount(CounterButton);const button = wrapper.find('button');await button.trigger('click');expect(wrapper.emitted()).toHaveProperty('increment');});
vue
Erklärung
1
const wrapper = mount(CounterButton);
Mountet die Ziel-Vue-Komponente in einen isolierten Test-Wrapper.
2
await button.trigger('click');
Simuliert ein Klick-Event und wartet auf DOM- und Reaktivitäts-Updates.
3
expect(wrapper.emitted()).toHaveProperty('increment');
Prüft, ob die Komponente das benutzerdefinierte Event 'increment' erfolgreich ausgelöst hat.