Heim > Fragen und Antworten > Hauptteil
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.
P粉3641297442023-09-22 11:02:01
即使在单元测试中,访问数据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(); });