'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 |
|---|
