Reactjs 单元测试 useLoaderData() reactrouter v6 加载器函数

发布于01月31日

一个项目使用Reaction-RouterV6，在某些组件中我称之为useLoaderData().例如:

const routes = [
    { path: "widgets", 
      loader: () => fetchAndGetJSON("/api/widgets"), 
      element: <ListWidgets/> }
];

function ListWidgets() {
    const widgets = useLoaderData();
    return <>
        <p>Here is a list of {widgets.length} widgets:
        <...>
    </>;
}

在测试时，我不想执行fetch，我想提供测试中的小部件列表.

如何使用我在测试中提供的数据为ListWidgets创建单元测试？

推荐答案

我自己还没有用过Reaction路由的数据API，但据我所知，有三种主要的替代方案.

将Jest的标准模仿功能用于mock fetch、模仿fetchAndGetJSON或类似的功能.

global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve(FAKE_TEST_DATA),
  })
);

beforeEach(() => fetch.mockClear());

将createMemoryRouter与您的路由的测试版本一起使用，该版本将呈现<ListWidgets/>与返回所需测试数据的自定义loader.

test(ListWidgets, async () => {
  const routes = [{
    path: "widgets",
    element: <ListWidgets />,
    loader: () => FAKE_TEST_DATA,
  }];

  const router = createMemoryRouter(routes, { initialEntries: ["widgets"] });

  render(<RouterProvider router={router} />);
  // ...testing...
}

使用Mock Service Worker (msw.js)创建模拟后端.在功能上，这非常类似于你自己嘲笑fetch，但MSW非常擅长精简和整合东西.

const worker = setupWorker(
  rest.get('/api/widgets', async (req, res, ctx) => {
    const { username } = await req.json();
    return res(ctx.json(FAKE_TEST_DATA))
  }),
);

worker.start();

我是msw.js的铁杆粉丝，但任何选项都应该有效.(这在某种程度上是一种取舍:覆盖loader会导致目标更窄的单元测试，而msw.js允许您编写更接近集成测试端的侵入性较小的测试.)