add test

mischnic · unstubbable · commit 9dc91e2e0ad6 · 2025-11-27T20:26:21.000+01:00
diff --git a/test/development/app-dir/hmr-iframe/app/page1/Component.tsx b/test/development/app-dir/hmr-iframe/app/page1/Component.tsx
@@ -0,0 +1,5 @@
+'use client'
+
+export function Component() {
+  return <p>Component</p>
+}
diff --git a/test/development/app-dir/hmr-iframe/app/page1/page.tsx b/test/development/app-dir/hmr-iframe/app/page1/page.tsx
@@ -0,0 +1,18 @@
+import { subscribeToHMR } from './subscribeToHMR'
+import { Component } from './Component'
+
+const RootPage = async ({ Component }: any) => {
+  await subscribeToHMR()
+
+  return (
+    <html>
+      <body>
+        <iframe src="/page2" />
+      </body>
+    </html>
+  )
+}
+
+export default function Page() {
+  return <RootPage Component={Component} />
+}
diff --git a/test/development/app-dir/hmr-iframe/app/page1/subscribeToHMR.ts b/test/development/app-dir/hmr-iframe/app/page1/subscribeToHMR.ts
@@ -0,0 +1,55 @@
+if (!global._payload) {
+  global._payload = {
+    payload: null,
+    reload: false,
+    ws: null,
+  }
+}
+
+export const subscribeToHMR = async () => {
+  let cached = global._payload
+
+  if (cached.payload) {
+    if (cached.reload === true) {
+      let resolve: any
+
+      cached.reload = new Promise((res) => (resolve = res))
+
+      await new Promise((resolve) => setTimeout(resolve, 200))
+
+      resolve()
+    }
+    if (cached.reload instanceof Promise) {
+      await cached.reload
+    }
+
+    return cached.payload
+  }
+
+  cached.payload = {}
+
+  const port = process.env.PORT || '3000'
+  const hasHTTPS =
+    process.env.USE_HTTPS === 'true' ||
+    process.argv.includes('--experimental-https')
+  const protocol = hasHTTPS ? 'wss' : 'ws'
+  const path = '/_next/webpack-hmr'
+  // The __NEXT_ASSET_PREFIX env variable is set for both assetPrefix and basePath (tested in Next.js 15.1.6)
+  const prefix = process.env.__NEXT_ASSET_PREFIX ?? ''
+  cached.ws = new WebSocket(
+    process.env.PAYLOAD_HMR_URL_OVERRIDE ??
+      `${protocol}://localhost:${port}${prefix}${path}`
+  )
+  cached.ws.onmessage = (event: any) => {
+    if (typeof event.data === 'string') {
+      const data = JSON.parse(event.data)
+      if (
+        // On Next.js 15, we need to check for data.action. On Next.js 16, we need to check for data.type.
+        data.type === 'serverComponentChanges' ||
+        data.action === 'serverComponentChanges'
+      ) {
+        cached.reload = true
+      }
+    }
+  }
+}
diff --git a/test/development/app-dir/hmr-iframe/app/page2/page.tsx b/test/development/app-dir/hmr-iframe/app/page2/page.tsx
@@ -0,0 +1,13 @@
+import { subscribeToHMR } from '../page1/subscribeToHMR'
+
+export default async function Page() {
+  await subscribeToHMR()
+
+  return (
+    <html>
+      <body>
+        <p>content</p>
+      </body>
+    </html>
+  )
+}
diff --git a/test/development/app-dir/hmr-iframe/hmr-iframe.test.ts b/test/development/app-dir/hmr-iframe/hmr-iframe.test.ts
@@ -0,0 +1,35 @@
+import { nextTestSetup } from 'e2e-utils'
+import { waitForNoRedbox } from 'next-test-utils'
+
+describe('hmr-iframe', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('should do HMR when rendering two server component changes at the same time', async () => {
+    let browser = await next.browser('/page1')
+
+    expect(
+      await (await (await browser.elementByCss('iframe')).contentFrame())
+        .locator('p')
+        .innerText()
+    ).toEqual('content')
+
+    await next.patchFile('app/page2/page.tsx', (content) =>
+      content.replace('content', 'content-new')
+    )
+
+    await waitForNoRedbox(browser)
+    expect(
+      await (await (await browser.elementByCss('iframe')).contentFrame())
+        .locator('p')
+        .innerText()
+    ).toEqual('content-new')
+
+    expect(next.cliOutput).not.toContain('Error')
+    expect(next.cliOutput).not.toContain('Could not find the module')
+
+    await next.stop()
+    await next.clean()
+  })
+})
diff --git a/test/development/app-dir/hmr-iframe/next.config.js b/test/development/app-dir/hmr-iframe/next.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  experimental: {
+    appDir: true,
+  },
+}
