I am implementing some unit tests for different components on NextJs and react-testing-library and at some point I should do some tests to a home search.
When I focus on my search text input, I'm sending a message to the API to retrieve some data and then show the returned data as a dropdown. So, when focus, data should appear as a dropdown.
But I get an error that says Can't perform a React state update on an unmounted component when I run my test.
PS: I have already mocked my API response.
That's how I've put it :
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>}
)
And that's how I'm performing the test
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();
});
});