Menggunakan React Router v6.14.2, saya telah menyelesaikan semua langkah untuk menyediakan penghalaan penyemak imbas

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} />);

Kemudian apabila saya ingin menggunakan pemuat data dalam komponen React saya, kodnya adalah seperti berikut

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;

Ini berfungsi dengan sempurna apabila menjalankan apl secara setempat dan pengguna memuatkan tanpa sebarang masalah dalam konsol atau di tempat lain.

Namun, apabila saya cuba menjalankan ujian jest, saya mendapat mesej ralat berikut useLoaderData必须在数据路由器中使用 dan tuding ke baris kod berikut const users = useLoaderData();

Pada masa ini, ujian itu sangat mudah, tetapi ia masih menyebabkan ujian itu gagal.

profile.test.js

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

Saya cuba melihat dokumentasi untuk React Router dan mengikut langkah dengan tepat. Saya telah mencari di Stack Overflow tetapi tidak menemui apa-apa yang betul-betul sepadan dengan soalan saya.