TanStack•3y ago•

2 replies

nursing-lime

Outlet does not render when using @testing-library/react.

Hey there,

I'm moving to using

@tanstack/react-location

@tanstack/react-location

with an existing project that was previously using

react-router-dom

react-router-dom

. Version in package.json is

^3.4.4

^3.4.4

- this is because I am implementing a Module Federation solution that already exists in another project, and wanted to keep the versions in sync for the time being.

All is working well, and I hasn't had any issues with dev. However, my integration tests appear to be failing due to the

<Outlet />

<Outlet />

component not rendering the element associated with the route I'm feeding it.

For some context, I have a reusable function that accepts some UI as an argument. This function then creates history with

createMemoryHistory

createMemoryHistory

, allowing me to set initial entries to render the view I want. It then wraps the UI in the router, a mock GraphQL provider and a context provider, akin to the below (pared down to remove error handling and whatnot):

const renderTestUI = ({ ui, ctx, initialPath = '/test' }) => {
  RTLCleanup();
  const history = createMemoryHistory({ 
    initialEntries: [initialPath]
  });
  const location = new ReactLocation();
  return RTLRender(
    <Router
      location={location}
      routes={[
        {
          path: '/test',
          element: <p>This does not render</p>
        }
      ]}
     >
      <MockGraphQLProvider>
        <AppContext.Provider value={ctx}>
          {ui}
        </AppContext.Provider>
      </MockGraphQLProvider>
    </Router>
  );
};

const renderTestUI = ({ ui, ctx, initialPath = '/test' }) => {
  RTLCleanup();
  const history = createMemoryHistory({ 
    initialEntries: [initialPath]
  });
  const location = new ReactLocation();
  return RTLRender(
    <Router
      location={location}
      routes={[
        {
          path: '/test',
          element: <p>This does not render</p>
        }
      ]}
     >
      <MockGraphQLProvider>
        <AppContext.Provider value={ctx}>
          {ui}
        </AppContext.Provider>
      </MockGraphQLProvider>
    </Router>
  );
};

What I'm seeing is that even when I can see that

router.state.location.pathname

router.state.location.pathname

matches the route in question, the

<Outlet />

<Outlet />

that is rendered as part of the component passed as

ui

ui

simply does not render. Is there some consideration when testing that I should know about? Anything more I can do to debug this thoroughly?

If it would help I can do my best to throw together an actual working example rather than this more meager one.

Thank you so much for your time, and I hope you have a great rest of your week.

TanStack•3y ago•

2 replies

nursing-lime

Outlet does not render when using @testing-library/react.

Hey there,

I'm moving to using

@tanstack/react-location

@tanstack/react-location

with an existing project that was previously using

react-router-dom

react-router-dom

. Version in package.json is

^3.4.4

^3.4.4

<Outlet />

<Outlet />

createMemoryHistory

createMemoryHistory

const renderTestUI = ({ ui, ctx, initialPath = '/test' }) => {
  RTLCleanup();
  const history = createMemoryHistory({ 
    initialEntries: [initialPath]
  });
  const location = new ReactLocation();
  return RTLRender(
    <Router
      location={location}
      routes={[
        {
          path: '/test',
          element: <p>This does not render</p>
        }
      ]}
     >
      <MockGraphQLProvider>
        <AppContext.Provider value={ctx}>
          {ui}
        </AppContext.Provider>
      </MockGraphQLProvider>
    </Router>
  );
};

const renderTestUI = ({ ui, ctx, initialPath = '/test' }) => {
  RTLCleanup();
  const history = createMemoryHistory({ 
    initialEntries: [initialPath]
  });
  const location = new ReactLocation();
  return RTLRender(
    <Router
      location={location}
      routes={[
        {
          path: '/test',
          element: <p>This does not render</p>
        }
      ]}
     >
      <MockGraphQLProvider>
        <AppContext.Provider value={ctx}>
          {ui}
        </AppContext.Provider>
      </MockGraphQLProvider>
    </Router>
  );
};

What I'm seeing is that even when I can see that

router.state.location.pathname

router.state.location.pathname

matches the route in question, the

<Outlet />

<Outlet />

that is rendered as part of the component passed as

ui

ui

Outlet does not render when using @testing-library/react.

Similar Threads

Outlet does not render when using @testing-library/react.

Similar Threads

Similar Threads

Similar Threads