DataMemoryRouter
A MemoryRouter
that enables the data APIs like loader and action. Instead of using the browsers history stack like DataBrowserRouter
, a DataMemoryRouter
manages it's own history stack in memory. It's primarily useful for testing and component development tools like Storybook, but can also be used for running React Router in any JavaScript environment.
import { DataMemoryRouter } from "react-router-dom";
import * as React from "react";
import {
render,
waitFor,
screen,
} from "@testing-library/react";
import "@testing-library/jest-dom";
import Event from "./routes/event";
test("event route", async () => {
const FAKE_EVENT = { name: "test event" };
render(
<DataMemoryRouter initialEntries={["/events/123"]}>
<Route
path="/events/:id"
element={<Event />}
loader={() => FAKE_EVENT}
/>
</DataMemoryRouter>
);
await waitFor(() => screen.getByRole("heading"));
expect(screen.getByRole("heading")).toHaveTextContent(
FAKE_EVENT.name
);
});
declare function DataMemoryRouter(
props: DataMemoryRouterProps
): React.ReactElement;
export interface DataMemoryRouterProps {
children?: React.ReactNode;
initialEntries?: InitialEntry[];
initialIndex?: number;
hydrationData?: HydrationState;
fallbackElement: React.ReactElement;
}
initialEntries
The initial entires in the history stack. This allows you to start a test (or an app) with multiple locations already in the history stack (for testing a back navigation, etc.)
<DataMemoryRouter initialEntries={["/", "/events/123"]} />
initialIndex
The initial index in the history stack to render. This allows you to start a test at a specific entry. It defaults to the last entry in initialEntries
.
<DataMemoryRouter
initialEntries={["/", "/events/123", "/events/abc"]}
// start at `/events/123`
initialIndex={1}
/>
For all other props, see DataBrowserRouter