Testen asynchroner Datenabruf-Zustände mit flushPromises in Komponententests

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);
  });
});