使用Jest進行測試時,只有在資料路由器中使用useLoaderData才會出現這個標題
P粉440453689
P粉440453689 2023-09-21 11:51:20
0
1
547

使用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上進行了搜索,但沒有找到與我的問題完全匹配的內容。

P粉440453689
P粉440453689

全部回覆(1)
P粉364129744

即使在單元測試中,存取資料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();
});
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板