`@remix-run/testing`

此套件包含輔助您單元測試 Remix 應用程式部分內容的工具。這是透過模擬編譯器輸出的 Remix 路由模組/資源清單，並透過 createMemoryRouter 產生記憶體中的 React Router 應用程式來完成。

其一般用法是測試依賴您無法清楚模擬的 Remix Hook/元件（useLoaderData、useFetcher 等）的元件/Hook。雖然它也可以用於更進階的測試，例如點擊連結和導覽至頁面，但這些更適合透過 Cypress 或 Playwright 之類的工具進行端對端測試。

用法

若要使用 createRemixStub，請使用類似 React Router 的路由物件來定義您的路由，您可以在其中指定 path、Component、loader 等。這些基本上是模擬 Remix 應用程式中路由檔案的巢狀結構和匯出。

import { createRemixStub } from "@remix-run/testing";

const RemixStub = createRemixStub([
  {
    path: "/",
    Component: MyComponent,
    loader() {
      return json({ message: "hello" });
    },
  },
]);

然後您可以渲染 <RemixStub /> 元件並對其進行斷言。

render(<RemixStub />);
await screen.findByText("Some rendered text");

範例

這是一個完整的運作範例，使用 jest 和 React Testing Library 進行測試。

import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { createRemixStub } from "@remix-run/testing";
import {
  render,
  screen,
  waitFor,
} from "@testing-library/react";

test("renders loader data", async () => {
  // ⚠️ This would usually be a component you import from your app code
  function MyComponent() {
    const data = useLoaderData() as { message: string };
    return <p>Message: {data.message}</p>;
  }

  const RemixStub = createRemixStub([
    {
      path: "/",
      Component: MyComponent,
      loader() {
        return json({ message: "hello" });
      },
    },
  ]);

  render(<RemixStub />);

  await waitFor(() => screen.findByText("Message: hello"));
});