`@remix-run/testing`

这个包包含一些实用工具，可帮助你对 Remix 应用程序的部分内容进行单元测试。这是通过模拟编译器生成的 Remix 路由模块/资源清单，并通过 createMemoryRouter 生成一个内存中的 React Router 应用程序来实现的。

它的一般用法是测试依赖于 Remix hook/组件，但你无法干净地模拟的组件/hook（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 () => {
  // ⚠️ 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"));
});