react-router - 如何使用新的 react 路由器钩子(Hook)测试组件？

Question

到目前为止，在单元测试中，react 路由匹配参数被检索为组件的 props。
因此，使用特定 url 参数来测试考虑某些特定匹配的组件很容易:我们只需要在测试中渲染组件时根据需要精确路由匹配的 Prop (我为此目的使用 enzyme 库)。

我真的很喜欢用于检索路由内容的新钩子(Hook)，但我没有找到有关如何在单元测试中使用新的 react 路由器钩子(Hook)模拟 react 路由器匹配的示例？

Answer 1

编辑 :按照 Catalina Astengo 的 answer 中描述的方式执行此操作的正确方法因为它使用真正的路由器功能，只模拟历史/路由状态，而不是模拟整个钩子(Hook)。
我最终解决它的方法是使用 jest.mock 在我的测试中模拟钩子(Hook):

// TeamPage.test.js
jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'), // use actual for all non-hook parts
  useParams: () => ({
    companyId: 'company-id1',
    teamId: 'team-id1',
  }),
  useRouteMatch: () => ({ url: '/company/company-id1/team/team-id1' }),
}));

我用 jest.requireActual将 react-router-dom 的真实部分用于除我有兴趣模拟的钩子(Hook)之外的所有内容。