From b3142ae9a788adb4962ef8b0577a40430ebe4036 Mon Sep 17 00:00:00 2001
From: Sebastian Sebbie Silbermann <sebastian.silbermann@vercel.com>
Date: Wed, 7 May 2025 20:10:44 +0200
Subject: [PATCH] [test] Move test selectors as close to the actual value as
 possible

React will start outlining boundaries if they add
too many bytes to the next completion.
This doesn't have any perceivable effect but some
of our tests use Cheerio to parse the flushed HTML
without any JS applied so the expected values might
end up in a template that's within the element you're
targetting with CSS selectors.

The real fix is using `next.browser` instead but
that's slower so we just make sure React can't break
up targetted elements and the expected values.
---
 .../app/headers/exercise/components.tsx          | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/test/e2e/app-dir/dynamic-io/app/headers/exercise/components.tsx b/test/e2e/app-dir/dynamic-io/app/headers/exercise/components.tsx
index 17fc75026f668..ed2c0392ae237 100644
--- a/test/e2e/app-dir/dynamic-io/app/headers/exercise/components.tsx
+++ b/test/e2e/app-dir/dynamic-io/app/headers/exercise/components.tsx
@@ -104,8 +104,8 @@ function Get({
   return (
     <section>
       <h2>{expression}.get('...')</h2>
-      <div id={'get-x-sentinel'}>
-        <pre>{headers.get('x-sentinel')}</pre>
+      <div>
+        <pre id={'get-x-sentinel'}>{headers.get('x-sentinel')}</pre>
       </div>
     </section>
   )
@@ -194,8 +194,8 @@ function ForEach({
   headers.forEach((value, header) => {
     if (header.startsWith('x-sentinel')) {
       output.push(
-        <div key={header} id={'for-each-' + header}>
-          <pre>{value}</pre>
+        <div key={header}>
+          <pre id={'for-each-' + header}>{value}</pre>
         </div>
       )
     }
@@ -300,8 +300,8 @@ function ForOf({
   for (let [headerName, value] of headers) {
     if (headerName.startsWith('x-sentinel')) {
       output.push(
-        <div key={headerName} id={'for-of-' + headerName}>
-          <pre>{value}</pre>
+        <div key={headerName}>
+          <pre id={'for-of-' + headerName}>{value}</pre>
         </div>
       )
     }
@@ -326,8 +326,8 @@ function Spread({
     .filter(([headerName]) => headerName.startsWith('x-sentinel'))
     .map((v) => {
       return (
-        <div key={v[0]} id={'spread-' + v[0]}>
-          <pre>{v[1]}</pre>
+        <div key={v[0]}>
+          <pre id={'spread-' + v[0]}>{v[1]}</pre>
         </div>
       )
     })