Add extensive hydration error test suite for Pages router (#70342)

vercel · Sep 24, 2024 · 16ffa03 · 16ffa03
1 parent fb4bf4a
commit 16ffa03
Show file tree

Hide file tree

Showing 6 changed files with 887 additions and 60 deletions.
diff --git a/test/development/acceptance-app/hydration-error.test.ts b/test/development/acceptance-app/hydration-error.test.ts
@@ -7,12 +7,49 @@ import { getRedboxTotalErrorCount } from 'next-test-utils'
 
 // https://github.com/facebook/react/blob/main/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js used as a reference
 
-describe('Error overlay for hydration errors', () => {
+describe('Error overlay for hydration errors in App router', () => {
   const { next, isTurbopack } = nextTestSetup({
     files: new FileRef(path.join(__dirname, 'fixtures', 'default-template')),
     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,