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

使用法
例