Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

351
Visualizações
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
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda