test(router): add waitFor for page navigation link/optional-path-params (#5741)

Author: birkskyum

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

@@ -360,6 +360,10 @@ describe('Link', () => {
       // navigate to /?foo=bar
       await act(() => fireEvent.click(indexFooBarLink))
 
+      await waitFor(() => {
+        expect(indexFooBarLink).toHaveClass('active')
+      })
+
       expect(indexExactLink).toHaveClass('inactive')
       expect(indexExactLink).not.toHaveClass('active')
       expect(indexExactLink).toHaveAttribute('href', '/')

packages/react-router/tests/optional-path-params.test.tsx

@@ -1,5 +1,12 @@
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import { act, cleanup, fireEvent, render, screen } from '@testing-library/react'
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react'
 import {
   Link,
   Outlet,
@@ -639,17 +646,22 @@ describe('React Router - Optional Path Parameters', () => {
 
       // Test navigation scenarios
       const navigateAll = await screen.findByTestId('navigate-all')
-      const navigateTech = await screen.findByTestId('navigate-tech')
-      const navigateSpecific = await screen.findByTestId('navigate-specific')
-
-      fireEvent.click(navigateAll)
-      expect(router.state.location.pathname).toBe('/posts')
+      await fireEvent.click(navigateAll)
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe('/posts')
+      })
 
-      fireEvent.click(navigateTech)
-      expect(router.state.location.pathname).toBe('/posts/tech')
+      const navigateTech = await screen.findByTestId('navigate-tech')
+      await fireEvent.click(navigateTech)
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe('/posts/tech')
+      })
 
-      fireEvent.click(navigateSpecific)
-      expect(router.state.location.pathname).toBe('/posts/tech/hello-world')
+      const navigateSpecific = await screen.findByTestId('navigate-specific')
+      await fireEvent.click(navigateSpecific)
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe('/posts/tech/hello-world')
+      })
     })
 
     it('should handle relative navigation with optional parameters', async () => {

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

@@ -393,6 +393,10 @@ describe('Link', () => {
       // navigate to /?foo=bar
       fireEvent.click(indexFooBarLink)
 
+      await waitFor(() => {
+        expect(indexFooBarLink).toHaveClass('active')
+      })
+
       expect(indexExactLink).toHaveClass('inactive')
       expect(indexExactLink).not.toHaveClass('active')
       expect(indexExactLink).toHaveAttribute('href', '/')

packages/solid-router/tests/optional-path-params.test.tsx

@@ -647,17 +647,22 @@ describe('Solid Router - Optional Path Parameters', () => {
 
       // Test navigation scenarios
       const navigateAll = await screen.findByTestId('navigate-all')
-      const navigateTech = await screen.findByTestId('navigate-tech')
-      const navigateSpecific = await screen.findByTestId('navigate-specific')
-
-      fireEvent.click(navigateAll)
-      expect(router.state.location.pathname).toBe('/posts')
+      await fireEvent.click(navigateAll)
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe('/posts')
+      })
 
-      fireEvent.click(navigateTech)
-      expect(router.state.location.pathname).toBe('/posts/tech')
+      const navigateTech = await screen.findByTestId('navigate-tech')
+      await fireEvent.click(navigateTech)
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe('/posts/tech')
+      })
 
-      fireEvent.click(navigateSpecific)
-      expect(router.state.location.pathname).toBe('/posts/tech/hello-world')
+      const navigateSpecific = await screen.findByTestId('navigate-specific')
+      await fireEvent.click(navigateSpecific)
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe('/posts/tech/hello-world')
+      })
     })
 
     it('should handle relative navigation with optional parameters', async () => {