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-Questions et réponses sur le réseau chinois PHP

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: , children: [ { path: "/", element: , loader: profileListLoader, }, ], }, ]); const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); root.render();

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 (  {users.map((user: User) => (    ))} 
 ); }; 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 suivantuseLoaderData必须在数据路由器中使用et pointez sur la ligne de code suivanteconst 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(); 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.

test("Render profile list", () => { beforeEach(() => fetch.mockClear()); const router = createMemoryRouter( [{ path: "/", element: }], { initialEntries: ["/"] }, ); render( ); const profileList = screen.getByTestId("profiles"); expect(profileList).toBeInTheDocument(); });

répondre à tous (1)

P粉3641297442023-09-22 11:02:01 1 plancher

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'utiliserMemoryRouter（例如：createMemoryRouter) car Node n'est pas un environnement DOM.

Exemple :