Lors des tests avec Jest, cet en-tête n'apparaît que lors de l'utilisation de useLoaderData dans le routeur de données

Question

En utilisant React Router v6.14.2, j'ai effectué toutes les étapes pour configurer le routage du navigateur

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

Ensuite, lorsque je souhaite utiliser le chargeur de données dans mon composant React, le code est le suivant

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;

Cela fonctionne parfaitement lors de l'exécution de l'application localement et l'utilisateur charge sans aucun problème dans la console ou ailleurs.

Cependant, lorsque j'essaie d'exécuter des tests de plaisanterie, j'obtiens le message d'erreur suivant useLoaderData必须在数据路由器中使用 et pointez sur la ligne de code suivante const users = useLoaderData();

Actuellement, le test est très simple, mais il entraîne toujours l'échec du test.

profile.test.js

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

J'ai essayé de consulter la documentation de React Router et j'ai suivi exactement les étapes. J'ai cherché sur Stack Overflow mais je n'ai rien trouvé qui corresponde exactement à ma question.

Answer 1

Même dans les tests unitaires, les composants accédant à l'API de données doivent toujours être rendus dans le routeur de données. Dans les tests unitaires, il est recommandé d'utiliser MemoryRouter（例如：createMemoryRouter) car Node n'est pas un environnement DOM.

Exemple :

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

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

  render();

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