From 3bbaa1769dd555f42e899be19db4aa40476dd01e Mon Sep 17 00:00:00 2001
From: eps1lon <sebastian.silbermann@vercel.com>
Date: Mon, 23 Sep 2024 14:37:29 +0200
Subject: [PATCH] Add extensive hydration error test suite for Pages router

Pages router will support both React 18 and 19 which has significant changes for hydration errors.
The existing acceptance tests only cover App router which runs exclusive on React 19.

Ideally this would be a single test suite that just forks on the assertion. However, there are a lot of differences between App router and Pages router and putting that into a single file takes more time.

The goal here is to not regress any further with Pages router when extending support to 18.
Once RC2 landed, I'll merge these test suites.
---
 .../acceptance-app/hydration-error.test.ts    |   2 +-
 .../acceptance/hydration-error.test.ts        | 830 +++++++++++++++++-
 test/development/basic/hmr.test.ts            |  19 -
 .../basic/hmr/pages/hydration-error.js        |   3 -
 test/lib/next-test-utils.ts                   |   2 +-
 5 files changed, 814 insertions(+), 42 deletions(-)
 delete mode 100644 test/development/basic/hmr/pages/hydration-error.js

diff --git a/test/development/acceptance-app/hydration-error.test.ts b/test/development/acceptance-app/hydration-error.test.ts
index 6d5baa3a01566a..35888a6cd0ed59 100644
--- a/test/development/acceptance-app/hydration-error.test.ts
+++ b/test/development/acceptance-app/hydration-error.test.ts
@@ -7,7 +7,7 @@ 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,
diff --git a/test/development/acceptance/hydration-error.test.ts b/test/development/acceptance/hydration-error.test.ts
index 47590983fd1e6b..ce60f9acbc46bc 100644
--- a/test/development/acceptance/hydration-error.test.ts
+++ b/test/development/acceptance/hydration-error.test.ts
@@ -1,11 +1,14 @@
 /* eslint-env jest */
 import { sandbox } from 'development-sandbox'
 import { FileRef, nextTestSetup } from 'e2e-utils'
-import { outdent } from 'outdent'
 import path from 'path'
