Unable to test lazy-loaded routes due to no active match

[dannydtk]

Which project does this relate to?

Router

Describe the bug

We're encountering an issue when testing lazy-loaded routes using TanStack Router.

I've created a Stackblitz reproduction.

The test script should run automatically, but if it doesn’t, you can manually run it using npm test in the terminal.

Routes Setup:

• __root: default root route with <Outlet />
• /: redirects to /sub/page
• /sub/_layout: a layout route with <Outlet /> for /sub with an optional redirect parameter
• /sub/_layout/page: contains a link to /sub/else or redirect when present
• /sub/_layout/other: identical to /sub/page but lazy-loaded
• /sub/_layout/else: the default redirection target when redirect param is missing

The test suite is located in router.test.tsx (Vitest + React Testing Library).

Issue:

When running the tests, the route /sub/_layout/page passes successfully, but /sub/_layout/other fails. Runtime-wise everything seems to be fine.

Interestingly, if I convert /sub/_layout/other from a lazy-loaded route to a standard route, the issue disappears. I also tried preloading the route before rendering, but that didn’t resolve the problem.

The error message when attempting to render /sub/_layout/other is:

Invariant failed: Could not find an active match from "/sub/_layout/other"

Investigation:

I logged the output of router.routesByPath for the failing /sub/_layout/other route. When the route is lazy-loaded, I get the following (with non-essential details removed for clarity):

  '/sub/other': Route {
    options: {
      path: '/other',
      id: '/sub/_layout/other',
    },
    isRoot: false,
    originalIndex: 2,
    parentRoute: Route {
      isRoot: false,
      originalIndex: 0,
      _path: undefined,
      _id: '/sub/_layout',
      _fullPath: '/sub',
      _to: '/sub',
      _lazyPromise: [Promise]
    },
    _path: 'other',
    _id: '/sub/_layout/sub/_layout/other',
    _fullPath: '/sub/other',
    _to: '/sub/other',
    rank: 1,
    _lazyPromise: Promise { <unknown> }
  }

Notably, the value of _id is '/sub/_layout/sub/_layout/other', which seems incorrect. This might be the reason for the error: Could not find an active match from "/sub/_layout/other".

This issue seems related to #2400

Your Example Website or App

https://stackblitz.com/edit/vitejs-vite-n66i22?file=src%2Froutes%2F__tests__%2Frouter.test.tsx&terminal=test

Steps to Reproduce the Bug or Issue

1. Open the repro on Stackblitz
2. Tests should run automatically in the console, otherwise run npm test
3. Observe how tests for /sub/_layout/other are not passing with Invariant failed: Could not find an active match from "/sub/_layout/other"
4. Change other.lazy.tsx to other.tsx
5. Run the tests again and this time they're all passing

Expected behavior

A a user I'd expect the tests to work for both standard and lazy-loaded routes but I'm seeing only standard routes tests passing.

Screenshots or Videos

Platform

• OS: macOS
• Browser: Arc 1.61.0 (53949) (Chromium Engine Version 129.0.6668.59)
• Node: 18.20.4
• TanStack Router: 1.58.9
• React: 18.3.1
• Vite: 5.4.6
• Vitest: 2.1.1

Additional context

No response