react-testing-library and MSW

Question

I have been trying to implement some tests on my project, but I got some blockers.

This error:

Unable to find an element with the text: C-3PO/i. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

I don't know how to fix it. Should I use another query or I am missing something?

import { render, screen } from "@testing-library/react";
import CharacterList from "./index";
import { rest } from "msw";
import { setupServer } from "msw/node";

const server = setupServer(
  rest.get("https://swapi.dev/api/people/", (req, res, ctx) => {
    return res(
      ctx.json({ results: [{ name: "Luke Skywalker", gender: "male" }] })
    );
  })
);
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

describe("render characters", () => {
  it("should render character C-3PO when get api response", async () => {
    render(<CharacterList />);
    const character = await screen.findByText("C-3PO/i");
    expect(character).toBeInTheDocument();
  });
});

and my component:

import { NavLink } from "react-router-dom";
import { useEffect, useState } from "react";

export default function CharactersList() {
  const [data, setData] = useState(undefined);
  const [home, setHome] = useState(undefined);

  useEffect(() => {
    fetch("https://swapi.dev/api/people/")
      .then((response) => {
        if (response) {
          return response.json();
        } else {
          return Promise.reject(response);
        }
      })
      .then((data) => {
        setData(data);
      });
  }, []);

  if (data) {
    return data.results.map((item) => {
      const id = item.url.slice(29);

      return (
        <>
          <NavLink to={`/character/${id}`}>{item.name}</NavLink>
          <p>Gender: {item.gender}</p>
          <p>Home planet: {item.homeworld}</p>
        </>
      );
    });
  } else {
    return <p>Loading...</p>;
  }
}

score 0 · Answer 1 · answered Jul 07 '22 at 13:59

Please Add screen.debug() to see your actual screen, from that you can consider which get method will work to you.

I think the problem is you don't have C-3PO/i text in the DOM

 describe("render characters", () => {
  it("should render character C-3PO when get api response", async () => {
    render(<CharacterList />);
    screen.debug(); <------- ADD THIS
    const character = await screen.findByText("C-3PO/i");
    expect(character).toBeInTheDocument();
  });
});

react-testing-library and MSW

1 Answers1