Repository: vercel/next.js
Pull request: Unflake `missing required html tags` test

[Flakiness metric](https://app.datadoghq.com/ci/test/runs?query=test_level%3Atest%20env%3Aci%20%40git.repository.id%3Agithub.com%2Fvercel%2Fnext.js%20%40test.service%3Anextjs%20%40test.status%3Afail%20%40test.name%3A%22app-dir%20-%20missing%20required%20html%20tags%20should%20hmr%20when%20you%20fix%20the%20error%22%20%40git.branch%3Acanary&agg_m=count&agg_m_source=base&agg_t=count&citest_explorer_sort=timestamp%2Cdesc&cols=%40test.status%2Ctimestamp%2C%40test.suite%2C%40test.name%2C%40duration%2C%40test.service%2C%40git.branch&currentTab=overview&eventStack=&fromUser=false&index=citest&start=1755509670941&end=1756805670941&paused=false)

The test fixture already starts out with a missing tags error. This was not accounted for in the test, and could lead to the initial redbox being detected, instead of the one that appears after the layout was changed and the page was reloaded.

Changed files:
filename: test/development/app-dir/missing-required-html-tags/index.test.ts
patch: @@ -35,18 +35,22 @@ describe('app-dir - missing required html tags', () => {
     `)
   })
 
-  it('should hmr when you fix the error', async () => {
-    const browser = await next.browser('/')
-
-    await next.patchFile('app/layout.js', (code) =>
-      code.replace('return children', 'return <body>{children}</body>')
-    )
+  it('should reload when you fix the error', async () => {
+    let reloaded = false
 
-    await assertHasRedbox(browser)
+    const browser = await next.browser('/', {
+      beforePageLoad(page) {
+        page.on('requestfinished', async (request) => {
+          if (new URL(request.url()).pathname === '/') {
+            reloaded = true
+          }
+        })
+      },
+    })
 
     await expect(browser).toDisplayRedbox(`
      {
-       "description": "Missing <html> tags in the root layout.
+       "description": "Missing <html> and <body> tags in the root layout.
      Read more at https://nextjs.org/docs/messages/missing-root-layout-tags",
        "environmentLabel": null,
        "label": "Runtime Error",
@@ -55,13 +59,40 @@ describe('app-dir - missing required html tags', () => {
      }
     `)
 
-    await next.patchFile('app/layout.js', (code) =>
-      code.replace(
-        'return <body>{children}</body>',
-        'return <html><body>{children}</body></html>'
-      )
+    reloaded = false
+
+    await Promise.all([
+      next.patchFile('app/layout.js', (code) =>
+        code.replace('return children', 'return <body>{children}</body>')
+      ),
+      retry(() => expect(reloaded).toBe(true), 10_000),
+    ])
+
+    await retry(() =>
+      expect(browser).toDisplayRedbox(`
+     {
+       "description": "Missing <html> tags in the root layout.
+     Read more at https://nextjs.org/docs/messages/missing-root-layout-tags",
+       "environmentLabel": null,
+       "label": "Runtime Error",
+       "source": null,
+       "stack": [],
+     }
+    `)
     )
 
+    reloaded = false
+
+    await Promise.all([
+      next.patchFile('app/layout.js', (code) =>
+        code.replace(
+          'return <body>{children}</body>',
+          'return <html><body>{children}</body></html>'
+        )
+      ),
+      retry(() => expect(reloaded).toBe(true), 10_000),
+    ])
+
     await assertNoRedbox(browser)
     expect(await browser.elementByCss('p').text()).toBe('hello world')
 

filename: test/rspack-dev-tests-manifest.json
patch: @@ -829,7 +829,7 @@
   "test/development/app-dir/missing-required-html-tags/index.test.ts": {
     "passed": [
       "app-dir - missing required html tags should display correct error count in dev indicator",
-      "app-dir - missing required html tags should hmr when you fix the error",
+      "app-dir - missing required html tags should reload when you fix the error",
       "app-dir - missing required html tags should show error overlay"
     ],
     "failed": [],

filename: test/turbopack-dev-tests-manifest.json
patch: @@ -2625,7 +2625,7 @@
   "test/development/app-dir/missing-required-html-tags/index.test.ts": {
     "passed": [
       "app-dir - missing required html tags should display correct error count in dev indicator",
-      "app-dir - missing required html tags should hmr when you fix the error",
+      "app-dir - missing required html tags should reload when you fix the error",
       "app-dir - missing required html tags should show error overlay"
     ],
     "failed": [],