Testing using a component that uses useEffect

Question

I am trying to test a component that uses useEffect to fetch data from api, which then saves the data in useState so i can map over that data and display data.

component:

    import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import fetchContinents from "../../api/fetchContinents";

export const ContinentsList = () => {
  const [continents, setContinent] = useState();

  useEffect(() => {
    fetchContinents().then((continent) => setContinent(continent));
  }, []);

  return (
    <div className="flex justify-center items-center h-screen">
      <ul className="w-1/4 md:w-1/2">
        {continents?.data?.continents.map((continent) => {
          return (
            <Link to={`/countries/${continent.code}`}>
              <div
                key={continent.code}
                className="bg-green-700 text-white rounded-2xl text-center mx-2 my-2 py-6 hover:bg-blue-500"
              >
                {continent.name}
              </div>
            </Link>
          );
        })}
      </ul>
    </div>
  );
};

test:

import { render, screen, waitFor } from "@testing-library/react";
import "@testing-library/jest-dom";
import { ContinentsList } from "./ContinentsList";

describe("ContinentsList", () => {
  test("Renders Africa on the page", async () => {
    render(<ContinentsList />);
    const africa = screen.getByText("Africa");

    await waitFor(() => {
      expect(africa).toBeInTheDocument();
    });
  });
});

test runner output:

The components renders this on the page:

So i think the problem is the component is rendered before the useEffect finishes fetching the data and there is nothing in the DOM ad the time of assertion, I have did a bit of googling and i have added waitFor which i think i should wait a bit before assessing but it react testing library

I highly suggest you read the You Might Not Need An Effect guide from React — Mulan
– Mulan, Commented Feb 10, 2023 at 1:22

Wesley LeMahieu · Accepted Answer · 2023-02-10 01:20:37Z

3

It's always a bit confusing. I've written mine slightly differently and I believe I had the same issue:

Instead of writing this:

const africa = screen.getByText("Africa");

await waitFor(() => {
  expect(africa).toBeInTheDocument();
});

Try writing this:

await waitFor(() => screen.getByText("Africa"));

expect(screen.getByText("Africa")).toBeInTheDocument();

answered Feb 10, 2023 at 1:20

Wesley LeMahieu

2,6731 gold badge15 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

John Over a year ago

This seems to work but i had to add some extras to my test, because i am using <Link> from React Router i had this error: useHref() may be used only in the context of a <Router> component. so found this fix: render(<ContinentsList />, { wrapper: MemoryRouter }); and the test is now working

Nicholas Shanks Jul 25 at 13:12

Which is the same as await screen.getByText("Africa").waitFor(); but one fewer imports and no need for a new function argument.

Collectives™ on Stack Overflow

Testing using a component that uses useEffect

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related