test(react-router,solid-router): test re-render for preload='viewport' (#4672)

Author: Sheraff

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

@@ -4157,15 +4157,21 @@ describe('Link', () => {
 
   test('Router.preload="viewport", should trigger the IntersectionObserver\'s observe and disconnect methods', async () => {
     const rootRoute = createRootRoute()
-    const indexRoute = createRoute({
-      getParentRoute: () => rootRoute,
-      path: '/',
-      component: () => (
+    const RouteComponent = () => {
+      const [count, setCount] = React.useState(0)
+      return (
         <>
           <h1>Index Heading</h1>
+          <output>{count}</output>
+          <button onClick={() => setCount((c) => c + 1)}>Render</button>
           <Link to="/">Index Link</Link>
         </>
-      ),
+      )
+    }
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: RouteComponent,
     })
 
     const router = createRouter({
@@ -4184,6 +4190,17 @@ describe('Link', () => {
 
     expect(ioDisconnectMock).toBeCalled()
     expect(ioDisconnectMock).toBeCalledTimes(1) // since React.StrictMode is enabled it should have disconnected
+
+    const output = screen.getByRole('status')
+    expect(output).toHaveTextContent('0')
+
+    const button = screen.getByRole('button', { name: 'Render' })
+    fireEvent.click(button)
+    await waitFor(() => {
+      expect(output).toHaveTextContent('1')
+    })
+    expect(ioObserveMock).toBeCalledTimes(2) // it should not observe again
+    expect(ioDisconnectMock).toBeCalledTimes(1) // it should not disconnect again
   })
 
   test("Router.preload='render', should trigger the route loader on render", async () => {

packages/solid-router/tests/link.test.tsx

@@ -3716,15 +3716,21 @@ describe('Link', () => {
 
   test('Router.preload="viewport", should trigger the IntersectionObserver\'s observe and disconnect methods', async () => {
     const rootRoute = createRootRoute()
-    const indexRoute = createRoute({
-      getParentRoute: () => rootRoute,
-      path: '/',
-      component: () => (
+    const RouteComponent = () => {
+      const [count, setCount] = Solid.createSignal(0)
+      return (
         <>
           <h1>Index Heading</h1>
+          <output>{count()}</output>
+          <button onClick={() => setCount((c) => c + 1)}>Render</button>
           <Link to="/">Index Link</Link>
         </>
-      ),
+      )
+    }
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: RouteComponent,
     })
 
     const router = createRouter({
@@ -3737,8 +3743,19 @@ describe('Link', () => {
     const indexLink = await screen.findByRole('link', { name: 'Index Link' })
     expect(indexLink).toBeInTheDocument()
 
-    expect(ioObserveMock).toBeCalled()
-    expect(ioObserveMock).toBeCalledTimes(1)
+    expect(ioObserveMock).toHaveBeenCalledOnce()
+    expect(ioDisconnectMock).not.toHaveBeenCalled()
+
+    const output = screen.getByRole('status')
+    expect(output).toHaveTextContent('0')
+
+    const button = screen.getByRole('button', { name: 'Render' })
+    fireEvent.click(button)
+    await waitFor(() => {
+      expect(output).toHaveTextContent('1')
+    })
+    expect(ioObserveMock).toHaveBeenCalledOnce() // it should not observe again
+    expect(ioDisconnectMock).not.toHaveBeenCalled() // it should not disconnect again
   })
 
   test("Router.preload='render', should trigger the route loader on render", async () => {