このパッケージには、Remix アプリケーションの一部をユニットテストする際に役立つユーティリティが含まれています。これは、コンパイラによって出力された Remix ルートモジュール/アセットマニフェストをモックし、createMemoryRouter を介してメモリ内 React Router アプリを生成することで実現されます。

これは一般的に、クリーンにモックできない Remix フック/コンポーネント (useLoaderData、useFetcher など) に依存するコンポーネント/フックをテストするために使用されます。リンクをクリックしてページをナビゲートするなど、より高度なテストにも使用できますが、そのようなテストは 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 () => {
  // ⚠️ 通常は、アプリコードからインポートするコンポーネントです
  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"));
});

使用方法
例