add test

Author: schiller-manuel

packages/react-router/tests/loaders.test.tsx

@@ -339,3 +339,71 @@ test('throw error from beforeLoad when navigating to route', async () => {
   const indexElement = await screen.findByText('fooErrorComponent')
   expect(indexElement).toBeInTheDocument()
 })
+
+test('reproducer #4245', async () => {
+  const LOADER_WAIT_TIME = 500
+  const rootRoute = createRootRoute({})
+
+  const indexRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/',
+    loader: async () => {
+      await sleep(LOADER_WAIT_TIME)
+      return 'index'
+    },
+
+    component: () => {
+      const data = indexRoute.useLoaderData()
+      return (
+        <div>
+          <Link to="/foo" data-testid="link-to-foo">foo</Link>
+          {data}
+        </div>
+      )
+    },
+  })
+
+  const fooRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/foo',
+    component: () => <Link to="/" data-testid="link-to-index">index</Link>,
+  })
+
+  const routeTree = rootRoute.addChildren([indexRoute, fooRoute])
+  const router = createRouter({ routeTree })
+
+  render(<RouterProvider router={router} />)
+  // We wait for the initial loader to complete
+  await router.load()
+  const fooLink = await screen.findByTestId('link-to-foo')
+
+  expect(fooLink).toBeInTheDocument()
+
+  // We navigate to the foo route
+  fireEvent.click(fooLink)
+
+  // We immediately see the content of the foo route
+  const indexLink = await screen.findByTestId('link-to-index')
+  expect(indexLink).toBeInTheDocument()
+
+  // We navigate to the index route
+  fireEvent.click(indexLink)
+
+  // We immediately see the content of the index route because the stale data is still available
+  const fooLink2 = await screen.findByTestId('link-to-foo')
+  expect(fooLink2).toBeInTheDocument()
+
+  // We navigate to the foo route again
+  fireEvent.click(fooLink2)
+
+  // We immediately see the content of the foo route
+  const indexLink2 = await screen.findByTestId('link-to-index')
+  expect(indexLink2).toBeInTheDocument()
+
+  // We navigate to the index route again
+  fireEvent.click(indexLink2)
+
+  // We now should see the content of the index route immediately because the stale data is still available
+  const fooLink3 = await screen.findByTestId('link-to-foo')
+  expect(fooLink3).toBeInTheDocument()
+})