'Testing custom hook with useRouteMatch with createMemoryHistory

I've been having no problem testing most of my custom hooks using "@testing-library/react-hooks". The custom hooks that use React Router hooks also work fine, using createMemoryHistory:

const history = createMemoryHistory({ initialEntries: [url] });

wrapper = ({ children }) => (
  <Router history={history}>
    <Provider store={store}>{children}</Provider>
  </Router>

Except it's not working for a hook that uses useRouteMatch

export const useLobby = () => {
  // to put these in scope for debugging
  const { pathname } = useLocation();
  const match = useRouteMatch()
  
  // for actual operation
  const selectedLeagueId = parseInt(useRouteMatch().params.id) || 0;
  // ... 
}

// tests, inside beforeEach
let url = "/lobby/props";
if (leagueId) url += `/sport/${leagueId}`;
const history = createMemoryHistory({ initialEntries: [url] });

wrapper = ({ children }) => (
  <Router history={history}>
    <Provider store={store}>{children}</Provider>
  </Router>
);
result = renderHook(usePropsLobby, { wrapper }).result;

When I look at pathname and match from the debugger, the pathname (useLocation().pathname) has my url, but match is:

{
  "path": "/",
  "url": "/",
  "params": {},
  "isExact": false
}

I looked around and a lot of people are talking about fully mocking useRouteMatch but that seems strange since all the other hooks work fine in the tests. Plus since mocks are hoisted I couldn't use a variable, and I don't even think I could do this at all since I need to mock it in two different ways (returning different values for useRouteMatch().params.id)

How the heck do I do this? What am I missing?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source