Beim Testen mit Jest erscheint dieser Header nur, wenn useLoaderData im Datenrouter verwendet wird

Question

Mit React Router v6.14.2 habe ich alle Schritte zum Einrichten des Browser-Routings abgeschlossen

index.jsx

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        path: "/",
        element: <ProfileList />,
        loader: profileListLoader,
      },
    ],
  },
]);

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(<RouterProvider router={router} />);

Wenn ich dann den Datenlader in meiner React-Komponente verwenden möchte, lautet der Code wie folgt

profileList.jsx

const ProfileList: React.FC = () => {
  const users = useLoaderData();

  return (
    <div data-testid={"profiles"}>
      {users.map((user: User) => (
        <Link to={`/profile/${user.id}`}>
          <ProfileDetailView user={user} />
        </Link>
      ))}
    </div>
  );
};

export const profileListLoader = async () => {
  return fakeUsers as User[];
};

export default ProfileList;

Dies funktioniert perfekt, wenn die App lokal ausgeführt wird und der Benutzer ohne Probleme in der Konsole oder anderswo lädt.

Wenn ich jedoch versuche, Scherztests durchzuführen, erhalte ich die folgende Fehlermeldung useLoaderData必须在数据路由器中使用 und zeigen Sie auf die folgende Codezeile const users = useLoaderData();

Derzeit ist der Test sehr einfach, aber er führt trotzdem dazu, dass der Test fehlschlägt.

profile.test.js

test("Render profile list", () => {
  beforeEach(() => fetch.mockClear());
  render(<ProfileList />);
  const profileList = screen.getByTestId("profiles");
  expect(profileList).toBeInTheDocument();
});

Ich habe versucht, mir die Dokumentation für React Router anzusehen und habe die Schritte genau befolgt. Ich habe auf Stack Overflow gesucht, aber nichts gefunden, was genau meiner Frage entspricht.

Answer 1

即使在单元测试中，访问数据API的组件仍然应该在数据路由器内渲染。在单元测试中，建议使用MemoryRouter（例如：createMemoryRouter），因为Node不是一个DOM环境。

示例：

test("Render profile list", () => {
  beforeEach(() => fetch.mockClear());

  const router = createMemoryRouter(
    [{ path: "/", element:  }],
    { initialEntries: ["/"] },
  );

  render();

  const profileList = screen.getByTestId("profiles");
  expect(profileList).toBeInTheDocument();
});