Integration test case for fetch alias (#9391)

* Polyfilling fetch and object-assign

* Polyfilling corejs object-assign

* Adding object-assign in polyfills.js. IE11 does not support Object.assign

* Fixing failing test

* Updating object.assign polyfill to fix aliasing

* Updating test case value to match new build stats

* Increasing the size of default build to 225kb

* Fixing defer-script test case to not include polyfill.js

* Revert README.md

* Re-design the polyfill approach based on PR feedback

* Adding comment and fixing test case

* Rename polyfills chunk

* Extract aliases into helper

* Remove extra new line

* Fix TypeScript typings

* Adding _internal_fetch alias

* Adjust build manifest plugin

* Build manifest plugin changes - adding a separate entry for polyfills

* Rename polyfills entry in build-manifest.json

* Remove old comment

* Fix TS

* Set key

* Polyfills already added

* Filtring polyfill.module.js

* Fix test

* Add __internal_fetch to alias rule

* Adjust name

* bump size

* ignore polyfills

* sigh

* Aliasing Object.assign

* Mergin latest changes

* Integration test for polyfilling fetch

* Remove comment

* Fix prettier error

* Fix review comments

* Fix review comments

* Update fetch.js

* Fix tests

packages/next/build/polyfills/fetch/whatwg-fetch.js

@@ -0,0 +1,5 @@
+/* globals self */
+exports.Headers = self.Headers
+exports.Request = self.Request
+exports.Response = self.Response
+exports.fetch = self.fetch

packages/next/build/webpack-config.ts

@@ -59,7 +59,7 @@ function getOptimizedAliases(isServer: boolean): { [pkg: string]: string } {
     return {}
   }
 
-  const stubWindowFetch = path.join(__dirname, 'polyfills', 'fetch.js')
+  const stubWindowFetch = path.join(__dirname, 'polyfills', 'fetch', 'index.js')
   const stubObjectAssign = path.join(__dirname, 'polyfills', 'object-assign.js')
 
   const shimAssign = path.join(__dirname, 'polyfills', 'object.assign')
@@ -68,7 +68,12 @@ function getOptimizedAliases(isServer: boolean): { [pkg: string]: string } {
     __next_polyfill__fetch: require.resolve('whatwg-fetch'),
     unfetch$: stubWindowFetch,
     'isomorphic-unfetch$': stubWindowFetch,
-    'whatwg-fetch$': stubWindowFetch,
+    'whatwg-fetch$': path.join(
+      __dirname,
+      'polyfills',
+      'fetch',
+      'whatwg-fetch.js'
+    ),
 
     // Polyfill: Object.assign
     __next_polyfill__object_assign: require.resolve('object-assign'),

test/integration/polyfills/pages/fetch.js

@@ -0,0 +1,47 @@
+import { useState, useEffect } from 'react'
+import unfetchImp from 'unfetch'
+import isomorphicUnfetchImp from 'isomorphic-unfetch'
+
+const testWhatwgFetchMethods = whatWgFetch => {
+  return (
+    whatWgFetch.Headers.name === 'Headers' &&
+    whatWgFetch.Request.name === 'Request' &&
+    whatWgFetch.Response.name === 'Response'
+  )
+}
+
+const testFetchImports = async () => {
+  const whatwgFetchImp = await import('whatwg-fetch')
+  const whatwgFetchReq = require('whatwg-fetch')
+  const unfetchReq = require('unfetch')
+  const isomorphicUnfetchReq = require('isomorphic-unfetch')
+
+  let areImportsMatching =
+    [whatwgFetchImp.fetch, whatwgFetchReq.fetch].every(
+      lib => lib.name === 'fetch'
+    ) &&
+    [unfetchImp, unfetchReq, isomorphicUnfetchImp, isomorphicUnfetchReq].every(
+      lib => lib.name === 'bound fetch'
+    )
+
+  return areImportsMatching &&
+    testWhatwgFetchMethods(whatwgFetchReq) &&
+    testWhatwgFetchMethods(whatwgFetchImp)
+    ? 'pass'
+    : 'fail'
+}
+
+const Page = () => {
+  const [testStatus, setTestStatus] = useState('computing')
+
+  useEffect(() => {
+    testFetchImports().then(status => {
+      console.log(status)
+      setTestStatus(status)
+    })
+  }, [])
+
+  return <div id="test-status">{testStatus}</div>
+}
+
+export default Page

test/integration/polyfills/pages/index.js

@@ -0,0 +1,7 @@
+import Link from 'next/link'
+
+export default () => (
+  <div>
+    <Link href="/fetch">Fetch</Link>
+  </div>
+)

test/integration/polyfills/test/index.test.js

@@ -0,0 +1,44 @@
+/* eslint-env jest */
+/* global jasmine */
+import { join } from 'path'
+import {
+  nextBuild,
+  findPort,
+  waitFor,
+  nextStart,
+  killApp,
+} from 'next-test-utils'
+import webdriver from 'next-webdriver'
+
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 60 * 1
+
+const appDir = join(__dirname, '../')
+
+let appPort
+let app
+
+describe('Polyfills', () => {
+  beforeAll(async () => {
+    const { stdout, stderr } = await nextBuild(appDir, [], {
+      stdout: true,
+      stderr: true,
+    })
+    console.log(stdout)
+    console.error(stderr)
+    appPort = await findPort()
+    app = await nextStart(appDir, appPort)
+  })
+  afterAll(async () => {
+    await killApp(app)
+  })
+
+  it('should alias fetch', async () => {
+    const browser = await webdriver(appPort, '/fetch')
+    await waitFor(1000)
+    const text = await browser.elementByCss('#test-status').text()
+
+    expect(text).toBe('pass')
+
+    await browser.close()
+  })
+})