Closed
Description
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.3Used 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