Apabila menguji dengan Jest, pengepala ini hanya muncul apabila menggunakan useLoaderData dalam penghala data

Question

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.

Answer 1

Walaupun dalam ujian unit, komponen yang mengakses API data masih harus dipaparkan dalam penghala data. Dalam ujian unit, disyorkan untuk menggunakan MemoryRouter（例如：createMemoryRouter) kerana Node bukan persekitaran DOM.

Contoh:

test("Render profile list", () => {
  beforeEach(() => fetch.mockClear());

  const router = createMemoryRouter(
    [{ path: "/", element:  }],
    { initialEntries: ["/"] },
  );

  render();

  const profileList = screen.getByTestId("profiles");
  expect(profileList).toBeInTheDocument();
});