反应测试库和 MSW

Question

我一直在尝试对我的项目实施一些测试，但遇到了一些阻碍。

此错误：

无法找到带有文本的元素：C-3PO/i。这可能是因为文本被多个元素分解。在这种情况下，您可以为文本匹配器提供一个函数，以使您的匹配器更加灵活。

我不知道如何解决它。我应该使用另一个查询还是我遗漏了一些东西？

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

和我的组件：

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

Answer 1

请添加 screen.debug() 以查看您的实际屏幕，从中您可以考虑哪种 get 方法适合您。

我认为问题是 DOM 中没有 C-3PO/i 文本

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