Add `next/dynamic` test (#7600)

test/integration/next-dynamic/apples/index.js

+export default 'foobar'

test/integration/next-dynamic/components/one.js

+import something from '../apples'
+export default () => {
+  // have to do something with module so it is not tree shaken
+  console.log(something)
+  return '1'
+}

test/integration/next-dynamic/components/three.js

+export default () => {
+  return '3'
+}

test/integration/next-dynamic/components/two.js

+import something from '../apples'
+export default () => {
+  // have to do something with module so it is not tree shaken
+  console.log(something)
+  return '2'
+}

test/integration/next-dynamic/pages/index.js

+import dynamic from 'next/dynamic'
+import { useState, useEffect } from 'react'
+
+const One = dynamic(() => import('../components/one'))
+const Two = dynamic(() => import('../components/two'))
+const Three = dynamic(() => import('../components/three'))
+
+export default () => {
+  const [firstRender, setFirstRender] = useState('the-server-value')
+  useEffect(() => {
+    setFirstRender(document.getElementById('foo').innerHTML)
+  }, [])
+
+  return (
+    <>
+      <div id='foo'>
+        Index
+        <One />
+        <Two />
+        <Three />
+      </div>
+      <div id='first-render'>{firstRender}</div>
+    </>
+  )
+}

test/integration/next-dynamic/test/index.test.js

+/* eslint-env jest */
+/* global jasmine */
+import webdriver from 'next-webdriver'
+import { join } from 'path'
+import {
+  renderViaHTTP,
+  findPort,
+  launchApp,
+  killApp,
+  waitFor,
+  runNextCommand,
+  nextServer,
+  startApp,
+  stopApp
+} from 'next-test-utils'
+
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 60 * 5
+
+let app
+let appPort
+let server
+const appDir = join(__dirname, '../')
+
+function runTests () {
+  it('should render server value', async () => {
+    const html = await renderViaHTTP(appPort, '/')
+    expect(html).toMatch(/the-server-value/i)
+  })
+
+  it('should render dynamic server rendered values on client mount', async () => {
+    const browser = await webdriver(appPort, '/')
+    await waitFor(5000)
+    const text = await browser.elementByCss('#first-render').text()
+
+    // Failure case is 'Index<!-- -->3<!-- --><!-- -->'
+    expect(text).toBe('Index<!-- -->1<!-- -->2<!-- -->3')
+  })
+}
+
+describe('next/dynamic', () => {
+  describe('dev mode', () => {
+    beforeAll(async () => {
+      appPort = await findPort()
+      app = await launchApp(appDir, appPort)
+    })
+    afterAll(() => killApp(app))
+
+    runTests(true)
+  })
+
+  describe('production mode', () => {
+    beforeAll(async () => {
+      await runNextCommand(['build', appDir])
+
+      app = nextServer({
+        dir: appDir,
+        dev: false,
+        quiet: true
+      })
+
+      server = await startApp(app)
+      appPort = server.address().port
+    })
+    afterAll(() => stopApp(server))
+
+    runTests()
+  })
+})