`createRemixStub`

此实用程序允许你通过设置一组模拟路由来对依赖于 Remix hooks/组件的组件进行单元测试：

¥This utility allows you to unit-test your own components that rely on Remix hooks/components by setting up a mocked set of routes:

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

test("renders loader data", async () => {
  const RemixStub = createRemixStub([
    {
      path: "/",
      meta() {
        /* ... */
      },
      links() {
        /* ... */
      },
      Component: MyComponent,
      ErrorBoundary: MyErrorBoundary,
      action() {
        /* ... */
      },
      loader() {
        /* ... */
      },
    },
  ]);

  render(<RemixStub />);

  // Assert initial render
  await waitFor(() => screen.findByText("..."));

  // Click a button and assert a UI change
  user.click(screen.getByText("button text"));
  await waitFor(() => screen.findByText("..."));
});

如果你的 loader 依赖于 getLoadContext 方法，则可以通过第二个参数向 createRemixStub 提供一个存根上下文：

¥If your loaders rely on the getLoadContext method, you can provide a stubbed context via the second parameter to createRemixStub:

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

如果你需要控制初始 URL、历史记录堆栈、混合数据或未来标志，<RemixStub> 组件本身具有与 React Router 类似的属性：

¥The <RemixStub> component itself takes properties similar to React Router if you need to control the initial URL, history stack, hydration data, or future flags:

// Test the app rendered at "/2" with 2 prior history stack entries
render(
  <RemixStub
    initialEntries={["/", "/1", "/2"]}
    initialIndex={2}
  />
);

// Test the app rendered with initial loader data for the root route.  When using
// this, it's best to give your routes their own unique IDs in your route definitions
render(
  <RemixStub
    hydrationData={{
      loaderData: { root: { message: "hello" } },
    }}
  />
);

// Test the app rendered with given future flags enabled
render(<RemixStub future={{ v3_coolFeature: true }} />);