使用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 must be used within a data router，它指向行const users = useLoaderData();
目前的测试非常简单，但这仍然导致它失败。

profile.test.js

test("Render profile list", () => {
  beforeEach(() => fetch.mockClear());
  render(<ProfileList />);
  const profileList = screen.getByTestId("profiles");
  expect(profileList).toBeInTheDocument();
});

型
我试着检查react路由器的文档并密切沿着。我已经在堆栈溢出中进行了搜索，但没有找到任何与我的问题完全匹配的内容。