Testing de useEffect y Side Effects

gistfile1.txt

// Component
const UserProfile = ({ userId }) => {
  const [user, setUser] = useState(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const fetchUser = async () => {
      setLoading(true)
      const response = await fetch(`/api/users/${userId}`)
      const data = await response.json()
      setUser(data)
      setLoading(false)
    }

    fetchUser()
  }, [userId])

  if (loading) return <div>Loading...</div>
  return <div>User: {user.name}</div>
}

// Test
describe('UserProfile', () => {
  it('carga usuario al montar', async () => {
    server.use(
      http.get('/api/users/:id', () => {
        return HttpResponse.json({ id: 1, name: 'John Doe' })
      })
    )

    render(<UserProfile userId={1} />)

    expect(screen.getByText(/loading/i)).toBeInTheDocument()
    expect(await screen.findByText('User: John Doe')).toBeInTheDocument()
  })

  it('recarga cuando cambia userId', async () => {
    server.use(
      http.get('/api/users/1', () => {
        return HttpResponse.json({ id: 1, name: 'John Doe' })
      }),
      http.get('/api/users/2', () => {
        return HttpResponse.json({ id: 2, name: 'Jane Smith' })
      })
    )

    const { rerender } = render(<UserProfile userId={1} />)

    expect(await screen.findByText('User: John Doe')).toBeInTheDocument()

    rerender(<UserProfile userId={2} />)

    expect(await screen.findByText('User: Jane Smith')).toBeInTheDocument()
  })
})