[test] fix bad test fixuture for perf test #77804

huozhi · 2025-04-03T22:32:59Z

What

Notice the test failing with error

[Error: The `<head>` tag may only be rendered once.]
Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
Error: The `<head>` tag may only be rendered once.
    at pushStartInstance (/private/var/folders/wv/xyy9xyz10sl4twdx_hp25mjc0000gn/T/next-install-774bc5a37376114
1677200de6e06e9fd9908f6aa5d9bf1124d02f79d153de089/node_modules/.pnpm/[email protected][email protected]/node_modules
/react-dom/cjs/react-dom-server.edge.production.js:2161:17)

Turns out we had an extra <head> in the html

huozhi · 2025-04-03T22:33:16Z

[test] fix react 19.1 related tests #77809
[test] fix bad test fixuture for perf test #77804 👈 (View in Graphite)
canary

This stack of pull requests is managed by Graphite. Learn more about stacking.

ijjk · 2025-04-03T22:41:26Z

Failing test suites

Commit: 31aaad2

pnpm test-start-turbo test/production/custom-server/custom-server.test.ts (turbopack)

custom server > with app dir > should render pages with installed react

Expand output

● custom server › with app dir › should render pages with installed react

expect(received).toMatch(expected)

Expected pattern: /pages: 19.0.0/
Received string:  "pages: 19.1.0{\"props\":{\"pageProps\":{}},\"page\":\"/2\",\"query\":{},\"buildId\":\"-JKPrL0IU0SICYHXKK_Al\",\"nextExport\":true,\"autoExport\":true,\"isFallback\":false,\"scriptLoader\":[]}"

  38 |         expect($('body').text()).toMatch(/pages: 18\.\d+\.\d+\{/)
  39 |       } else {
> 40 |         expect($('body').text()).toMatch(/pages: 19.0.0/)
     |                                  ^
  41 |       }
  42 |     })
  43 |   })

  at Object.toMatch (production/custom-server/custom-server.test.ts:40:34)

Read more about building and testing Next.js in contributing.md.

pnpm test-dev-turbo test/development/acceptance/hydration-error.test.ts (turbopack)

Error overlay for hydration errors in Pages router > should show correct hydration error when client and server render different text
Error overlay for hydration errors in Pages router > should show correct hydration error when client renders an extra element
Error overlay for hydration errors in Pages router > should show correct hydration error when client renders an extra text node
Error overlay for hydration errors in Pages router > should show correct hydration error when server renders an extra element
Error overlay for hydration errors in Pages router > should show correct hydration error when server renders an extra text node
Error overlay for hydration errors in Pages router > should show correct hydration error when server renders an extra text node in an invalid place
Error overlay for hydration errors in Pages router > should show correct hydration error when server renders an extra whitespace in an invalid place
Error overlay for hydration errors in Pages router > should show correct hydration error when client renders an extra node inside Suspense content
Error overlay for hydration errors in Pages router > should only show one hydration error when bad nesting happened - p under p
Error overlay for hydration errors in Pages router > should only show one hydration error when bad nesting happened - div under p
Error overlay for hydration errors in Pages router > should only show one hydration error when bad nesting happened - div > tr
Error overlay for hydration errors in Pages router > should show the highlighted bad nesting html snippet when bad nesting happened

Expand output

