first commit

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/pages/process.js

@@ -0,0 +1,7 @@
+export default function Page() {
+  return (
+    <div id="process">
+      Hello, {process.env.NEXT_PUBLIC_VISITOR ?? 'stranger'}
+    </div>
+  )
+}

test/integration/polyfills/test/index.test.ts

@@ -0,0 +1,59 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+import { nextBuild, findPort, nextStart, killApp } from 'next-test-utils'
+import webdriver from 'next-webdriver'
+
+const appDir = join(__dirname, '../')
+
+let appPort
+let app
+
+describe('Polyfills', () => {
+  ;(process.env.TURBOPACK_DEV ? describe.skip : describe)(
+    'production mode',
+    () => {
+      let output = ''
+
+      beforeAll(async () => {
+        const { stdout, stderr } = await nextBuild(appDir, [], {
+          stdout: true,
+          stderr: true,
+        })
+        output = (stderr || '') + (stdout + '')
+        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')
+        const text = await browser.elementByCss('#test-status').text()
+
+        expect(text).toBe('pass')
+
+        await browser.close()
+      })
+
+      it('should allow using process.env when there is an element with `id` of `process`', async () => {
+        const browser = await webdriver(appPort, '/process')
+        const text = await browser.elementByCss('#process').text()
+
+        expect(text).toBe('Hello, stranger')
+
+        await browser.close()
+      })
+
+      it('should contain generated page count in output', async () => {
+        expect(output).toMatch(/Generating static pages.*\(0\/5\)/g)
+        expect(output).toMatch(/Generating static pages.*\(5\/5\)/g)
+        // we should only have 1 segment and the initial message logged out
+        expect(output.match(/Generating static pages/g).length).toBe(5)
+      })
+    }
+  )
+})