javascript / intermediate
Snippet
Testen asynchroner Datenabruf-Zustände mit flushPromises in Komponententests
Beim Testen von Komponenten mit asynchronen Operationen in setup oder Lifecycle-Hooks reicht ein einfaches nextTick oft nicht aus, um alle Mikrotasks abzuarbeiten. flushPromises stellt sicher, dass alle ausstehenden Promises, HTTP-Mocks und folgenden DOM-Updates abgeschlossen sind, bevor Test-Assertions ausgeführt werden.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { mount, flushPromises } from '@vue/test-utils';import { describe, it, expect, vi } from 'vitest';import UserProfile from './UserProfile.vue';describe('UserProfile async loading', () => {it('transitions from pending skeleton to resolved user name', async () => {vi.spyOn(global, 'fetch').mockResolvedValueOnce({ok: true,json: async () => ({ id: 42, name: 'Alice' })});const wrapper = mount(UserProfile);expect(wrapper.find('[data-test="loader"]').exists()).toBe(true);await flushPromises();expect(wrapper.find('[data-test="username"]').text()).toBe('Alice');expect(wrapper.find('[data-test="loader"]').exists()).toBe(false);});});
vue
Erklärung
1
vi.spyOn(global, 'fetch').mockResolvedValueOnce({
Mockt die native globale fetch-API, um eine erfolgreiche asynchrone HTTP-Antwort zu simulieren.
2
expect(wrapper.find('[data-test="loader"]').exists()).toBe(true);
Prüft, ob der Ladeindikator angezeigt wird, solange das Promise noch aussteht.
3
await flushPromises();
Arbeitet alle Mikrotasks und ausstehenden Promises in der Event-Loop ab, bevor der finale UI-Zustand geprüft wird.