Beim Testen mit Jest erscheint dieser Header nur, wenn useLoaderData im Datenrouter verwendet wird-Fragen und Antworten zum chinesischen PHP-Netzwerk

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

index.jsx

const router = createBrowserRouter([ { path: "/", element: , children: [ { path: "/", element: , loader: profileListLoader, }, ], }, ]); const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); root.render();

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 (  {users.map((user: User) => (    ))} 
 ); }; 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 FehlermeldunguseLoaderData必须在数据路由器中使用und zeigen Sie auf die folgende Codezeileconst 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(); 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.

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