test: add test for basic dynamic import with react 18 hydration (#35772)

x-ref: #35728

The hydration mismatch is fixed by #35732, that document could collect the dyamic imports module ids before the shell is flushed. Add a test for it

test/integration/react-18/app/components/foo.js

@@ -0,0 +1 @@
+export default () => 'foo'

test/integration/react-18/app/pages/dynamic-imports.js

@@ -0,0 +1,9 @@
+import dynamic from 'next/dynamic'
+
+const Foo = dynamic(() => import('../components/foo'))
+
+export default () => (
+  <div>
+    <Foo />
+  </div>
+)

test/integration/react-18/test/basics.js

@@ -4,7 +4,7 @@ import webdriver from 'next-webdriver'
 import cheerio from 'cheerio'
 import { renderViaHTTP } from 'next-test-utils'
 
-export default (context) => {
+export default (context, env) => {
   it('no warnings for image related link props', async () => {
     await renderViaHTTP(context.appPort, '/')
     expect(context.stderr).not.toContain('Warning: Invalid DOM property')
@@ -27,4 +27,16 @@ export default (context) => {
 
     expect(ssrId).toEqual(csrId)
   })
+
+  it('should contain dynamicIds in next data for basic dynamic imports', async () => {
+    const html = await renderViaHTTP(context.appPort, '/dynamic-imports')
+    const $ = cheerio.load(html)
+    const { dynamicIds } = JSON.parse($('#__NEXT_DATA__').html())
+
+    if (env === 'dev') {
+      expect(dynamicIds).toContain('dynamic-imports.js -> ../components/foo')
+    } else {
+      expect(dynamicIds.length).toBe(1)
+    }
+  })
 }

test/integration/react-18/test/index.test.js

@@ -25,7 +25,9 @@ const nextConfig = new File(join(appDir, 'next.config.js'))
 const invalidPage = new File(join(appDir, 'pages/invalid.js'))
 
 describe('Basics', () => {
-  runTests('default setting with react 18', (context) => basics(context))
+  runTests('default setting with react 18', (context, env) =>
+    basics(context, env)
+  )
 })
 
 // React 18 with Strict Mode enabled might cause double invocation of lifecycle methods.