+import { outdent } from 'outdent'
+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', () => {
-  const { next } = nextTestSetup({
+describe('Error overlay for hydration errors in Pages router', () => {
+  const { next, isTurbopack } = nextTestSetup({
     files: new FileRef(path.join(__dirname, 'fixtures', 'default-template')),
     skipStart: true,
   })
@@ -31,31 +34,61 @@ describe('Error overlay for hydration errors', () => {
     )
 
     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"
-      `)
+      "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"
+    `)
+
     expect(await session.getRedboxDescriptionWarning()).toMatchInlineSnapshot(`
-        "- A server/client branch \`if (typeof window !== 'undefined')\`.
-        - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
-        - Date formatting in a user's locale which doesn't match the server.
-        - External changing data without sending a snapshot of it along with the HTML.
-        - Invalid HTML tag nesting.
+      "- A server/client branch \`if (typeof window !== 'undefined')\`.
+      - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+      - Date formatting in a user's locale which doesn't match the server.
+      - External changing data without sending a snapshot of it along with the HTML.
+      - Invalid HTML tag nesting.
 
-        It can also happen if the client has a browser extension installed which messes with the HTML before React loaded."
+      It can also happen if the client has a browser extension installed which messes with the HTML before React loaded."
+    `)
+
+    const pseudoHtml = await session.getRedboxComponentStack()
+
+    if (isTurbopack) {
+      expect(pseudoHtml).toMatchInlineSnapshot(`
+        "...
+          <AppContainer>
+            <Container fn={function fn}>
+              <ReactDevOverlay>
+                <ErrorBoundary globalOverlay={undefined} isMounted={false} onError={function}>
+                  <PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
+                    <App pageProps={{}} Component={function Mismatch} err={undefined} router={{sdc:{},sbc:{}, ...}}>
+                      <Mismatch>
+                        <div className="parent">
+                          <main className="child">
+        +                    client
+        -                    server"
       `)
+    } else {
+      expect(pseudoHtml).toMatchInlineSnapshot(`
+        "...
+          <div className="parent">
+            <main className="child">
+        +      client
+        -      server"
+      `)
+    }
 
     await session.patch(
       'index.js',
       outdent`
+      'use client'
       export default function Mismatch() {
-          return (
-            <div className="parent">
-              <main className="child">Value</main>
-            </div>
-          );
-        }
+        return (
+          <div className="parent">
+            <main className="child">Value</main>
+          </div>
+        );
+      }
     `
     )
 
@@ -65,4 +98,765 @@ describe('Error overlay for hydration errors', () => {
 
     await cleanup()
   })
+
+  it('should show correct hydration error when client renders an extra element', async () => {
+    const { browser, cleanup, session } = await sandbox(
+      next,
+      new Map([
+        [
+          'index.js',
+          outdent`
+            const isClient = typeof window !== 'undefined'
+            export default function Mismatch() {
+              return (
+                <div className="parent">
+                  {isClient && <main className="only" />}
+                </div>
+              );
+            }
+          `,
+        ],
+      ])
+    )
+
+    await session.assertHasRedbox()
+    expect(await getRedboxTotalErrorCount(browser)).toBe(1)
+
+    const pseudoHtml = await session.getRedboxComponentStack()
+    if (isTurbopack) {
+      expect(pseudoHtml).toMatchInlineSnapshot(`
+        "...
+          <AppContainer>
+            <Container fn={function fn}>
+              <ReactDevOverlay>
+                <ErrorBoundary globalOverlay={undefined} isMounted={false} onError={function}>
+                  <PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
+                    <App pageProps={{}} Component={function Mismatch} err={undefined} router={{sdc:{},sbc:{}, ...}}>
+                      <Mismatch>
+                        <div className="parent">
+                          ...
+        +                  <main className="only">"
+      `)
+    } else {
+      expect(pseudoHtml).toMatchInlineSnapshot(`
+        "...
+          <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"
+    `)
+
+    await cleanup()
+  })
+
+  it('should show correct hydration error when client renders an extra text node', async () => {
+    const { browser, cleanup, session } = await sandbox(
+      next,
+      new Map([
+        [
+          'index.js',
+          outdent`
+            const isClient = typeof window !== 'undefined'
+            export default function Mismatch() {
+              return (
+                <div className="parent">
+                  <header className="1" />
+                  {isClient && "second"}
+                  <footer className="3" />
+                </div>
+              );
+            }
+          `,
+        ],
+      ])
+    )
+
+    await session.assertHasRedbox()
+    expect(await getRedboxTotalErrorCount(browser)).toBe(1)
+
+    const pseudoHtml = await session.getRedboxComponentStack()
+    if (isTurbopack) {
+      expect(pseudoHtml).toMatchInlineSnapshot(`
+        "...
+          <AppContainer>
+            <Container fn={function fn}>
+              <ReactDevOverlay>
+                <ErrorBoundary globalOverlay={undefined} isMounted={false} onError={function}>
+                  <PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
+                    <App pageProps={{}} Component={function Mismatch} err={undefined} router={{sdc:{},sbc:{}, ...}}>
+                      <Mismatch>
+                        <div className="parent">
+        +                  second
+        -                  <footer className="3">"
+      `)
+    } else {
+      expect(pseudoHtml).toMatchInlineSnapshot(`
+        "...
+          <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"
+    `)
+
+    await cleanup()
+  })
+
+  it('should show correct hydration error when server renders an extra element', async () => {
+    const { browser, cleanup, session } = await sandbox(
+      next,
+      new Map([
+        [
+          'index.js',
+          outdent`
+            const isClient = typeof window !== 'undefined'
+            export default function Mismatch() {
+              return (
+                <div className="parent">
+                  {!isClient && <main className="only" />}
+                </div>
+              );
+            }
+          `,
+        ],
+      ])
+    )
+
+    await session.assertHasRedbox()
+    expect(await getRedboxTotalErrorCount(browser)).toBe(1)
+
+    const pseudoHtml = await session.getRedboxComponentStack()
+    if (isTurbopack) {
+      expect(pseudoHtml).toMatchInlineSnapshot(`
+        "<Root callbacks={[...]}>
+          <AppContainer>
+            <Container fn={function fn}>
+              <ReactDevOverlay>
+                <ErrorBoundary globalOverlay={undefined} isMounted={false} onError={function}>
+                  <PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
+                    <App pageProps={{}} Component={function Mismatch} err={undefined} router={{sdc:{},sbc:{}, ...}}>
+                      <Mismatch>
+                        <div className="parent">
+        -                  <main className="only">"
+      `)
+    } else {
+      expect(pseudoHtml).toMatchInlineSnapshot(`
+        "<Mismatch>
+          <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"
+    `)
+
+    await cleanup()
+  })
+
+  it('should show correct hydration error when server renders an extra text node', async () => {
+    const { browser, cleanup, session } = await sandbox(
+      next,
+      new Map([
+        [
+          'index.js',
+          outdent`
+            const isClient = typeof window !== 'undefined'
+            export default function Mismatch() {
+              return <div className="parent">{!isClient && "only"}</div>;
+            }
+          `,
+        ],
+      ])
+    )
+
+    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"
+    `)
+
+    const pseudoHtml = await session.getRedboxComponentStack()
+
+    if (isTurbopack) {
+      expect(pseudoHtml).toMatchInlineSnapshot(`
+        "<Root callbacks={[...]}>
+          <AppContainer>
+            <Container fn={function fn}>
+              <ReactDevOverlay>
+                <ErrorBoundary globalOverlay={undefined} isMounted={false} onError={function}>
+                  <PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
+                    <App pageProps={{}} Component={function Mismatch} err={undefined} router={{sdc:{},sbc:{}, ...}}>
+                      <Mismatch>
+                        <div className="parent">
+        -                  only"
+      `)
+    } else {
+      expect(pseudoHtml).toMatchInlineSnapshot(`
+        "<Mismatch>
+          <div className="parent">
+        -    only"
+      `)
+    }
+
+    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([
+        [
+          'index.js',
+          outdent`
+            export default function Page() {
+              return (
+                <table>
+                  <tbody>
+                    <tr>test</tr>
+                  </tbody>
+                </table>
+              )
+            }
+          `,
+        ],
+      ])
+    )
+
+    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()
+    if (isTurbopack) {
+      expect(pseudoHtml).toMatchInlineSnapshot(`
+        "<Root callbacks={[...]}>
+          <AppContainer>
+            <Container fn={function fn}>
+              <ReactDevOverlay>
+                <ErrorBoundary globalOverlay={undefined} isMounted={false} onError={function}>
+                  <PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
+                    <App pageProps={{}} Component={function Page} err={undefined} router={{sdc:{},sbc:{}, ...}}>
+                      <Page>
+                        ...
+        +                <table>
+        -                test"
+      `)
+    } else {
+      expect(pseudoHtml).toMatchInlineSnapshot(`
+        "<Page>
+          ...
+        +  <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([
+        [
+          'index.js',
+          outdent`
+            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)
+
+    //
+
+    // 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,
+      new Map([
+        [
+          'index.js',
+          outdent`
+            import React from "react"
+            const isClient = typeof window !== 'undefined'
+            export default function Mismatch() {
+              return (
+                <div className="parent">
+                  <React.Suspense fallback={<p>Loading...</p>}>
+                    <header className="1" />
+                    {isClient && <main className="second" />}
+                    <footer className="3" />
+                  </React.Suspense>
+                </div>
+              );
+            }
+          `,
+        ],
+      ])
+    )
+
+    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"
+    `)
+
+    await cleanup()
+  })
+
+  it('should not show a hydration error when using `useId` in a client component', async () => {
+    const { cleanup, browser } = await sandbox(
+      next,
+      new Map([
+        [
+          'index.js',
+          outdent`
+            'use client'
+
+            import { useId } from "react"
+
+            export default function Page() {
+              let id = useId();
+              return (
+                <div className="parent" data-id={id}>
+                  Hello World
+                </div>
+              );
+            }
+          `,
+        ],
+      ])
+    )
+
+    const logs = await browser.log()
+    const errors = logs
+      .filter((x) => x.source === 'error')
+      .map((x) => x.message)
+      .join('\n')
+
+    expect(errors).not.toInclude(
+      'Warning: Prop `%s` did not match. Server: %s Client: %s'
+    )
+
+    await cleanup()
+  })
+
+  it('should only show one hydration error when bad nesting happened - p under p', async () => {
+    const { cleanup, session, browser } = await sandbox(
+      next,
+      new Map([
+        [
+          'index.js',
+          outdent`
+            'use client'
+
+            export default function Page() {
+              return (
+                <p>
+                  <p>Nested p tags</p>
+                </p>
+              )
+            }
+          `,
+        ],
+      ])
+    )
+
+    await session.assertHasRedbox()
+    expect(await getRedboxTotalErrorCount(browser)).toBe(1)
+
+    const description = await session.getRedboxDescription()
+    expect(description).toContain(
+      'In HTML, <p> cannot be a descendant of <p>.\nThis will cause a hydration error.'
+    )
+
+    const pseudoHtml = await session.getRedboxComponentStack()
+
+    // Turbopack currently has longer component stack trace
+    if (isTurbopack) {
+      expect(pseudoHtml).toMatchInlineSnapshot(`
+        "...
+          <Page>
+            <p>
+            ^^^
+              <p>
+              ^^^"
+      `)
+    } else {
+      expect(pseudoHtml).toMatchInlineSnapshot(`
+        "<Page>
+          <p>
+          ^^^
+            <p>
+            ^^^"
+      `)
+    }
+
+    await cleanup()
+  })
+
+  it('should only show one hydration error when bad nesting happened - div under p', async () => {
+    const { cleanup, session, browser } = await sandbox(
+      next,
+      new Map([
+        [
+          'index.js',
+          outdent`
+            'use client'
+
+            export default function Page() {
+              return (
+                <div>
+                  <div>
+                    <p>
+                      <div>Nested div under p tag</div>
+                    </p>
+                  </div>
+                </div>
+              )
+            }
+          `,
+        ],
+      ])
+    )
+
+    await session.assertHasRedbox()
+    expect(await getRedboxTotalErrorCount(browser)).toBe(1)
+
+    const description = await session.getRedboxDescription()
+    expect(description).toContain(
+      'In HTML, <div> cannot be a descendant of <p>.\nThis will cause a hydration error.'
+    )
+
+    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([
+        [
+          'index.js',
+          outdent`
+            export default function Page() {
+              return <div><tr></tr></div>
+            }
+          `,
+        ],
+      ])
+    )
+
+    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).toEqual(outdent`
+        ...
+          <Page>
+            <div>
+            ^^^^^
+              <tr>
+              ^^^^
+      `)
+    } else {
+      expect(pseudoHtml).toEqual(outdent`
+        <Page>
+          <div>
+          ^^^^^
+            <tr>
+            ^^^^
+      `)
+    }
+
+    await cleanup()
+  })
+
+  it('should show the highlighted bad nesting html snippet when bad nesting happened', async () => {
+    const { browser, cleanup, session } = await sandbox(
+      next,
+      new Map([
+        [
+          'index.js',
+          outdent`
+            'use client'
+
+            export default function Page() {
+              return (
+                <p><span><span><span><span><p>hello world</p></span></span></span></span></p>
+              )
+            }
+          `,
+        ],
+      ])
+    )
+
+    await session.assertHasRedbox()
+    expect(await getRedboxTotalErrorCount(browser)).toBe(1)
+
+    const description = await session.getRedboxDescription()
+    expect(description).toContain(
+      'In HTML, <p> cannot be a descendant of <p>.\nThis will cause a hydration error.'
+    )
+
+    const pseudoHtml = await session.getRedboxComponentStack()
+
+    // Turbopack currently has longer component stack trace
+    if (isTurbopack) {
+      expect(pseudoHtml).toMatchInlineSnapshot(`
+        "...
+          <Page>
+            <p>
+            ^^^
+              <span>
+                ...
+                  <span>
+                    <p>
+                    ^^^"
+      `)
+    } else {
+      expect(pseudoHtml).toMatchInlineSnapshot(`
+        "<Page>
+          <p>
+          ^^^
+            <span>
+              ...
+                <span>
+                  <p>
+                  ^^^"
+      `)
+    }
+
+    await cleanup()
+  })
+
+  it('should show error if script is directly placed under html instead of body', async () => {
+    const { session } = await sandbox(
+      next,
+      new Map([
+        [
+          'pages/_document.js',
+          outdent`
+            import { Html, Head, Main, NextScript } from 'next/document'
+            import Script from 'next/script'
+ 
+            export default function Document() {
+              return (
+                <Html lang="en">
+                  <Head />
+                  <body>
+                    <Main />
+                    <NextScript />
+                  </body>
+                  <Script
+                    src="https://example.com/script.js"
+                    strategy="beforeInteractive"
+                  />
+                </Html>
+              )
+            }
+          `,
+        ],
+        [
+          'index.js',
+          outdent`
+            export default function Page() {
+              return <div>Hello World</div>
+            }
+          `,
+        ],
+      ])
+    )
+
+    // FIXME: Should have a redbox just like with App router
+    await session.assertNoRedbox()
+  })
+
+  it('should collapse and uncollapse properly when there are many frames', async () => {
+    const { browser, cleanup, session } = await sandbox(
+      next,
+      new Map([
+        [
+          'index.js',
+          outdent`
+            'use client'
+
+            const isServer = typeof window === 'undefined'
+            
+            function Mismatch() {
+              return (
+                <p>
+                  <span>
+                    
+                    hello {isServer ? 'server' : 'client'}
+                  </span>
+                </p>
+              )
+            }
+            
+            export default function Page() {
+              return (
+                <div>
+                  <div>
+                    <div>
+                      <div>
+                        <Mismatch />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )
+            }
+          `,
+        ],
+      ])
+    )
+
+    await session.assertHasRedbox()
+    expect(await getRedboxTotalErrorCount(browser)).toBe(1)
+
+    const pseudoHtml = await session.getRedboxComponentStack()
+    if (isTurbopack) {
+      // FIXME: Should not fork on Turbopack i.e. match the snapshot in the else-branch
+      expect(pseudoHtml).toMatchInlineSnapshot(`
+        "...
+          ...
+        +  client
+        -  server"
+      `)
+    } else {
+      expect(pseudoHtml).toMatchInlineSnapshot(`
+        "...
+          <div>
+            <div>
+              <div>
+                <div>
+                  <Mismatch>
+                    <p>
+                      <span>
+        +                client
+        -                server"
+      `)
+    }
+
+    await session.toggleCollapseComponentStack()
+
+    const fullPseudoHtml = await session.getRedboxComponentStack()
+    if (isTurbopack) {
+      expect(fullPseudoHtml).toMatchInlineSnapshot(`
+        "...
+          <PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
+            <App pageProps={{}} Component={function Page} err={undefined} router={{sdc:{},sbc:{}, ...}}>
+              <Page>
+                <div>
+                  <div>
+                    <div>
+                      <div>
+                        <Mismatch>
+                          <p>
+                            <span>
+                              ...
+        +                      client
+        -                      server"
+      `)
+    } else {
+      expect(fullPseudoHtml).toMatchInlineSnapshot(`
+        "...
+          <PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
+            <App pageProps={{}} Component={function Page} err={undefined} router={{sdc:{},sbc:{}, ...}}>
+              <Page>
+                <div>
+                  <div>
+                    <div>
+                      <div>
+                        <Mismatch>
+                          <p>
+                            <span>
+        +                      client
+        -                      server"
+      `)
+    }
+
+    await cleanup()
+  })
 })
diff --git a/test/development/basic/hmr.test.ts b/test/development/basic/hmr.test.ts
index 3dad5302c2cb82..eb3d978c91060f 100644
--- a/test/development/basic/hmr.test.ts
+++ b/test/development/basic/hmr.test.ts
@@ -35,25 +35,6 @@ describe.each([
   })
   afterAll(() => next.destroy())
 
-  it('should show hydration error correctly', async () => {
-    const browser = await webdriver(next.url, basePath + '/hydration-error', {
-      pushErrorAsConsoleLog: true,
-    })
-    await retry(async () => {
-      const logs = await browser.log()
-      expect(logs).toEqual(
-        expect.arrayContaining([
-          {
-            message: expect.stringContaining(
-              'https://react.dev/link/hydration-mismatch'
-            ),
-            source: 'error',
-          },
-        ])
-      )
-    })
-  })
-
   it('should have correct router.isReady for auto-export page', async () => {
     let browser = await webdriver(next.url, basePath + '/auto-export-is-ready')
 
diff --git a/test/development/basic/hmr/pages/hydration-error.js b/test/development/basic/hmr/pages/hydration-error.js
deleted file mode 100644
index 46ffdde96a2fba..00000000000000
--- a/test/development/basic/hmr/pages/hydration-error.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Page(props) {
-  return <p>is server {typeof window}</p>
-}
diff --git a/test/lib/next-test-utils.ts b/test/lib/next-test-utils.ts
index 8a86c6a804ae22..8ee41e63b9fedb 100644
--- a/test/lib/next-test-utils.ts
+++ b/test/lib/next-test-utils.ts
@@ -893,7 +893,7 @@ export async function hasErrorToast(
 }
 
 export async function waitForAndOpenRuntimeError(browser: BrowserInterface) {
-  return browser.waitForElementByCss('[data-nextjs-toast]').click()
+  return browser.waitForElementByCss('[data-nextjs-toast]', 5000).click()
 }
 
 export async function getRedboxHeader(browser: BrowserInterface) {