@remix-run/testing

@remix-run/testing

此软件包包含可帮助对 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 () => {
  // ⚠️ 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"));
});