test: deflake middeware navigation tests by waiting for hydration before clicking links

Author: pieh

tests/e2e/middleware.test.ts

@@ -246,6 +246,11 @@ for (const { expectedRuntime, isNodeMiddleware, label, testWithSwitchableMiddlew
               const pageResponse = await page.goto(`${edgeOrNodeMiddlewarePages.url}/link`)
               expect(await pageResponse?.headerValue('x-runtime')).toEqual(expectedRuntime)
 
+              // wait for hydration to finish before doing client navigation
+              await expect(page.getByTestId('hydration')).toHaveText('hydrated', {
+                timeout: 10_000,
+              })
+
               await page.evaluate(() => {
                 // set some value to window to check later if browser did reload and lost this state
                 ;(window as ExtendedWindow).didReload = false
@@ -305,6 +310,11 @@ for (const { expectedRuntime, isNodeMiddleware, label, testWithSwitchableMiddlew
                   )
                   expect(await pageResponse?.headerValue('x-runtime')).toEqual(expectedRuntime)
 
+                  // wait for hydration to finish before doing client navigation
+                  await expect(page.getByTestId('hydration')).toHaveText('hydrated', {
+                    timeout: 10_000,
+                  })
+
                   await page.evaluate(() => {
                     // set some value to window to check later if browser did reload and lost this state
                     ;(window as ExtendedWindow).didReload = false

tests/fixtures/middleware-i18n/pages/link/index.js

@@ -1,6 +1,12 @@
+import { useState, useEffect } from 'react'
 import Link from 'next/link'
 
 export default function Page() {
+  const [isHydrated, setIsHydrated] = useState(false)
+  useEffect(() => {
+    setIsHydrated(true)
+  }, [])
+
   return (
     <div>
       <h1>Page with Links</h1>
@@ -62,6 +68,7 @@ export default function Page() {
           </ul>
         </li>
       </ul>
+      <pre data-testid="hydration">{isHydrated ? 'hydrated' : 'hydrating'}</pre>
     </div>
   )
 }

tests/fixtures/middleware-pages/pages/link/index.js

@@ -1,6 +1,12 @@
+import { useState, useEffect } from 'react'
 import Link from 'next/link'
 
 export default function Page() {
+  const [isHydrated, setIsHydrated] = useState(false)
+  useEffect(() => {
+    setIsHydrated(true)
+  }, [])
+
   return (
     <div>
       <h1>Page with Links</h1>
@@ -62,6 +68,7 @@ export default function Page() {
           </ul>
         </li>
       </ul>
+      <pre data-testid="hydration">{isHydrated ? 'hydrated' : 'hydrating'}</pre>
     </div>
   )
 }