createRoutesStub fails type checking

[silvenon]

I'm using React Router as a...

framework

Reproduction

Create a route app/routes/home.tsx route with the following content:

import type { Route } from './+types/home'

export function loader(_: Route.LoaderArgs) {
  return { message: 'Hello world!' }
}

export default function Home({ loaderData }: Route.ComponentProps) {
  return <h1>{loaderData.message}</h1>
}

Register the route in app/routes.ts:

import { type RouteConfig, route } from '@react-router/dev/routes'

export default [
  route('/', './routes/home.tsx'),
]

Now create a app/routes/home.test.tsx file to test this route:

import { createRoutesStub } from 'react-router'
import { render, screen } from '@testing-library/react'
import * as homeRoute from './home'

const HomeStub = createRoutesStub([
  {
    index: true,
    loader: homeRoute.loader,
    Component: homeRoute.default,
  },
])

test('home', () => {
  render(<HomeStub />)
  screen.getByText('Hello world!')
})

System Info

System:
    OS: macOS 15.1.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 113.45 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.1 - ~/.n/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.8.2 - ~/.n/bin/npm
    pnpm: 9.14.4 - /opt/homebrew/bin/pnpm
    bun: 1.1.29 - ~/.bun/bin/bun
  Browsers:
    Chrome: 131.0.6778.109
    Edge: 131.0.2903.86
    Safari: 18.1.1
  npmPackages:
    @react-router/dev: ^7.0.2 => 7.0.2
    @react-router/node: ^7.0.2 => 7.0.2
    @react-router/serve: ^7.0.2 => 7.0.2
    react-router: ^7.0.2 => 7.0.2
    vite: ^6.0.3 => 6.0.3

Used Package Manager

npm

Expected Behavior

Both the test and type checking passes.

Actual Behavior

The test passes, but type checking unfortunately doesn't because createRoutesStub expects each route segment to have the predefined stub shapes, so if any data loading is going on this will cause those segments to not match those shapes anymore. For example:

typescript: Type '({ loaderData }: ComponentProps) => Element' is not assignable to type 'ComponentType<{}> | null | undefined'.
  Type '({ loaderData }: ComponentProps) => Element' is not assignable to type 'FunctionComponent<{}>'.
    Types of parameters '__0' and 'props' are incompatible.
      Type '{}' is missing the following properties from type 'ComponentProps': params, loaderData, matches