Move hydration error link test

vercel · Sep 24, 2024 · 4a7d666 · 4a7d666
1 parent 453fcdc
commit 4a7d666
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 21 deletions.
diff --git a/test/development/acceptance-app/hydration-error.test.ts b/test/development/acceptance-app/hydration-error.test.ts
@@ -13,6 +13,43 @@ describe('Error overlay for hydration errors in App router', () => {
     skipStart: true,
   })
 
+  it('includes a React docs link when hydration error does occur', async () => {
+    const { browser } = await sandbox(
+      next,
+      new Map([
+        [
+          'app/page.js',
+          outdent`
+            'use client'
+            const isClient = typeof window !== 'undefined'
+            export default function Mismatch() {
+              return (
+                <div className="parent">
+                  <main className="child">{isClient ? "client" : "server"}</main>
+                </div>
+              );
+            }
+          `,
+        ],
+      ]),
+      '/',
+      { pushErrorAsConsoleLog: true }
+    )
+
+    const logs = await browser.log()
+    expect(logs).toEqual(
+      expect.arrayContaining([
+        {
+          // TODO: Should probably link to https://nextjs.org/docs/messages/react-hydration-error instead.
+          message: expect.stringContaining(
+            'https://react.dev/link/hydration-mismatch'
+          ),
+          source: 'error',
+        },
+      ])
+    )
+  })
+
   it('should show correct hydration error when client and server render different text', async () => {
     const { cleanup, session, browser } = await sandbox(
       next,

diff --git a/test/development/acceptance/hydration-error.test.ts b/test/development/acceptance/hydration-error.test.ts
@@ -13,6 +13,42 @@ describe('Error overlay for hydration errors in Pages router', () => {
     skipStart: true,
   })
 
+  it('includes a React docs link when hydration error does occur', async () => {
+    const { browser } = await sandbox(
+      next,
+      new Map([
+        [
+          'index.js',
+          outdent`
+              const isClient = typeof window !== 'undefined'
+              export default function Mismatch() {
+                  return (
+                    <div className="parent">
+                      <main className="child">{isClient ? "client" : "server"}</main>
+                    </div>
+                  );
+                }
+            `,
+        ],
+      ]),
+      '/',
+      { pushErrorAsConsoleLog: true }
+    )
+
+    const logs = await browser.log()
+    expect(logs).toEqual(
+      expect.arrayContaining([
+        {
+          // TODO: Should probably link to https://nextjs.org/docs/messages/react-hydration-error instead.
+          message: expect.stringContaining(
+            'https://react.dev/link/hydration-mismatch'
+          ),
+          source: 'error',
+        },
+      ])
+    )
+  })
+
   it('should show correct hydration error when client and server render different text', async () => {
     const { cleanup, session, browser } = await sandbox(
       next,

diff --git a/test/integration/auto-export/pages/[post]/[cmnt].js b/test/integration/auto-export/pages/[post]/[cmnt].js
@@ -18,10 +18,6 @@ if (typeof window !== 'undefined') {
 export default function Page() {
   if (typeof window !== 'undefined') {
     window.pathnames.push(window.location.pathname)
-
-    if (window.location.pathname.includes('hydrate-error')) {
-      return <p>hydration error</p>
-    }
   }
   // eslint-disable-next-line
   return <p>{useRouter().asPath}</p>

diff --git a/test/integration/auto-export/test/index.test.js b/test/integration/auto-export/test/index.test.js
@@ -89,22 +89,5 @@ describe('Auto Export', () => {
       const caughtWarns = await browser.eval(`window.caughtWarns`)
       expect(caughtWarns).toEqual([])
     })
-
-    it('should include error link when hydration error does occur', async () => {
-      const browser = await webdriver(appPort, '/post-1/hydrate-error', {
-        pushErrorAsConsoleLog: true,
-      })
-      const logs = await browser.log()
-      expect(logs).toEqual(
-        expect.arrayContaining([
-          {
-            message: expect.stringContaining(
-              'https://react.dev/link/hydration-mismatch'
-            ),
-            source: 'error',
-          },
-        ])
-      )
-    })
   })
 })