Testing React Async State Fallbacks with Testing Library

import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect, vi } from 'vitest';
import { UserProfile } from './UserProfile';
 
describe('UserProfile async error boundaries', () => {
  it('renders an error message when the API rejects', async () => {
    const user = userEvent.setup();
    const mockFetch = vi.spyOn(global, 'fetch').mockRejectedValueOnce(
      new Error('Service Unavailable')
    );
 
    render(<UserProfile userId="user_123" />);
    const refreshButton = screen.getByRole('button', { name: /refresh/i });
    await user.click(refreshButton);
 
    expect(screen.getByText(/loading/i)).toBeInTheDocument();
    
    await waitFor(() => {
      expect(screen.getByRole('alert')).toHaveTextContent('Service Unavailable');
    });
 
    mockFetch.mockRestore();
  });
});