如何使用新的路由器挂钩测试组件？

Question

到目前为止，在单元测试中，响应路由器匹配参数作为组件的道具被检索。因此，测试一个组件，考虑一些特定的匹配，与特定的url参数，是很容易的：我们只需要精确路由器匹配的道具，因为我们想要在测试中渲染组件（我使用酶库的目的）。

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

Answer 1

在您的组件中，使用如下所示的钩子

import {useLocation} from 'react-router';

const location = useLocation()

在您的测试中，监视reactRouter对象，如下所示

import routeData from 'react-router';

const mockLocation = {
  pathname: '/welcome',
  hash: '',
  search: '',
  state: ''
}
beforeEach(() => {
  jest.spyOn(routeData, 'useLocation').mockReturnValue(mockLocation)
});

Answer 2

我查看了react路由器repo中的钩子测试，看起来您必须将组件封装在MemoryRouter和路由中。为了让我的测试顺利进行，我最终做了这样的事情：

import {Route, MemoryRouter} from 'react-router-dom';

...

const renderWithRouter = ({children}) => (
  render(
    <MemoryRouter initialEntries={['blogs/1']}>
      <Route path='blogs/:blogId'>
        {children}
      </Route>
    </MemoryRouter>
  )
)

希望有帮助！

Answer 3

编辑：按照Catalina Astengo的回答中描述的方式来做这件事的正确方法，因为它使用真正的路由器功能，只是嘲笑历史/路由状态，而不是嘲笑整个钩子。

我最终解决它的方法是使用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' }),
}));

我用开玩笑。requireActual将react路由器dom的真实部分用于除我感兴趣的模拟挂钩之外的所有内容。