Estoy implementando algunas pruebas unitarias para diferentes componentes en NextJs y react-testing-library y en algún momento debería hacer algunas pruebas para una búsqueda de inicio.

Cuando me concentro en mi entrada de texto de búsqueda, envío un mensaje a la API para recuperar algunos datos y luego mostrar los datos devueltos como un menú desplegable. Entonces, cuando se enfoca, los datos deben aparecer como un menú desplegable.

Pero recibo un error que dice Can't perform a React state update on an unmounted component cuando ejecuto mi prueba.

PD : ya me he burlado de mi respuesta API.

Así es como lo he puesto:

 const showDepartureList = useCallback(async () => { const response = await ws.sendMessage({ api: "homeSearchFlights", act: "flights", payload: { type: "init", data: {} } }); if (response && response.departure) { setDepartureList(response.departure); setShowDepartures(true); } else { setDepartureList([]); setShowDepartures(false); } return null; }, [ws, setDepartureList, setShowDepartures]); return( <StyledSearchInput data-testid="test-departure-search-input" ref={departureRef} placeholder={t("search.homeSearchPackageDeparturePlaceholder")} value={departure} onChange={handleDeparture} onFocus={showDepartureList} /> {showDepartures && <AutocompleteList data-testid="flights-departure-list"> {departureList.map( (dep, i) => <AutocompleteItem onClick={() => handleDeparture({ id: dep.Id, name: dep.Name })} key={i}>{dep.IntName} ({dep.Name})</AutocompleteItem> )} </AutocompleteList>} )

Y así es como estoy realizando la prueba.

 it("Should show the packages departure list", async () => { const homePage = render(<Wrapper {...homePageProps} />); fireEvent.click(homePage.getByTestId(/test-packages-search-tab/)); fireEvent.focus( screen.getByTestId(/test-departure-search-input/) ); await waitFor(async () => { expect(screen.getByTestId(/packages-departure-list/)).toBeInTheDocument(); }); });