如何使用新的React Router挂钩测试组件？

Question

到目前为止，在单元测试中，反应路由器匹配参数已作为组件的道具被检索。因此，考虑具有特定url参数的特定匹配的组件的测试很容易：在渲染测试组件时，我们只需要精确地选择路由器匹配的道具即可（我为此使用了酶库）。

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

Answer 1

我查看了react-router repo 中钩子的测试，看起来您必须将组件包装在 a MemoryRouterand 中Route。我最终做了这样的事情来使我的测试工作：

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

...

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

希望有帮助！

Answer 2

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

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 3

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

我曾经使用jest.requireActualreact-router-dom的实际部分来进行除我感兴趣的钩子之外的所有操作。

Answer 4

如果您用于react-testing-library测试，您可以让这个模拟像这样工作。

jest.mock('react-router-dom', () => ({
    ...jest.requireActual('react-router-dom'),
    useLocation: () => ({ state: { email: 'school@edu.ng' } }),
}));

export const withReduxNRouter = (
    ui,
    { store = createStore(rootReducer, {}) } = {},
    {
    route = '/',
    history = createMemoryHistory({ initialEntries: [ route ] }),
    } = {}
) => {
    return {
    ...render(
        <Provider store={store}>
        <Router history={history}>{ui}</Router>
        </Provider>
    ),
    history,
    store,
    };
};

react-router-dom您应该在使用它来渲染组件之前进行模拟。我正在探索使其可重复使用的方法