I don´t understand why I'm having error "Too many re-renders. React limits the number of renders to prevent an infinite loop." when I run my test, this is where I make the request:
// 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 };
};this is my Hook Test:
//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);
| ^