Test CJS Import of `isomorphic-unfetch` (#9363)

test/integration/serverless/pages/fetch-cjs.js

+const fetch = require('isomorphic-unfetch')
+const React = require('react')
+
+export default class extends React.Component {
+  static async getInitialProps () {
+    try {
+      const res = await fetch('')
+      const text = await res.text()
+      console.log(text)
+      return { text }
+    } catch (err) {
+      if (err.message.includes('is not a function')) {
+        return { failed: true, error: err.toString() }
+      }
+
+      return { error: err.toString() }
+    }
+  }
+  render () {
+    const { failed, error, text } = this.props
+    return (
+      <div className='fetch-cjs-page'>
+        {failed ? 'failed' : ''}
+        {error}
+        <div id='text'>{text}</div>
+      </div>
+    )
+  }
+}

test/integration/serverless/pages/index.js

@@ -6,6 +6,9 @@ export default () => {
       <Link href='/fetch'>
         <a id='fetchlink'>fetch page</a>
       </Link>
+      <Link href='/fetch-cjs'>
+        <a id='fetchcjslink'>fetch cjs page</a>
+      </Link>
     </div>
   )
 }

test/integration/serverless/test/index.test.js

@@ -111,7 +111,7 @@ describe('Serverless', () => {
     const browser = await webdriver(appPort, '/')
     try {
       const text = await browser
-        .elementByCss('a')
+        .elementByCss('#fetchlink')
         .click()
         .waitForElementByCss('.fetch-page')
         .elementByCss('#text')
@@ -123,6 +123,30 @@ describe('Serverless', () => {
     }
   })
 
+  it('should render correctly when importing isomorphic-unfetch CJS', async () => {
+    const url = `http://localhost:${appPort}/fetch-cjs`
+    const res = await fetch(url)
+    expect(res.status).toBe(200)
+    const text = await res.text()
+    expect(text.includes('failed')).toBe(false)
+  })
+
+  it('should render correctly when importing isomorphic-unfetch CJS on the client side', async () => {
+    const browser = await webdriver(appPort, '/')
+    try {
+      const text = await browser
+        .elementByCss('#fetchcjslink')
+        .click()
+        .waitForElementByCss('.fetch-cjs-page')
+        .elementByCss('#text')
+        .text()
+
+      expect(text).toMatch(/fetch page/)
+    } finally {
+      await browser.close()
+    }
+  })
+
   it('should not have combined client-side chunks', () => {
     expect(readdirSync(chunksDir).length).toBeGreaterThanOrEqual(2)
     const buildId = readFileSync(buildIdFile, 'utf8').trim()