● Error overlay for hydration errors in Pages router › should show correct hydration error when client and server render different text

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Error overlay for hydration errors in Pages router should show correct hydration error when client and server render different text 1`

- Snapshot  - 2
+ Received  + 7

@@ -15,8 +15,13 @@
            ...",
    "count": 1,
    "description": "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:",
    "environmentLabel": null,
    "label": "Runtime Error",
-   "source": null,
-   "stack": [],
+   "source": "index.js (5:9) @ Mismatch
+ > 5 |         <main className="child">{isClient ? "client" : "server"}</main>
+     |         ^",
+   "stack": [
+     "main <anonymous> (0:0)",
+     "Mismatch index.js (5:9)",
+   ],
  }

  92 |       `)
  93 |     } else {
> 94 |       await expect(browser).toDisplayRedbox(`
     |                             ^
  95 |        {
  96 |          "componentStack": "...
  97 |            <AppContainer>

  at Object.toDisplayRedbox (development/acceptance/hydration-error.test.ts:94:29)

● Error overlay for hydration errors in Pages router › should show correct hydration error when client renders an extra element

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Error overlay for hydration errors in Pages router should show correct hydration error when client renders an extra element 1`

- Snapshot  - 2
+ Received  + 7

@@ -13,8 +13,13 @@
            ...",
    "count": 1,
    "description": "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:",
    "environmentLabel": null,
    "label": "Runtime Error",
-   "source": null,
-   "stack": [],
+   "source": "index.js (5:20) @ Mismatch
+ > 5 |       {isClient && <main className="only" />}
+     |                    ^",
+   "stack": [
+     "main <anonymous> (0:0)",
+     "Mismatch index.js (5:20)",
+   ],
  }

  176 |       `)
  177 |     } else {
> 178 |       await expect(browser).toDisplayRedbox(`
      |                             ^
  179 |        {
  180 |          "componentStack": "...
  181 |            <AppContainer>

  at Object.toDisplayRedbox (development/acceptance/hydration-error.test.ts:178:29)

● Error overlay for hydration errors in Pages router › should show correct hydration error when client renders an extra text node

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Error overlay for hydration errors in Pages router should show correct hydration error when client renders an extra text node 1`

- Snapshot  - 2
+ Received  + 7

@@ -16,8 +16,13 @@
            ...",
    "count": 1,
    "description": "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:",
    "environmentLabel": null,
    "label": "Runtime Error",
-   "source": null,
-   "stack": [],
+   "source": "index.js (4:5) @ Mismatch
+ > 4 |     <div className="parent">
+     |     ^",
+   "stack": [
+     "div <anonymous> (0:0)",
+     "Mismatch index.js (4:5)",
+   ],
  }

  244 |       `)
  245 |     } else {
> 246 |       await expect(browser).toDisplayRedbox(`
      |                             ^
  247 |        {
  248 |          "componentStack": "...
  249 |            <AppContainer>

  at Object.toDisplayRedbox (development/acceptance/hydration-error.test.ts:246:29)

● Error overlay for hydration errors in Pages router › should show correct hydration error when server renders an extra element

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Error overlay for hydration errors in Pages router should show correct hydration error when server renders an extra element 1`

- Snapshot  - 2
+ Received  + 7

@@ -14,8 +14,13 @@
            ...",
    "count": 1,
    "description": "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:",
    "environmentLabel": null,
    "label": "Runtime Error",
-   "source": null,
-   "stack": [],
+   "source": "index.js (4:5) @ Mismatch
+ > 4 |     <div className="parent">
+     |     ^",
+   "stack": [
+     "div <anonymous> (0:0)",
+     "Mismatch index.js (4:5)",
+   ],
  }

  307 |       `)
  308 |     } else {
> 309 |       await expect(browser).toDisplayRedbox(`
      |                             ^
  310 |        {
  311 |          "componentStack": "<Root callbacks={[...]}>
  312 |            <Head>

  at Object.toDisplayRedbox (development/acceptance/hydration-error.test.ts:309:29)

● Error overlay for hydration errors in Pages router › should show correct hydration error when server renders an extra text node

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Error overlay for hydration errors in Pages router should show correct hydration error when server renders an extra text node 1`

- Snapshot  - 2
+ Received  + 7

@@ -14,8 +14,13 @@
            ...",
    "count": 1,
    "description": "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:",
    "environmentLabel": null,
    "label": "Runtime Error",
-   "source": null,
-   "stack": [],
+   "source": "index.js (3:10) @ Mismatch
+ > 3 |   return <div className="parent">{!isClient && "only"}</div>;
+     |          ^",
+   "stack": [
+     "div <anonymous> (0:0)",
+     "Mismatch index.js (3:10)",
+   ],
  }

  366 |       `)
  367 |     } else {
> 368 |       await expect(browser).toDisplayRedbox(`
      |                             ^
  369 |        {
  370 |          "componentStack": "<Root callbacks={[...]}>
  371 |            <Head>

  at Object.toDisplayRedbox (development/acceptance/hydration-error.test.ts:368:29)

● Error overlay for hydration errors in Pages router › should show correct hydration error when server renders an extra text node in an invalid place

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Error overlay for hydration errors in Pages router should show correct hydration error when server renders an extra text node in an invalid place 1`

- Snapshot  - 2
+ Received  + 7

@@ -14,8 +14,13 @@
            ...",
    "count": 1,
    "description": "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:",
    "environmentLabel": null,
    "label": "Runtime Error",
-   "source": null,
-   "stack": [],
+   "source": "index.js (3:5) @ Page
+ > 3 |     <table>
+     |     ^",
+   "stack": [
+     "table <anonymous> (0:0)",
+     "Page index.js (3:5)",
+   ],
  }

  437 |       `)
  438 |     } else {
> 439 |       await expect(browser).toDisplayRedbox(`
      |                             ^
  440 |        {
  441 |          "componentStack": "<Root callbacks={[...]}>
  442 |            <Head>

  at Object.toDisplayRedbox (development/acceptance/hydration-error.test.ts:439:29)

● Error overlay for hydration errors in Pages router › should show correct hydration error when server renders an extra whitespace in an invalid place

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Error overlay for hydration errors in Pages router should show correct hydration error when server renders an extra whitespace in an invalid place 1`

- Snapshot  - 2
+ Received  + 7

@@ -14,8 +14,13 @@
            ...",
    "count": 1,
    "description": "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:",
    "environmentLabel": null,
    "label": "Runtime Error",
-   "source": null,
-   "stack": [],
+   "source": "index.js (3:5) @ Page
+ > 3 |     <table>
+     |     ^",
+   "stack": [
+     "table <anonymous> (0:0)",
+     "Page index.js (3:5)",
+   ],
  }

  502 |       `)
  503 |     } else {
> 504 |       await expect(browser).toDisplayRedbox(`
      |                             ^
  505 |        {
  506 |          "componentStack": "<Root callbacks={[...]}>
  507 |            <Head>

  at Object.toDisplayRedbox (development/acceptance/hydration-error.test.ts:504:29)

● Error overlay for hydration errors in Pages router › should show correct hydration error when client renders an extra node inside Suspense content

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Error overlay for hydration errors in Pages router should show correct hydration error when client renders an extra node inside Suspense content 1`

- Snapshot  - 2
+ Received  + 7

@@ -15,8 +15,13 @@
        ...",
    "count": 1,
    "description": "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:",
    "environmentLabel": null,
    "label": "Runtime Error",
-   "source": null,
-   "stack": [],
+   "source": "index.js (8:22) @ Mismatch
+ >  8 |         {isClient && <main className="second" />}
+      |                      ^",
+   "stack": [
+     "main <anonymous> (0:0)",
+     "Mismatch index.js (8:22)",
+   ],
  }

  574 |       `)
  575 |     } else {
> 576 |       await expect(browser).toDisplayRedbox(`
      |                             ^
  577 |        {
  578 |          "componentStack": "...
  579 |            <PagesDevOverlay>

  at Object.toDisplayRedbox (development/acceptance/hydration-error.test.ts:576:29)

● Error overlay for hydration errors in Pages router › should only show one hydration error when bad nesting happened - p under p

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Error overlay for hydration errors in Pages router should only show one hydration error when bad nesting happened - p under p 1`

- Snapshot  - 2
+ Received  + 7

@@ -15,8 +15,13 @@
    "count": 1,
    "description": "In HTML, <p> cannot be a descendant of <p>.
  This will cause a hydration error.",
    "environmentLabel": null,
    "label": "Runtime Error",
-   "source": null,
-   "stack": [],
+   "source": "index.js (4:7) @ Page
+ > 4 |       <p>Nested p tags</p>
+     |       ^",
+   "stack": [
+     "p <anonymous> (0:0)",
+     "Page index.js (4:7)",
+   ],
  }

  673 |       `)
  674 |     } else {
> 675 |       await expect(browser).toDisplayRedbox(`
      |                             ^
  676 |        {
  677 |          "componentStack": "<Root callbacks={[...]}>
  678 |            <Head>

  at Object.toDisplayRedbox (development/acceptance/hydration-error.test.ts:675:29)

● Error overlay for hydration errors in Pages router › should only show one hydration error when bad nesting happened - div under p

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Error overlay for hydration errors in Pages router should only show one hydration error when bad nesting happened - div under p 1`

- Snapshot  - 2
+ Received  + 7

@@ -15,8 +15,13 @@
    "count": 1,
    "description": "In HTML, <div> cannot be a descendant of <p>.
  This will cause a hydration error.",
    "environmentLabel": null,
    "label": "Runtime Error",
-   "source": null,
-   "stack": [],
+   "source": "index.js (6:11) @ Page
+ > 6 |           <div>Nested div under p tag</div>
+     |           ^",
+   "stack": [
+     "div <anonymous> (0:0)",
+     "Page index.js (6:11)",
+   ],
  }

  745 |       `)
  746 |     } else {
> 747 |       await expect(browser).toDisplayRedbox(`
      |                             ^
  748 |        {
  749 |          "componentStack": "...
  750 |            <Container fn={function fn}>

  at Object.toDisplayRedbox (development/acceptance/hydration-error.test.ts:747:29)

● Error overlay for hydration errors in Pages router › should only show one hydration error when bad nesting happened - div > tr

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Error overlay for hydration errors in Pages router should only show one hydration error when bad nesting happened - div > tr 1`

- Snapshot  - 2
+ Received  + 7

@@ -15,8 +15,13 @@
    "count": 1,
    "description": "In HTML, <tr> cannot be a child of <div>.
  This will cause a hydration error.",
    "environmentLabel": null,
    "label": "Runtime Error",
-   "source": null,
-   "stack": [],
+   "source": "index.js (2:15) @ Page
+ > 2 |   return <div><tr></tr></div>
+     |               ^",
+   "stack": [
+     "tr <anonymous> (0:0)",
+     "Page index.js (2:15)",
+   ],
  }

  807 |       `)
  808 |     } else {
> 809 |       await expect(browser).toDisplayRedbox(`
      |                             ^
  810 |        {
  811 |          "componentStack": "<Root callbacks={[...]}>
  812 |            <Head>

  at Object.toDisplayRedbox (development/acceptance/hydration-error.test.ts:809:29)

● Error overlay for hydration errors in Pages router › should show the highlighted bad nesting html snippet when bad nesting happened

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Error overlay for hydration errors in Pages router should show the highlighted bad nesting html snippet when bad nesting happened 1`

- Snapshot  - 2
+ Received  + 7

@@ -19,8 +19,13 @@
    "count": 1,
    "description": "In HTML, <p> cannot be a descendant of <p>.
  This will cause a hydration error.",
    "environmentLabel": null,
    "label": "Runtime Error",
-   "source": null,
-   "stack": [],
+   "source": "index.js (3:32) @ Page
+ > 3 |     <p><span><span><span><span><p>hello world</p></span></span></span></span></p>
+     |                                ^",
+   "stack": [
+     "p <anonymous> (0:0)",
+     "Page index.js (3:32)",
+   ],
  }

  875 |       `)
  876 |     } else {
> 877 |       await expect(browser).toDisplayRedbox(`
      |                             ^
  878 |        {
  879 |          "componentStack": "<Root callbacks={[...]}>
  880 |            <Head>

  at Object.toDisplayRedbox (development/acceptance/hydration-error.test.ts:877:29)

Read more about building and testing Next.js in contributing.md.

pnpm test-dev test/e2e/app-dir/rsc-basic/rsc-basic.test.ts

app dir - rsc basics > should be able to navigate between rsc routes

Expand output

● app dir - rsc basics › should be able to navigate between rsc routes

request.allHeaders: Target page, context or browser has been closed

  168 |         page.on('request', (request) => {
  169 |           requestsCount++
> 170 |           return request.allHeaders().then((headers) => {
      |                          ^
  171 |             if (
  172 |               headers['RSC'.toLowerCase()] === '1' &&
  173 |               // Prefetches also include `RSC`

  at Page.allHeaders (e2e/app-dir/rsc-basic/rsc-basic.test.ts:170:26)

Read more about building and testing Next.js in contributing.md.

huozhi · 2025-04-03T22:55:49Z

The failing ones are react tests, related to new minor 19.1, will address in another PR

[test] fix bad test fixuture for perf test

31aaad2

ijjk added created-by: Next.js team PRs by the Next.js team. tests labels Apr 3, 2025

huozhi marked this pull request as ready for review April 3, 2025 22:34

huozhi requested review from ztanner and ijjk April 3, 2025 22:56

huozhi mentioned this pull request Apr 3, 2025

[test] fix react 19.1 related tests #77809

Merged

ijjk approved these changes Apr 3, 2025

View reviewed changes

huozhi merged commit ec8b3dc into canary Apr 3, 2025
126 of 133 checks passed

huozhi deleted the huozhi/04-03-test_fix_perf_test branch April 3, 2025 23:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[test] fix bad test fixuture for perf test #77804

[test] fix bad test fixuture for perf test #77804

huozhi commented Apr 3, 2025 •

edited

Loading

huozhi commented Apr 3, 2025 •

edited

Loading

ijjk commented Apr 3, 2025 •

edited

Loading

huozhi commented Apr 3, 2025

[test] fix bad test fixuture for perf test #77804

[test] fix bad test fixuture for perf test #77804

Conversation

huozhi commented Apr 3, 2025 • edited Loading

What

huozhi commented Apr 3, 2025 • edited Loading

ijjk commented Apr 3, 2025 • edited Loading

Failing test suites

huozhi commented Apr 3, 2025

huozhi commented Apr 3, 2025 •

edited

Loading

huozhi commented Apr 3, 2025 •

edited

Loading

ijjk commented Apr 3, 2025 •

edited

Loading