使用React Router v6.14.2,我已經完成了設定瀏覽器路由的所有步驟
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} />);
然後,當我想在我的React元件中使用資料載入器時,程式碼如下
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;
在本地運行應用程式時,這個方法非常有效,用戶正在加載,控制台或其他地方沒有任何問題。
但是,當我嘗試執行jest測試時,我收到以下錯誤訊息
useLoaderData必須在資料路由器中使用
並且指向以下程式碼行
const users = useLoaderData();
#目前,測試非常簡單,但仍然導致測試失敗。
profile.test.js
test("Render profile list", () => { beforeEach(() => fetch.mockClear()); render(<ProfileList />); const profileList = screen.getByTestId("profiles"); expect(profileList).toBeInTheDocument(); });
我嘗試查看React Router的文檔並且嚴格按照其中的步驟進行操作。我在Stack Overflow上進行了搜索,但沒有找到與我的問題完全匹配的內容。
即使在單元測試中,存取資料API的元件仍然應該在資料路由器內渲染。在單元測試中,建議使用
MemoryRouter
(例如:createMemoryRouter
),因為Node不是一個DOM環境。範例: