使用Jest進行測試時，只有在資料路由器中使用useLoaderData才會出現這個標題

Question

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

Answer 1

即使在單元測試中，存取資料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();
});