How to test components using new react router hooks?

Question

Until now, in unit tests, react router match params were retrieved as props of component. So testing a component considering some specific match, with specific url parameter

Answer 1

If you're using react-testing-library for testing, you can get this mock to work like so.

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(
        
        {ui}
        
    ),
    history,
    store,
    };
};

You should have mocked react-router-dom before it has been used to render your component. I'm exploring ways to make this reusable