implement AbortController stub for node, react native & IE

Author: phryneas

src/createAsyncThunk.test.ts

@@ -6,6 +6,12 @@ import {
 import { configureStore } from './configureStore'
 import { AnyAction } from 'redux'
 
+import {
+  mockConsole,
+  createConsole,
+  getLog
+} from 'console-testing-library/pure'
+
 describe('createAsyncThunk', () => {
   it('creates the action types', () => {
     const thunkActionCreator = createAsyncThunk('testType', async () => 42)
@@ -408,4 +414,42 @@ describe('createAsyncThunk with abortController', () => {
       meta: { aborted: true }
     })
   })
+
+  describe('behaviour with missing AbortController', () => {
+    let keepAbortController: typeof AbortController
+    let freshlyLoadedModule: typeof import('./createAsyncThunk')
+    let restore: () => void
+
+    beforeEach(() => {
+      keepAbortController = window.AbortController
+      delete window.AbortController
+      jest.resetModules()
+      freshlyLoadedModule = require('./createAsyncThunk')
+      restore = mockConsole(createConsole())
+    })
+
+    afterEach(() => {
+      restore()
+      window.AbortController = keepAbortController
+      jest.resetModules()
+    })
+
+    test('calling `abort` on an asyncThunk works with a FallbackAbortController if no global abortController is not available', async () => {
+      const longRunningAsyncThunk = freshlyLoadedModule.createAsyncThunk(
+        'longRunning',
+        async () => {
+          await new Promise(resolve => setTimeout(resolve, 30000))
+        }
+      )
+
+      store.dispatch(longRunningAsyncThunk()).abort()
+      // should only log once, even if called twice
+      store.dispatch(longRunningAsyncThunk()).abort()
+
+      expect(getLog().log).toMatchInlineSnapshot(`
+        "This platform does not implement AbortController. 
+        If you want to use the AbortController to react to \`abort\` events, please consider importing a polyfill like 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only'."
+      `)
+    })
+  })
 })

src/createAsyncThunk.ts

@@ -167,6 +167,34 @@ export function createAsyncThunk<
     }
   )
 
+  let displayedWarning = false
+
+  const AC =
+    typeof AbortController !== 'undefined'
+      ? AbortController
+      : class implements AbortController {
+          signal: AbortSignal = {
+            aborted: false,
+            addEventListener() {},
+            dispatchEvent() {
+              return false
+            },
+            onabort() {},
+            removeEventListener() {}
+          }
+          abort() {
+            //if (process.env.NODE_ENV === 'development') {
+            if (!displayedWarning) {
+              displayedWarning = true
+              console.info(
+                `This platform does not implement AbortController. 
+If you want to use the AbortController to react to \`abort\` events, please consider importing a polyfill like 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only'.`
+              )
+            }
+            //}
+          }
+        }
+
   function actionCreator(arg: ThunkArg) {
     return (
       dispatch: GetDispatch<ThunkApiConfig>,
@@ -175,7 +203,7 @@ export function createAsyncThunk<
     ) => {
       const requestId = nanoid()
 
-      const abortController = new AbortController()
+      const abortController = new AC()
       let abortReason: string | undefined
 
       const abortedPromise = new Promise<never>((_, reject) =>