Practical Patterns
Memory-router component tests
Test navigation and rendering without a browser history or global singleton router.
Memory-router component tests
A component test should not need a browser to prove routing behavior. Use createMemoryRouter() for React component tests.
import { render, screen } from '@testing-library/react';
import { createMemoryRouter, defineRoutes } from '@cookbook/router';
import { RouterProvider } from '@cookbook/router-react';
it('renders user details', async () => {
const router = createMemoryRouter({
initialEntries: ['/users/42'],
routes: defineRoutes([
{
id: 'users.details',
path: '/users/{id:int}',
view: UserDetailsPage,
},
] as const),
});
render(<RouterProvider router={router} />);
expect(await screen.findByText('User 42')).toBeInTheDocument();
});Do not call router.start() first when testing through RouterProvider; the provider starts the router.