test: add ability to wrap react query updates with React act

Author: boschni

jest.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   collectCoverage: true,
   coverageReporters: ['json', 'lcov', 'text', 'clover', 'text-summary'],
+  setupFilesAfterEnv: ['./jest.setup.js'],
   testMatch: ['<rootDir>/src/**/*.test.tsx'],
   testPathIgnorePatterns: ['<rootDir>/types/'],
   moduleNameMapper: {

jest.setup.js

@@ -0,0 +1,8 @@
+import { act } from '@testing-library/react'
+
+import { setUpdateFn } from './src'
+
+// Wrap updates with act to make sure React knows about React Query updates
+setUpdateFn(fn => {
+  act(fn)
+})

src/core/index.ts

@@ -1,7 +1,12 @@
 export { Query } from './query'
 export { QueryCache } from './queryCache'
 export { QueryClient } from './queryClient'
-export { setBatchedUpdates } from './notifyManager'
+export {
+  getBatchUpdatesFn,
+  getUpdateFn,
+  setBatchUpdatesFn,
+  setUpdateFn,
+} from './notifyManager'
 export { setConsole } from './setConsole'
 export { setFocusHandler } from './setFocusHandler'
 export { setOnlineHandler } from './setOnlineHandler'

src/core/notifyManager.ts

@@ -4,7 +4,45 @@ import { scheduleMicrotask } from './utils'
 
 type NotifyCallback = () => void
 
-type BatchUpdateFunction = (callback: () => void) => void
+type UpdateFunction = (callback: () => void) => void
+
+type BatchUpdatesFunction = (callback: () => void) => void
+
+// GETTERS AND SETTERS
+
+// Default to a dummy "update" implementation that just runs the callback
+let updateFn: UpdateFunction = (callback: () => void) => {
+  callback()
+}
+
+// Default to a dummy "batch update" implementation that just runs the callback
+let batchUpdatesFn: BatchUpdatesFunction = (callback: () => void) => {
+  callback()
+}
+
+/**
+ * Use this function to set a custom update function.
+ * This can be used to for example wrap updates with `React.act` while running tests.
+ */
+export function setUpdateFn(fn: UpdateFunction) {
+  updateFn = fn
+}
+
+export function getUpdateFn(): UpdateFunction {
+  return updateFn
+}
+
+/**
+ * Use this function to set a custom batch function to batch updates together into a single render pass.
+ * By default React Query will use the batch function provided by ReactDOM or React Native.
+ */
+export function setBatchUpdatesFn(fn: BatchUpdatesFunction) {
+  batchUpdatesFn = fn
+}
+
+export function getBatchUpdatesFn(): BatchUpdatesFunction {
+  return batchUpdatesFn
+}
 
 // CLASS
 
@@ -32,7 +70,7 @@ export class NotifyManager {
       this.queue.push(notify)
     } else {
       scheduleMicrotask(() => {
-        notify()
+        updateFn(notify)
       })
     }
   }
