Fix inconsistency in dynamic tests (#5071)

test/integration/basic/test/dynamic.js

@@ -136,11 +136,5 @@ export default (context, render) => {
         browser.close()
       })
     })
-
-    // describe('with browser', () => {
-
-    // describe('with bundle', () => {
-
-    // })
   })
 }

test/integration/production/test/dynamic.js

@@ -0,0 +1,141 @@
+/* global describe, it, expect */
+import webdriver from 'next-webdriver'
+import cheerio from 'cheerio'
+import { waitFor, check } from 'next-test-utils'
+
+// These tests are similar to ../../basic/test/dynamic.js
+export default (context, render) => {
+  async function get$ (path, query) {
+    const html = await render(path, query)
+    return cheerio.load(html)
+  }
+  describe('Dynamic import', () => {
+    describe('default behavior', () => {
+      it('should render dynamic import components', async () => {
+        const $ = await get$('/dynamic/ssr')
+        expect($('body').text()).toMatch(/Hello World 1/)
+      })
+
+      it('should render even there are no physical chunk exists', async () => {
+        let browser
+        try {
+          browser = await webdriver(context.appPort, '/dynamic/no-chunk')
+          await check(() => browser.elementByCss('body').text(), /Welcome, normal/)
+          await check(() => browser.elementByCss('body').text(), /Welcome, dynamic/)
+        } finally {
+          if (browser) {
+            browser.close()
+          }
+        }
+      })
+    })
+    describe('ssr:false option', () => {
+      it('Should render loading on the server side', async () => {
+        const $ = await get$('/dynamic/no-ssr')
+        expect($('p').text()).toBe('loading...')
+      })
+
+      it('should render the component on client side', async () => {
+        let browser
+        try {
+          browser = await webdriver(context.appPort, '/dynamic/no-ssr')
+          await check(() => browser.elementByCss('body').text(), /Hello World 1/)
+        } finally {
+          if (browser) {
+            browser.close()
+          }
+        }
+      })
+    })
+
+    describe('custom loading', () => {
+      it('should render custom loading on the server side when `ssr:false` and `loading` is provided', async () => {
+        const $ = await get$('/dynamic/no-ssr-custom-loading')
+        expect($('p').text()).toBe('LOADING')
+      })
+
+      it('should render the component on client side', async () => {
+        let browser
+        try {
+          browser = await webdriver(context.appPort, '/dynamic/no-ssr-custom-loading')
+          await check(() => browser.elementByCss('body').text(), /Hello World 1/)
+        } finally {
+          if (browser) {
+            browser.close()
+          }
+        }
+      })
+    })
+
+    describe('Import mapping', () => {
+      it('should render dynamic imports bundle', async () => {
+        const $ = await get$('/dynamic/bundle')
+        const bodyText = $('body').text()
+        expect(/Dynamic Bundle/.test(bodyText)).toBe(true)
+        expect(/Hello World 1/.test(bodyText)).toBe(true)
+        expect(/Hello World 2/.test(bodyText)).toBe(false)
+      })
+
+      it('should render dynamic imports bundle with additional components', async () => {
+        const $ = await get$('/dynamic/bundle?showMore=1')
+        const bodyText = $('body').text()
+        expect(/Dynamic Bundle/.test(bodyText)).toBe(true)
+        expect(/Hello World 1/.test(bodyText)).toBe(true)
+        expect(/Hello World 2/.test(bodyText)).toBe(true)
+      })
+
+      it('should render components', async () => {
+        const browser = await webdriver(context.appPort, '/dynamic/bundle')
+
+        while (true) {
+          const bodyText = await browser
+            .elementByCss('body').text()
+          if (
+            /Dynamic Bundle/.test(bodyText) &&
+            /Hello World 1/.test(bodyText) &&
+            !(/Hello World 2/.test(bodyText))
+          ) break
+          await waitFor(1000)
+        }
+
+        browser.close()
+      })
+
+      it('should render support React context', async () => {
+        const browser = await webdriver(context.appPort, '/dynamic/bundle')
+
+        while (true) {
+          const bodyText = await browser
+            .elementByCss('body').text()
+          if (
+            /ZEIT Rocks/.test(bodyText)
+          ) break
+          await waitFor(1000)
+        }
+
+        browser.close()
+      })
+
+      it('should load new components and render for prop changes', async () => {
+        const browser = await webdriver(context.appPort, '/dynamic/bundle')
+
+        await browser
+          .waitForElementByCss('#toggle-show-more')
+          .elementByCss('#toggle-show-more').click()
+
+        while (true) {
+          const bodyText = await browser
+            .elementByCss('body').text()
+          if (
+            /Dynamic Bundle/.test(bodyText) &&
+            /Hello World 1/.test(bodyText) &&
+            /Hello World 2/.test(bodyText)
+          ) break
+          await waitFor(1000)
+        }
+
+        browser.close()
+      })
+    })
+  })
+}

test/integration/production/test/index.test.js

@@ -13,7 +13,7 @@ import {
 } from 'next-test-utils'
 import webdriver from 'next-webdriver'
 import fetch from 'node-fetch'
-import dynamicImportTests from '../../basic/test/dynamic'
+import dynamicImportTests from './dynamic'
 import security from './security'
 import {BUILD_MANIFEST, REACT_LOADABLE_MANIFEST} from 'next/constants'
 

test/lib/next-test-utils.js

@@ -152,12 +152,18 @@ export async function startStaticServer (dir) {
 
 export async function check (contentFn, regex) {
   let found = false
-  setTimeout(() => {
+  setTimeout(async () => {
     if (found) {
       return
     }
-    console.error('TIMED OUT CHECK: ', regex)
-    throw new Error('TIMED OUT')
+    let content
+    try {
+      content = await contentFn()
+    } catch (err) {
+      console.error('Error while getting content', {regex})
+    }
+    console.error('TIMED OUT CHECK: ', {regex, content})
+    throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
   }, 1000 * 30)
   while (!found) {
     try {