Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

346
Views
Jest Can't perform a React state update on an unmounted component

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();
    });

  });
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!