No entiendo por qué tengo el error "Demasiados renderizados. React limita la cantidad de renderizados para evitar un bucle infinito". cuando ejecuto mi prueba, aquí es donde hago la solicitud:
// usePokemon.js export const usePokemon = (pokemonName) => { const [pokemon, setPokemon] = useState(null); const [error, setError] = useState(null); const [isLoading, SetIsLoading] = useState(true); useEffect(() => { async function fetchPokemon() { SetIsLoading(true); try { let namePokemon = pokemonName.toLocaleLowerCase(); const response = await fetch( `https://pokeapi.co/api/v2/pokemon/${namePokemon}` ); const json = await response.json(); setPokemon(json); } catch (err) { setError(err); } SetIsLoading(false); } fetchPokemon(); }, [pokemonName]); return { pokemon, error, isLoading }; };esta es mi prueba de gancho:
//usePokemon.test.js import { act, renderHook } from "@testing-library/react-hooks"; import { usePokemon } from "./usePokemon"; const getControlledPromise = () => { let deferred; const promise = new Promise((resolve, reject) => { deferred = { resolve, reject }; }); return { deferred, promise }; }; describe("Success test", () => { test("handles loading state correctly", async () => { const { deferred, promise } = getControlledPromise(); global.fetch = jest.fn(() => promise); const { result, waitForNextUpdate } = renderHook(usePokemon); expect(result.current.isLoading).toBe(true); deferred.resolve(); await waitForNextUpdate(); expect(result.current.isLoading).toBe(false); }); }); Too many re-renders. React limits the number of renders to prevent an infinite loop. 31 | global.fetch = jest.fn(() => promise); 32 | > 33 | const { result, waitForNextUpdate } = renderHook(usePokemon); | ^