Fix webdriver.io interception issue (#742) by choosing fetch function…

… at call time rather than import time (#742)

Co-authored-by: Krishnamurti Subramanian <krishnamurti_subramanian@@intuit.com>

.changeset/quiet-foxes-approve.md

@@ -0,0 +1,5 @@
+---
+'@segment/analytics-next': patch
+---
+
+Fix webdriver.io interception bug. Refactor to use native fetch where unfetch is unavailable.

packages/browser/src/browser/index.ts

@@ -1,7 +1,7 @@
 import { getProcessEnv } from '../lib/get-process-env'
 import { getCDN, setGlobalCDNUrl } from '../lib/parse-cdn'
 
-import fetch from 'unfetch'
+import { fetch } from '../lib/fetch'
 import { Analytics, AnalyticsSettings, InitOptions } from '../core/analytics'
 import { Context } from '../core/context'
 import { Plan } from '../core/events'

packages/browser/src/core/stats/remote-metrics.ts

@@ -1,4 +1,4 @@
-import fetch from 'unfetch'
+import { fetch } from '../../lib/fetch'
 import { version } from '../../generated/version'
 import { getVersionType } from '../../plugins/segmentio/normalize'
 

packages/browser/src/lib/__tests__/fetch.test.ts

@@ -0,0 +1,35 @@
+import { fetch } from '../fetch'
+import { getGlobal } from '../get-global'
+import unfetch from 'unfetch'
+
+jest.mock('unfetch')
+const unfetchMock = jest.mocked(unfetch).mockResolvedValue({} as Response)
+
+jest.mock('../get-global')
+const getGlobalMock = jest.mocked(getGlobal)
+
+describe(fetch, () => {
+  const testFetchArgs = ['http://foo.com', {}] as const
+
+  it('should call native fetch if available', () => {
+    const nativeFetchMock = jest.fn()
+    getGlobalMock.mockReturnValue({ ...window, fetch: nativeFetchMock })
+    void fetch(...testFetchArgs)
+    expect(nativeFetchMock).toBeCalledWith(...testFetchArgs)
+    expect(unfetchMock).not.toBeCalled()
+  })
+  it('should fall back to unfetch in non-browserlike environment', () => {
+    getGlobalMock.mockReturnValue(null)
+    void fetch(...testFetchArgs)
+    expect(unfetchMock).toBeCalledWith(...testFetchArgs)
+  })
+  it('should fall back to unfetch if native fetch is unsupported', () => {
+    getGlobalMock.mockReturnValue({
+      ...window,
+      fetch: undefined,
+    } as any)
+
+    void fetch(...testFetchArgs)
+    expect(unfetchMock).toBeCalledWith(...testFetchArgs)
+  })
+})

packages/browser/src/lib/fetch.ts

@@ -0,0 +1,10 @@
+import unfetch from 'unfetch'
+import { getGlobal } from './get-global'
+
+/**
+ * Wrapper around native `fetch` containing `unfetch` fallback.
+ */
+export const fetch: typeof global.fetch = (...args) => {
+  const global = getGlobal()
+  return ((global && global.fetch) || unfetch)(...args)
+}

packages/browser/src/plugins/segmentio/batched-dispatcher.ts

@@ -1,12 +1,7 @@
-import unfetch from 'unfetch'
 import { SegmentEvent } from '../../core/events'
+import { fetch } from '../../lib/fetch'
 import { onPageLeave } from '../../lib/on-page-leave'
 
-let fetch = unfetch
-if (typeof window !== 'undefined') {
-  fetch = window.fetch || unfetch
-}
-
 type BatchingConfig = {
   size?: number
   timeout?: number

packages/browser/src/plugins/segmentio/fetch-dispatcher.ts

@@ -1,9 +1,4 @@
-import unfetch from 'unfetch'
-
-let fetch = unfetch
-if (typeof window !== 'undefined') {
-  fetch = window.fetch || unfetch
-}
+import { fetch } from '../../lib/fetch'
 
 export type Dispatcher = (url: string, body: object) => Promise<unknown>