How to test components using new react router hooks?

by

Edit: The proper way of doing this the way described in Catalina Astengo’s answer as it uses the real router functionality with just the history/routing state mocked rather than mocking the entire hook.

The way I ended up solving it was by mocking the hooks in my tests using 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 to use the real parts of react-router-dom for everything except the hooks I’m interested in mocking.

More Related Contents:

  1. Alternate way for optional parameters in v6
  2. How to get query parameters in react-router v4
  3. Can I set a base route in react-router
  4. How do I add an active class to a Link from React Router?
  5. Forcing a React-Router to load a page, even if we’re already on that page
  6. getting 404 for links with create-react-app deployed to github pages
  7. Refresh previous screen on goBack()
  8. React Router: Cannot read property ‘pathname’ of undefined
  9. is there a way to set a default route with React-Router v6
  10. Nested Routes in React Router v4
  11. How to Access History Object Outside of a React Component
  12. Using Jest to test a Link from react-router v4
  13. What is a state in component of React Router?
  14. isActive style in react-router v.6
  15. Programmatically navigate using React router
  16. Component does not remount when route parameters change
  17. React.createElement: type is invalid — expected a string
  18. Programmatically navigating in React-Router v4
  19. Intercept/handle browser’s back button in React-router?
  20. React Routing works in local machine but not Heroku
  21. Multiple path names for a same component in React Router
  22. Get path params in react-router v4
  23. How to sync Redux state and url hash tag params
  24. Target Active Link when the route is active in Next.js
  25. Error: useHref() may be used only in the context of a component. It works when I directly put the url as localhost:3000/experiences
  26. React App goes blank after importing React-Router-Dom
  27. Pass object through Link in react router
  28. How to nest routes in React Router v4?
  29. Passing values through React-Router v4
  30. React Router V6 – Error: useRoutes() may be used only in the context of a component

Leave a Comment