到目前为止,在单元测试中,React 路由器匹配参数被检索为组件的 props。
因此,考虑某些特定匹配和特定 url 参数来测试组件很容易:我们只需在测试中渲染组件时按照我们想要的方式精确匹配路由器匹配的 props(我为此目的使用酶库)。
我真的很喜欢用于检索路由内容的新钩子,但我没有找到有关如何使用新的反应路由器钩子在单元测试中模拟反应路由器匹配的示例?
Edit: The proper这样做的方式是 Catalina Astengo 中描述的answer https://stackoverflow.com/a/58206121/917750因为它使用真正的路由器功能,仅模拟历史/路由状态,而不是模拟整个钩子。
我最终解决这个问题的方法是使用 jest.mock 模拟测试中的钩子:
// 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' }),
}));
I use jest.requireActual
使用react-router-dom的真实部分来处理除了我感兴趣的钩子之外的所有内容。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)