conventional-tan

Vitest renders App but not the Outlet content for "/"

Can somebody point me in the right direction here? Experimenting with TanStack Router and Unit Tests for UI. Works partially but does not render Outlet for the "/" Route. I have a test that does render(<RouterProvider router={testRouter} />); and successfully completes which uses a separate instance of a router which uses the generated routeTree.gen from the app. The content for the __root.tsx Route appears in the output of screen.debug() but it does not contain the content from the root index route i.e. the content of the <Outlet> which does show up fine when running the app normally. When doing await screen.findByText('<known-content>'); in that test it times out. The index route that does not render does use a loader (see below) but i assume that should be done in time (<100ms) or do i need to do something special to await that? Or is something else off in my approach?

export const Route = createFileRoute('/')({
  component: RouteComponent,
  loader: () => getResourceList(),
});
function RouteComponent() {
  const resourceTable = Route.useLoaderData();
  return <Menu resources={resourceTable} />;
}

export const Route = createFileRoute('/')({
  component: RouteComponent,
  loader: () => getResourceList(),
});
function RouteComponent() {
  const resourceTable = Route.useLoaderData();
  return <Menu resources={resourceTable} />;
}

I assume i am missing some basic understanding here. Is this enough info to give me a hint here?

13 Replies

solid-orange•9mo ago

can you please provide a complete minimal example?

conventional-tanOP•9mo ago

Ok. Will try to replicate in StackBlitz.

solid-orange•9mo ago

btw this thread might be interesting for you https://discord.com/channels/719702312431386674/1318937332446920805/1319055524733517937

conventional-tanOP•9mo ago

Would you say that the approach to use the full tree from the app is in general problematic and a bad idea and asking for trouble?

solid-orange•9mo ago

not necesarily

conventional-tanOP•9mo ago

Ok. Thanks. Will investigate and try to build the repro.

conventional-tanOP•9mo ago

Here is a crude StackBlitz that hopefully demonstrates it. Would not be surprised if i messed up some basic setup stuff for testing in general. Hope you have some feedback: https://stackblitz.com/edit/vitejs-vite-cbthmgfx

phlebotinum

StackBlitz

repro-ts-router-test-not-rendering-index - StackBlitz

Repro for TS-Router not rendering root-index

solid-orange•9mo ago

you need to add a await testRouter.load()

solid-orange•9mo ago

https://stackblitz.com/edit/vitejs-vite-repvr3sj?file=tests%2FApp.test.tsx

Manuel Schiller

StackBlitz

repro-ts-router-test-not-rendering-index (forked) - StackBlitz

Repro for TS-Router not rendering root-index

conventional-tanOP•9mo ago

Oh! Wow. Thanks for the quick feedback. Happy new year and all the best to you!

solid-orange•9mo ago

same to you! btw you can also look at our unit tests on how to test things

conventional-tanOP•9mo ago

I did look around in there but did not catch that one.

solid-orange•9mo ago

=> https://github.com/TanStack/router/blob/main/packages/react-router/tests/router.test.tsx

GitHub

router/packages/react-router/tests/router.test.tsx at main · TanSta...

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router

Gaming

Programming

Vitest renders App but not the Outlet content for "/"

Did you find this page helpful?