CODEWITHSUNDEEP
reactjsjestjsreact-testing-library
Lucas Fernando
Lucas Fernando

Reputation: 53

An update to BrowserRouter inside a test was not wrapped in act

I'm trying to implement my first tests in react with react-test-library, but I came across this certain problem where there's warning that my component is not wrapped in act(..) enter image description here

down below is the test that I'm trying to implement


import { BrowserRouter as Router } from "react-router-dom";
  beforeEach(() => {
    container = render(
      <Router>
        <Search />
      </Router>
    );
  });
  it("handleClick", async () => {
    const button = container.getByText("Search");
    const event = fireEvent.click(button);
    expect(event).toBeTruthy();
  });

and Here is the function that I'm trying to test

  const handleClick = async () => {
    setLoading(true);
    const data = await movieAPI.fetchMovieByTitle(movie);
    setLoading(false);
    navigate(`/movie/${data.Title}`, { state: data });
  };

Upvotes: 2

Views: 536

Answers (1)

Lucas Fernando
Lucas Fernando

Reputation: 53

Turns out that before doing the assertions we need to wait for the component update to fully complete with waitFor

  it("should render spinner", async () => {
    const button = container.getByText("Search");
    const event = await fireEvent.click(button);
    const spinner = container.getByTestId("spinner");
    await waitFor(() => {
      expect(spinner).toBeInTheDocument();
    });
  });

Upvotes: 1

Related Questions