Testing Asynchronous React Component Data Fetching

import React from 'react';
import { render, screen } from '@testing-library/react';
import { UserProfile } from './UserProfile';
 
describe('UserProfile Async Component', () => {
  it('renders loading state and then resolves async user data', async () => {
    const mockFetch = jest.spyOn(global, 'fetch').mockResolvedValueOnce({
      ok: true,
      json: async () => ({ id: 101, name: 'Alice Developer' }),
    });
 
    render(<UserProfile userId={101} />);
 
    expect(screen.getByText(/loading/i)).toBeInTheDocument();
 
    const resolvedHeading = await screen.findByRole('heading', {
      name: 'Alice Developer',
    });
    expect(resolvedHeading).toBeInTheDocument();
 
    mockFetch.mockRestore();
  });
});