React router v6 testing library navigate relative fails

Question

In my application i use relative navigation with react router v6 (we are currently migrating) and it works fine.

When i try to do some tests using Jest and testing-library the relative navigation fails and always resolve with the pathname '/'.

I use this wrapper to render my component under test to add it a Router.

const WrapTestComponentInRouter = (TestComponent, initialRoute = '/', history =['/']) => {
  function WrappedComponent(props) {
    return (
      <MemoryRouter initialEntries={history}>
        <Routes>
          <Route path={initialRoute} element={<TestComponent {...props} />} />
          <Route path="*" element={<Location />} />
        </Routes>
      </MemoryRouter>
    );
  }

  return WrappedComponent;
};

function ComponentToTest() {
  const location = useLocation();
  console.log(location);
  const path = useResolvedPath('..');
  console.log(path);
  return <button onClick={() => navigate('..')}>navigate</div>;
}

I use the hook useResolvedPath to compute the navigation result and log it. In my application the relative path computed is correct but in my test it is always equals to '/' whatever the current location is.

Does someone has encounter and solved this problem?

EDIT

Ok, i understand what is the problem. The useResolvedPath is using the routingContext to compute the relative route so if we use '..' it pop to the previous route in the route tree.

With that, if i want to test my navigation i need to reproduce my route tree. Another solution is to use the real relative path by using the method resolvePath('..', location)

The resolvePath compute relative path from a path

resolvePath('..', '/user/project') ---> '/user'

the navigate function also use the RoutingContext so if i want to do a relative from the current path i have to do

const location = useLocation();
navigate(resolvePath('..', location.pathname));

Answer 1

I encountered this issue, the way I solved it was to write the whole app routing hierarchy, and mount the wanted component only.
for example:

<MemoryRouter
     initialEntries={['/1/page1/2/3']}>
     <Routes>
         <Route path="/:param1">
             <Route path="page1/*"
                  element={<MyComponent />}>
                  <Route path=":param2/*">
                      <Route path=":param3" />
                  </Route>
             </Route>
        </Route>
   </Routes>
</MemoryRouter>