Using element with createMemoryRouter

[yuki2006]

Thank you for providing such a useful library.
I would like to use createMemoryRouter for testing purposes.
I want to specify an element like the one shown below. In other words, I would like to replace createBrowserRouter with createMemoryRouter and use initialEntries to specify the paths. Is there a way to achieve this?

const router = createBrowserRouter([
  {
    path: '/',
    element: (
      <QueryParamProvider>
        <Outlet />
      </QueryParamProvider>
    ),
    children: layoutChildren,
  },
]);

I'm looking for a way to achieve a similar configuration using createMemoryRouter. Any guidance would be appreciated.

[brophdawg11]

As long as your components aren't using any DOM-specific aspects then you should be able to just replace createBrowserRouter with createMemoryRouter directly, and pass initialEntries in the second parameter:

const router = createMemoryRouter([
  {
    path: '/',
    element: (
      <QueryParamProvider>
        <Outlet />
      </QueryParamProvider>
    ),
    children: layoutChildren,
  },
], { 
  initialEntries: ['/whatever'],
});

If your components use DOM-specific aspects then you will need to find a way to abstract them away and inject them based on the environment you are running in.