MemoryRouter

interface MemoryHistoryBuildOptions {
    getUserConfirmation?: typeof getConfirmation | undefined;
    initialEntries?: InitialEntry[] | undefined;
    initialIndex?: number | undefined;
    keyLength?: number | undefined;
}

interface MemoryRouterBuildProps extends Omit<MemoryHistoryBuildOptions, 'getUserConfirmation'> {
    children: ReactNode;
    history?: never;
}

interface MemoryRouterHistoryProps {
    children: ReactNode;
    history: HistoryType<any>;
    initialEntries?: never;
    initialIndex?: never;
    keyLength?: never;
}

type MemoryRouterProps = MemoryRouterBuildProps | MemoryRouterHistoryProps;

A <MemoryRouter> stores its locations internally in an array. Unlike <BrowserHistory>, it isn't tied to an external source, like the history stack in a browser. This makes it ideal for scenarios where you need complete control over the history stack, like testing.

• <MemoryRouter initialEntries> defaults to ["/"] (a single entry at the root / URL)
• <MemoryRouter initialIndex> defaults to the last index of initialEntries
• <MemoryRouter> accepts either history OR arguments to create a memoryHistory - MemoryHistoryBuildOptions

import { MemoryRouter, Route, Routes } from '@archibald/core';

import { create } from 'react-test-renderer';

describe('My app', () => {
    it('renders correctly', () => {
        const renderer = create(
            <MemoryRouter initialEntries={['/teams/archibald']}>
                <Routes>
                    <Route path="teams" element={<TeamsLayout />}>
                        <Route path=":id" element={<Team />} />
                    </Route>
                </Routes>
            </MemoryRouter>
        );

        expect(renderer.toJSON()).toMatchSnapshot();
    });
});