このパッケージには、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"));
});

使用方法
例