`@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"));
});