@@ -42,34 +80,16 @@ export class NotifyManager {
     this.queue = []
     if (queue.length) {
       scheduleMicrotask(() => {
-        const batchedUpdates = getBatchedUpdates()
-        batchedUpdates(() => {
+        batchUpdatesFn(() => {
           queue.forEach(notify => {
-            notify()
+            updateFn(notify)
           })
         })
       })
     }
   }
 }
 
-// GETTERS AND SETTERS
-
-// Default to a dummy "batch" implementation that just runs the callback
-let batchedUpdates: BatchUpdateFunction = (callback: () => void) => {
-  callback()
-}
-
-// Allow injecting another batching function later
-export function setBatchedUpdates(fn: BatchUpdateFunction) {
-  batchedUpdates = fn
-}
-
-// Supply a getter just to skip dealing with ESM bindings
-export function getBatchedUpdates(): BatchUpdateFunction {
-  return batchedUpdates
-}
-
 // SINGLETON
 
 export const notifyManager = new NotifyManager()

src/core/queriesObserver.ts

@@ -134,9 +134,11 @@ export class QueriesObserver {
 
   private notify(): void {
     const { result, listeners } = this
-    listeners.forEach(listener => {
-      notifyManager.schedule(() => {
-        listener(result)
+    notifyManager.batch(() => {
+      listeners.forEach(listener => {
+        notifyManager.schedule(() => {
+          listener(result)
+        })
       })
     })
   }

src/hydration/tests/react.test.tsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react'
 
 import { QueryClient, QueryClientProvider, QueryCache, useQuery } from '../..'
 import { dehydrate, useHydrate, Hydrate } from '../'
-import { waitForMs } from '../../react/tests/utils'
+import { sleep } from '../../react/tests/utils'
 
 describe('React hydration', () => {
   const fetchData: (value: string) => Promise<string> = value =>
@@ -42,7 +42,7 @@ describe('React hydration', () => {
         </QueryClientProvider>
       )
 
-      await waitForMs(10)
+      await sleep(10)
       rendered.getByText('string')
       cache.clear()
     })
@@ -71,7 +71,7 @@ describe('React hydration', () => {
         </QueryClientProvider>
       )
 
-      await waitForMs(10)
+      await sleep(10)
       rendered.getByText('string')
 
       const intermediateCache = new QueryCache()
@@ -94,7 +94,7 @@ describe('React hydration', () => {
 
       // Existing query data should be overwritten if older,
       // so this should have changed
-      await waitForMs(10)
+      await sleep(10)
       rendered.getByText('should change')
       // New query data should be available immediately
       rendered.getByText('added string')
@@ -124,7 +124,7 @@ describe('React hydration', () => {
         </QueryClientProvider>
       )
 
-      await waitForMs(10)
+      await sleep(10)
       rendered.getByText('string')
 
       const newClientQueryCache = new QueryCache()
@@ -140,7 +140,7 @@ describe('React hydration', () => {
         </QueryClientProvider>
       )
 
-      await waitForMs(10)
+      await sleep(10)
       rendered.getByText('string')
 
       cache.clear()

src/react/index.ts

@@ -1,8 +1,8 @@
-import { setBatchedUpdates, setConsole } from '../core'
+import { setBatchUpdatesFn, setConsole } from '../core'
 import { Console } from './Console'
 import { unstable_batchedUpdates } from './reactBatchedUpdates'
 
-setBatchedUpdates(unstable_batchedUpdates)
+setBatchUpdatesFn(unstable_batchedUpdates)
 
 if (Console) {
   setConsole(Console)

src/react/tests/useInfiniteQuery.test.tsx

@@ -2,11 +2,11 @@ import { waitFor, fireEvent } from '@testing-library/react'
 import React from 'react'
 
 import {
-  sleep,
   queryKey,
-  waitForMs,
+  sleep,
   mockConsoleError,
   renderWithClient,
+  setActTimeout,
 } from './utils'
 import {
   useInfiniteQuery,
@@ -148,11 +148,12 @@ describe('useInfiniteQuery', () => {
       const { fetchMore } = state
 
       React.useEffect(() => {
-        setTimeout(async () => {
-          try {
-            await fetchMore()
-            noThrow = true
-          } catch (error) {}
+        setActTimeout(() => {
+          fetchMore()
+            .then(() => {
+              noThrow = true
+            })
+            .catch(() => undefined)
         }, 20)
       }, [fetchMore])
 
@@ -189,10 +190,10 @@ describe('useInfiniteQuery', () => {
       const { fetchMore } = state
 
       React.useEffect(() => {
-        setTimeout(() => {
+        setActTimeout(() => {
           fetchMore()
         }, 50)
-        setTimeout(() => {
+        setActTimeout(() => {
           setOrder('asc')
         }, 100)
       }, [fetchMore])
@@ -304,7 +305,7 @@ describe('useInfiniteQuery', () => {
       const { fetchMore } = state
 
       React.useEffect(() => {
-        setTimeout(() => {
+        setActTimeout(() => {
           fetchMore(undefined, { previous: true })
         }, 20)
       }, [fetchMore])
@@ -368,10 +369,10 @@ describe('useInfiniteQuery', () => {
       const { refetch, fetchMore } = state
 
       React.useEffect(() => {
-        setTimeout(() => {
+        setActTimeout(() => {
           refetch()
         }, 100)
-        setTimeout(() => {
+        setActTimeout(() => {
           fetchMore()
         }, 110)
       }, [fetchMore, refetch])
@@ -442,7 +443,7 @@ describe('useInfiniteQuery', () => {
       const { refetch, fetchMore } = state
 
       React.useEffect(() => {
-        setTimeout(() => {
+        setActTimeout(() => {
           fetchMore()
         }, 10)
       }, [fetchMore, refetch])
@@ -452,7 +453,7 @@ describe('useInfiniteQuery', () => {
 
     renderWithClient(client, <Page />)
 
-    await waitForMs(100)
+    await sleep(100)
 
     expect(states.length).toBe(2)
     expect(states[0]).toMatchObject({
@@ -492,7 +493,7 @@ describe('useInfiniteQuery', () => {
       const { fetchMore } = state
 
       React.useEffect(() => {
-        setTimeout(() => {
+        setActTimeout(() => {
           fetchMore(5)
         }, 20)
       }, [fetchMore])
@@ -557,12 +558,12 @@ describe('useInfiniteQuery', () => {
       const { refetch } = state
 
       React.useEffect(() => {
-        setTimeout(() => {
+        setActTimeout(() => {
           client.setQueryData(key, [7, 8])
           setFirstPage(7)
         }, 20)
 
-        setTimeout(() => {
+        setActTimeout(() => {
           refetch()
         }, 50)
       }, [refetch])

src/react/tests/useIsFetching.test.tsx

@@ -5,8 +5,8 @@ import {
   mockConsoleError,
   queryKey,
   renderWithClient,
+  setActTimeout,
   sleep,
-  waitForMs,
 } from './utils'
 import { useQuery, useIsFetching, QueryClient, QueryCache } from '../..'
 
@@ -85,7 +85,7 @@ describe('useIsFetching', () => {
       const [renderSecond, setRenderSecond] = React.useState(false)
 
       React.useEffect(() => {
-        setTimeout(() => {
+        setActTimeout(() => {
           setRenderSecond(true)
         }, 10)
       }, [])
@@ -137,7 +137,7 @@ describe('useIsFetching', () => {
       isFetchings.push(isFetching)
 
       React.useEffect(() => {
-        setTimeout(() => {
+        setActTimeout(() => {
           setStarted(true)
         }, 5)
       }, [])
@@ -156,7 +156,7 @@ describe('useIsFetching', () => {
 
     renderWithClient(client, <Page />)
 
-    await waitForMs(100)
+    await sleep(100)
     expect(isFetchings).toEqual([0, 0, 1, 0])
   })
 })

src/react/tests/useQueries.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { queryKey, renderWithClient, waitForMs } from './utils'
+import { queryKey, renderWithClient, sleep } from './utils'
 import { useQueries, QueryClient, UseQueryResult, QueryCache } from '../..'
 
 describe('useQueries', () => {
@@ -23,7 +23,7 @@ describe('useQueries', () => {
 
     renderWithClient(client, <Page />)
 
-    await waitForMs(10)
+    await sleep(10)
 
     expect(results.length).toBe(3)
     expect(results[0]).toMatchObject([{ data: undefined }, { data: undefined }])