// UserProfile.tsx
function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState<User | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    fetchUser(userId)
      .then(setUser)
      .catch(() => setError('Failed to load user'))
      .finally(() => setIsLoading(false))
  }, [userId])

  if (isLoading) return <div>Loading user...</div>
  if (error) return <div role="alert">{error}</div>
  if (!user) return null

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  )
}

// UserProfile.test.tsx
import { render, screen, waitFor } from '@testing-library/react'
import { vi } from 'vitest'
import { UserProfile } from './UserProfile'
import * as api from '../api/users'

vi.mock('../api/users')

describe('UserProfile', () => {
  it('shows loading state initially', () => {
    vi.mocked(api.fetchUser).mockResolvedValue({ id: '1', name: 'Alice', email: 'alice@test.com' })
    render(<UserProfile userId="1" />)
    expect(screen.getByText('Loading user...')).toBeInTheDocument()
  })

  it('shows user data after loading', async () => {
    vi.mocked(api.fetchUser).mockResolvedValue({ id: '1', name: 'Alice', email: 'alice@test.com' })
    render(<UserProfile userId="1" />)

    await waitFor(() => {
      expect(screen.getByRole('heading', { name: 'Alice' })).toBeInTheDocument()
    })
    expect(screen.getByText('alice@test.com')).toBeInTheDocument()
  })

  it('shows error message when fetch fails', async () => {
    vi.mocked(api.fetchUser).mockRejectedValue(new Error('Network error'))
    render(<UserProfile userId="1" />)

    await waitFor(() => {
      expect(screen.getByRole('alert')).toHaveTextContent('Failed to load user')
    })
  })
})
Testing — Vitest ו-React Testing Library

Testing — Vitest ו-React Testing Library
