Current behavior of HMR to page with new bundler runtime

test/development/app-hmr/app/bundler-runtime-changes/new-runtime-functionality/page.tsx

@@ -0,0 +1,8 @@
+'use client'
+// requires
+import * as React from 'react'
+
+export default function RuntimeChangesNewRuntimeFunctionalityPage() {
+  React.useEffect(() => {}, [])
+  return <div data-testid="new-runtime-functionality-page" />
+}

test/development/app-hmr/app/bundler-runtime-changes/page.tsx

@@ -0,0 +1,9 @@
+import Link from 'next/link'
+
+export default function RuntimeChangesPage() {
+  return (
+    <Link href="/bundler-runtime-changes/new-runtime-functionality">
+      Click me
+    </Link>
+  )
+}

test/development/app-hmr/hmr.test.ts

@@ -214,5 +214,78 @@ describe(`app-dir-hmr`, () => {
     it('should have no unexpected action error for hmr', async () => {
       expect(next.cliOutput).not.toContain('Unexpected action')
     })
+
+    it('can navigate cleanly to a page that requires a change in the Webpack runtime', async () => {
+      // This isn't a very accurate test since the Webpack runtime is somewhat an implementation detail.
+      // To ensure this is still valid, check the `*/webpack.*.hot-update.js` network response content when the navigation is triggered.
+      // If there is new functionality added, the test is still valid.
+      // If not, the test doesn't cover anything new.
+      // TODO: Enforce console.error assertions or MPA navigation assertions in all tests instead.
+      const browser = await next.browser('/bundler-runtime-changes')
+      await browser.eval('window.__TEST_NO_RELOAD = true')
+
+      await browser
+        .elementByCss('a')
+        .click()
+        .waitForElementByCss('[data-testid="new-runtime-functionality-page"]')
+
+      const logs = await browser.log()
+      if (process.env.TURBOPACK) {
+        // FIXME: logging "rebuilding" multiple times instead of closing it of with "done in"
+        // Should just not branch here and have the same logs as Webpack.
+        expect(logs).toEqual(
+          expect.arrayContaining([
+            {
+              message: '[Fast Refresh] rebuilding',
+              source: 'log',
+            },
+            {
+              message: '[Fast Refresh] rebuilding',
+              source: 'log',
+            },
+            {
+              message: '[Fast Refresh] rebuilding',
+              source: 'log',
+            },
+          ])
+        )
+        expect(logs).not.toEqual(
+          expect.arrayContaining([
+            {
+              message: expect.stringContaining('[Fast Refresh] done in'),
+              source: 'log',
+            },
+          ])
+        )
+      } else {
+        // TODO: Should assert on all logs but these are cluttered with logs from our test utils (e.g. playwright tracing or webdriver)
+        expect(logs).toEqual(
+          expect.arrayContaining([
+            {
+              message: '[Fast Refresh] rebuilding',
+              source: 'log',
+            },
+            {
+              message: expect.stringContaining('[Fast Refresh] done in'),
+              source: 'log',
+            },
+          ])
+        )
+        expect(logs).toEqual(
+          expect.arrayContaining([
+            expect.objectContaining({
+              source: 'error',
+            }),
+          ])
+        )
+      }
+      if (process.env.TURBOPACK) {
+        // No MPA navigation triggered
+        expect(await browser.eval('window.__TEST_NO_RELOAD')).toEqual(true)
+      } else {
+        // MPA navigation triggered
+        expect(await browser.eval('window.__TEST_NO_RELOAD')).toEqual(undefined)
+      }
+    })
   })
 })

test/development/app-hmr/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "incremental": true,
+    "module": "esnext",
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}