From 40fc80726518b1455dd571ac68f9134ba84de630 Mon Sep 17 00:00:00 2001
From: eps1lon <sebastian.silbermann@vercel.com>
Date: Wed, 19 Jun 2024 09:40:23 +0200
Subject: [PATCH] Improve hydration error coverage

---
 .../fixtures/default-template/app/page.js     |   8 +-
 .../acceptance-app/hydration-error.test.ts    | 258 ++++++++++++++++--
 test/lib/development-sandbox.ts               |   4 +
 test/lib/next-test-utils.ts                   |  27 ++
 4 files changed, 269 insertions(+), 28 deletions(-)

diff --git a/test/development/acceptance-app/fixtures/default-template/app/page.js b/test/development/acceptance-app/fixtures/default-template/app/page.js
index 571a67124b063..3415e705b797f 100644
--- a/test/development/acceptance-app/fixtures/default-template/app/page.js
+++ b/test/development/acceptance-app/fixtures/default-template/app/page.js
@@ -1,5 +1,9 @@
 'use client'
-import Component from '../index'
 export default function Page() {
-  return <Component />
+  return (
+    <table>
+      {' '}
+      <tbody></tbody>
+    </table>
+  )
 }
diff --git a/test/development/acceptance-app/hydration-error.test.ts b/test/development/acceptance-app/hydration-error.test.ts
index a04c38ed5e0e6..a8e714ccd93d4 100644
--- a/test/development/acceptance-app/hydration-error.test.ts
+++ b/test/development/acceptance-app/hydration-error.test.ts
@@ -36,6 +36,9 @@ describe('Error overlay for hydration errors', () => {
 
     await session.waitForAndOpenRuntimeError()
 
+    await session.assertHasRedbox()
+    expect(await getRedboxTotalErrorCount(browser)).toBe(1)
+
     expect(await session.getRedboxDescription()).toMatchInlineSnapshot(`
       "Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used
       See more info here: https://nextjs.org/docs/messages/react-hydration-error"
@@ -91,7 +94,7 @@ describe('Error overlay for hydration errors', () => {
   })
 
   it('should show correct hydration error when client renders an extra element', async () => {
-    const { cleanup, session } = await sandbox(
+    const { browser, cleanup, session } = await sandbox(
       next,
       new Map([
         [
@@ -113,6 +116,9 @@ describe('Error overlay for hydration errors', () => {
 
     await session.waitForAndOpenRuntimeError()
 
+    await session.assertHasRedbox()
+    expect(await getRedboxTotalErrorCount(browser)).toBe(1)
+
     const pseudoHtml = await session.getRedboxComponentStack()
     if (isTurbopack) {
       expect(pseudoHtml).toMatchInlineSnapshot(`
@@ -136,7 +142,7 @@ describe('Error overlay for hydration errors', () => {
   })
 
   it('should show correct hydration error when client renders an extra text node', async () => {
-    const { cleanup, session } = await sandbox(
+    const { browser, cleanup, session } = await sandbox(
       next,
       new Map([
         [
@@ -160,6 +166,26 @@ describe('Error overlay for hydration errors', () => {
 
     await session.waitForAndOpenRuntimeError()
 
+    await session.assertHasRedbox()
+    expect(await getRedboxTotalErrorCount(browser)).toBe(1)
+
+    const pseudoHtml = await session.getRedboxComponentStack()
+    if (isTurbopack) {
+      expect(pseudoHtml).toEqual(outdent`
+        ...
+          ...
+        +  second
+        -  <footer className="3">
+      `)
+    } else {
+      expect(pseudoHtml).toEqual(outdent`
+        ...
+          <div className="parent">
+        +    second
+        -    <footer className="3">
+      `)
+    }
+
     expect(await session.getRedboxDescription()).toMatchInlineSnapshot(`
       "Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used
       See more info here: https://nextjs.org/docs/messages/react-hydration-error"
@@ -169,7 +195,7 @@ describe('Error overlay for hydration errors', () => {
   })
 
   it('should show correct hydration error when server renders an extra element', async () => {
-    const { cleanup, session } = await sandbox(
+    const { browser, cleanup, session } = await sandbox(
       next,
       new Map([
         [
@@ -191,6 +217,23 @@ describe('Error overlay for hydration errors', () => {
 
     await session.waitForAndOpenRuntimeError()
 
+    await session.assertHasRedbox()
+    expect(await getRedboxTotalErrorCount(browser)).toBe(1)
+
+    const pseudoHtml = await session.getRedboxComponentStack()
+    if (isTurbopack) {
+      expect(pseudoHtml).toEqual(outdent`
+        ...
+        -  <main className="only">
+      `)
+    } else {
+      expect(pseudoHtml).toEqual(outdent`
+        ...
+          <div className="parent">
+        -    <main className="only">
+      `)
+    }
+
     expect(await session.getRedboxDescription()).toMatchInlineSnapshot(`
       "Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used
       See more info here: https://nextjs.org/docs/messages/react-hydration-error"
@@ -200,7 +243,7 @@ describe('Error overlay for hydration errors', () => {
   })
 
   it('should show correct hydration error when server renders an extra text node', async () => {
-    const { cleanup, session } = await sandbox(
+    const { browser, cleanup, session } = await sandbox(
       next,
       new Map([
         [
@@ -218,6 +261,9 @@ describe('Error overlay for hydration errors', () => {
 
     await session.waitForAndOpenRuntimeError()
 
+    await session.assertHasRedbox()
+    expect(await getRedboxTotalErrorCount(browser)).toBe(1)
+
     expect(await session.getRedboxDescription()).toMatchInlineSnapshot(`
       "Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used
       See more info here: https://nextjs.org/docs/messages/react-hydration-error"
@@ -241,6 +287,91 @@ describe('Error overlay for hydration errors', () => {
     await cleanup()
   })
 
+  it('should show correct hydration error when server renders an extra text node in an invalid place', async () => {
+    const { browser, cleanup, session } = await sandbox(
+      next,
+      new Map([
+        [
+          'app/page.js',
+          outdent`
+            'use client'
+            export default function Page() {
+              return (
+                <table>
+                  <tbody>
+                    <tr>test</tr>
+                  </tbody>
+                </table>
+              )
+            }
+          `,
+        ],
+      ])
+    )
+
+    await session.waitForAndOpenRuntimeError()
+
+    await session.assertHasRedbox()
+    // FIXME: Should be 2
+    expect(await getRedboxTotalErrorCount(browser)).toBe(1)
+
+    // FIXME: Should also have "text nodes cannot be a child of tr"
+    expect(await session.getRedboxDescription()).toEqual(outdent`
+      Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used
+      See more info here: https://nextjs.org/docs/messages/react-hydration-error
+    `)
+
+    const pseudoHtml = await session.getRedboxComponentStack()
+    expect(pseudoHtml).toEqual(outdent`
+      ...
+      +  <table>
+      -  test
+    `)
+
+    await cleanup()
+  })
+
+  it('should show correct hydration error when server renders an extra whitespace in an invalid place', async () => {
+    const { cleanup, session } = await sandbox(
+      next,
+      new Map([
+        [
+          'app/page.js',
+          outdent`
+            'use client'
+            export default function Page() {
+              return (
+                <table>
+                  {' '}
+                  <tbody></tbody>
+                </table>
+              )
+            }
+          `,
+        ],
+      ])
+    )
+
+    // FIXME: Should have getRedboxDescription() "text nodes cannot be a child of tr"
+    await expect(session.hasErrorToast()).resolves.toBe(false)
+
+    // await session.waitForAndOpenRuntimeError()
+
+    // expect(await session.hasRedbox()).toBe(false)
+    // expect(await getRedboxTotalErrorCount(browser)).toBe(0)
+
+    // expect(await session.getRedboxDescription()).toEqual(outdent`
+    //   Something
+    // `)
+
+    // const pseudoHtml = await session.getRedboxComponentStack()
+    // expect(pseudoHtml).toEqual(outdent`
+    //   Something
+    // `)
+
+    await cleanup()
+  })
+
   it('should show correct hydration error when client renders an extra node inside Suspense content', async () => {
     const { cleanup, session } = await sandbox(
       next,
@@ -269,6 +400,25 @@ describe('Error overlay for hydration errors', () => {
 
     await session.waitForAndOpenRuntimeError()
 
+    const pseudoHtml = await session.getRedboxComponentStack()
+    if (isTurbopack) {
+      expect(pseudoHtml).toEqual(outdent`
+      ...
+        ...
+      +  <main className="second">
+      -  <footer className="3">
+    `)
+    } else {
+      expect(pseudoHtml).toEqual(outdent`
+      ...
+        <div className="parent">
+          <Suspense fallback={<p>}>
+            ...
+      +      <main className="second">
+      -      <footer className="3">
+    `)
+    }
+
     expect(await session.getRedboxDescription()).toMatchInlineSnapshot(`
       "Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used
       See more info here: https://nextjs.org/docs/messages/react-hydration-error"
@@ -336,8 +486,8 @@ describe('Error overlay for hydration errors', () => {
     )
 
     await session.waitForAndOpenRuntimeError()
-    expect(await session.hasRedbox()).toBe(true)
 
+    await session.assertHasRedbox()
     expect(await getRedboxTotalErrorCount(browser)).toBe(1)
 
     const description = await session.getRedboxDescription()
@@ -396,8 +546,8 @@ describe('Error overlay for hydration errors', () => {
     )
 
     await session.waitForAndOpenRuntimeError()
-    expect(await session.hasRedbox()).toBe(true)
 
+    await session.assertHasRedbox()
     expect(await getRedboxTotalErrorCount(browser)).toBe(1)
 
     const description = await session.getRedboxDescription()
@@ -407,24 +557,64 @@ describe('Error overlay for hydration errors', () => {
 
     const pseudoHtml = await session.getRedboxComponentStack()
 
+    expect(pseudoHtml).toMatchInlineSnapshot(`
+      "...
+        <div>
+          <p>
+          ^^^
+            <div>
+            ^^^^^"
+    `)
+
+    await cleanup()
+  })
+
+  it('should only show one hydration error when bad nesting happened - div > tr', async () => {
+    const { cleanup, session, browser } = await sandbox(
+      next,
+      new Map([
+        [
+          'app/page.js',
+          outdent`
+            'use client'
+            export default function Page() {
+              return <div><tr></tr></div>
+            }
+          `,
+        ],
+      ])
+    )
+
+    await session.waitForAndOpenRuntimeError()
+
+    await session.assertHasRedbox()
+    expect(await getRedboxTotalErrorCount(browser)).toBe(1)
+
+    const description = await session.getRedboxDescription()
+    expect(description).toEqual(outdent`
+      In HTML, <tr> cannot be a child of <div>.
+      This will cause a hydration error.
+    `)
+
+    const pseudoHtml = await session.getRedboxComponentStack()
+
     // Turbopack currently has longer component stack trace
     if (isTurbopack) {
-      expect(pseudoHtml).toMatchInlineSnapshot(`
-        "...
-          <div>
-            <p>
-            ^^^
-              <div>
-              ^^^^^"
+      expect(pseudoHtml).toEqual(outdent`
+        ...
+          <Page>
+            <div>
+            ^^^^^
+              <tr>
+              ^^^^
       `)
     } else {
-      expect(pseudoHtml).toMatchInlineSnapshot(`
-        "...
+      expect(pseudoHtml).toEqual(outdent`
+        <Page>
           <div>
-            <p>
-            ^^^
-              <div>
-              ^^^^^"
+          ^^^^^
+            <tr>
+            ^^^^
       `)
     }
 
@@ -432,7 +622,7 @@ describe('Error overlay for hydration errors', () => {
   })
 
   it('should show the highlighted bad nesting html snippet when bad nesting happened', async () => {
-    const { cleanup, session } = await sandbox(
+    const { browser, cleanup, session } = await sandbox(
       next,
       new Map([
         [
@@ -451,7 +641,9 @@ describe('Error overlay for hydration errors', () => {
     )
 
     await session.waitForAndOpenRuntimeError()
-    expect(await session.hasRedbox()).toBe(true)
+
+    await session.assertHasRedbox()
+    expect(await getRedboxTotalErrorCount(browser)).toBe(1)
 
     const description = await session.getRedboxDescription()
     expect(description).toContain(
@@ -490,7 +682,7 @@ describe('Error overlay for hydration errors', () => {
   })
 
   it('should show error if script is directly placed under html instead of body', async () => {
-    const { cleanup, session } = await sandbox(
+    const { browser, cleanup, session } = await sandbox(
       next,
       new Map([
         [
@@ -523,13 +715,26 @@ describe('Error overlay for hydration errors', () => {
     )
 
     await session.waitForAndOpenRuntimeError()
-    expect(await session.hasRedbox()).toBe(true)
 
+    await session.assertHasRedbox()
+    expect(await getRedboxTotalErrorCount(browser)).toBe(1)
+
+    const description = await session.getRedboxDescription()
+    // FIXME
+    expect(description).toContain(
+      "TypeError: Cannot read properties of undefined (reading 'replace')"
+    )
+
+    // const pseudoHtml = await session.getRedboxComponentStack()
+    // expect(pseudoHtml).toEqual(outdent`
+    //   <script>
+    //   ^^^^^^^^
+    // `)
     await cleanup()
   })
 
   it('should collapse and uncollapse properly when there are many frames', async () => {
-    const { cleanup, session } = await sandbox(
+    const { browser, cleanup, session } = await sandbox(
       next,
       new Map([
         [
@@ -567,9 +772,10 @@ describe('Error overlay for hydration errors', () => {
         ],
       ])
     )
-
     await session.waitForAndOpenRuntimeError()
-    expect(await session.hasRedbox()).toBe(true)
+
+    await session.assertHasRedbox()
+    expect(await getRedboxTotalErrorCount(browser)).toBe(1)
 
     const pseudoHtml = await session.getRedboxComponentStack()
     if (isTurbopack) {
diff --git a/test/lib/development-sandbox.ts b/test/lib/development-sandbox.ts
index d5a301a2588f8..2ea9c673f3516 100644
--- a/test/lib/development-sandbox.ts
+++ b/test/lib/development-sandbox.ts
@@ -1,4 +1,5 @@
 import {
+  assertHasRedbox,
   hasErrorToast,
   getRedboxComponentStack,
   getRedboxDescription,
@@ -112,6 +113,9 @@ export async function sandbox(
           )
         }
       },
+      async assertHasRedbox() {
+        return assertHasRedbox(browser)
+      },
       async hasRedbox() {
         return hasRedbox(browser)
       },
diff --git a/test/lib/next-test-utils.ts b/test/lib/next-test-utils.ts
index 60680f7080e97..a1d093a9d8111 100644
--- a/test/lib/next-test-utils.ts
+++ b/test/lib/next-test-utils.ts
@@ -801,6 +801,33 @@ export async function retry<T>(
   }
 }
 
+export async function assertHasRedbox(browser: BrowserInterface) {
+  try {
+    await retry(
+      async () => {
+        const result = await evaluate(browser, () => {
+          return Boolean(
+            [].slice
+              .call(document.querySelectorAll('nextjs-portal'))
+              .find((p) =>
+                p.shadowRoot.querySelector(
+                  '#nextjs__container_errors_label, #nextjs__container_errors_label'
+                )
+              )
+          )
+        })
+        expect(result).toBe(true)
+      },
+      2000,
+      200
+    )
+  } catch (errorCause) {
+    const error = new Error('Expected Redbox but found none')
+    Error.captureStackTrace(error, assertHasRedbox)
+    throw error
+  }
+}
+
 export async function hasRedbox(browser: BrowserInterface): Promise<boolean> {
   await waitFor(5000)
   const result = await evaluate(browser, () => {