first commit

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

@@ -0,0 +1 @@
+export default 'foobar'

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

@@ -0,0 +1,3 @@
+export default () => {
+  return '4'
+}

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,3 @@
+export default () => {
+  return '3'
+}

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,39 @@
+import dynamic from 'next/dynamic'
+import { useState, useEffect } from 'react'
+import FourDirect from '../components/four'
+
+const One = dynamic(() => import('../components/one'))
+const Two = dynamic(() => import('../components/two'))
+const Three = dynamic(() => import('../components/three'))
+const Four = dynamic(() => import('../components/four'))
+
+if (typeof window !== 'undefined') {
+  window.caughtErrors = ''
+  const origError = console.error
+
+  console.error = function (...args) {
+    window.caughtErrors += args.join(' ')
+    origError(...args)
+  }
+}
+
+export default () => {
+  const [firstRender, setFirstRender] = useState('the-server-value')
+  useEffect(() => {
+    setFirstRender(document.getElementById('foo').innerHTML)
+  }, [])
+
+  return (
+    <>
+      <div id="foo">
+        Index
+        <One />
+        <Two />
+        <Three />
+        <Four />
+        <FourDirect />
+      </div>
+      <div id="first-render">{firstRender}</div>
+    </>
+  )
+}

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

@@ -0,0 +1,78 @@
+/* eslint-env jest */
+
+import webdriver from 'next-webdriver'
+import { join } from 'path'
+import {
+  renderViaHTTP,
+  findPort,
+  launchApp,
+  killApp,
+  runNextCommand,
+  nextServer,
+  startApp,
+  stopApp,
+} from 'next-test-utils'
+
+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, '/')
+    const text = await browser.elementByCss('#first-render').text()
+
+    // Failure case is 'Index<!-- -->3<!-- --><!-- -->'
+    expect(text).toMatch(
+      /^Index<!--\/?(\$|\s)-->1(<!--\/?(\$|\s)-->)+2(<!--\/?(\$|\s)-->)+3(<!--\/?(\$|\s)-->)+4(<!--\/?(\$|\s)-->)+4$/
+    )
+    expect(await browser.eval('window.caughtErrors')).toBe('')
+
+    // should not print "invalid-dynamic-suspense" warning in browser's console
+    const logs = (await browser.log()).map((log) => log.message).join('\n')
+    expect(logs).not.toContain(
+      'https://nextjs.org/docs/messages/invalid-dynamic-suspense'
+    )
+  })
+}
+
+describe('next/dynamic', () => {
+  ;(process.env.TURBOPACK_BUILD ? describe.skip : describe)(
+    'development mode',
+    () => {
+      beforeAll(async () => {
+        appPort = await findPort()
+        app = await launchApp(appDir, appPort)
+      })
+      afterAll(() => killApp(app))
+
+      runTests()
+    }
+  )
+  ;(process.env.TURBOPACK_DEV ? describe.skip : 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()
+    }
+  )
+})