Added timeout to waitForNextUpdate

Author: mpeyper

docs/api-reference.md

@@ -34,7 +34,7 @@ more hooks for testing.
 The `props` passed into the callback will be the `initialProps` provided in the `options` to
 `renderHook`, unless new props are provided by a subsequent `rerender` call.
 
-### `options`
+### `options` (Optional)
 
 An options object to modify the execution of the `callback` function. See the
 [`renderHook` Options](/reference/api#renderhook-options) section for more details.
@@ -68,15 +68,6 @@ The `renderHook` method returns an object that has a following properties:
 The `current` value or the `result` will reflect whatever is returned from the `callback` passed to
 `renderHook`. Any thrown values will be reflected in the `error` value of the `result`.
 
-### `waitForNextUpdate`
-
-```js
-function waitForNextUpdate(): Promise<void>
-```
-
-- `waitForNextUpdate` (`function`) - returns a `Promise` that resolves the next time the hook
-  renders, commonly when state is updated as the result of a asynchronous action
-
 ### `rerender`
 
 ```js
@@ -96,9 +87,39 @@ function unmount(): void
 A function to unmount the test component. This is commonly used to trigger cleanup effects for
 `useEffect` hooks.
 
+### `...asyncUtils`
+
+Utilities to assist with testing asynchronous behaviour. See the
+[Async Utils](/reference/api#async-utils) section for more details.
+
 ---
 
 ## `act`
 
 This is the same [`act` function](https://reactjs.org/docs/test-utils.html#act) that is exported by
 `react-test-renderer`.
+
+---
+
+## Async Utilities
+
+### `waitForNextUpdate`
+
+```js
+function waitForNextUpdate(options?: WaitOptions): Promise<void>
+```
+
+`waitForNextUpdate` returns a `Promise` that resolves the next time the hook renders, commonly when
+state is updated as the result of an asynchronous update.
+
+An options object is accepted as the first parameter to modify it's execution. See the
+[`wait` Options](/reference/api#wait-options) section for more details.
+
+### `wait` Options
+
+The async utilities accepts the following options:
+
+#### `timeout`
+
+The amount of time in milliseconds (ms) to wait. By default, the `wait` utilities will wait
+indefinitely.

src/asyncUtils.js

@@ -0,0 +1,40 @@
+import { act } from 'react-test-renderer'
+
+function createTimeoutError(utilName, timeout) {
+  const timeoutError = new Error(`Timed out in ${utilName} after ${timeout}ms.`)
+  timeoutError.timeout = true
+  return timeoutError
+}
+
+function asyncUtils(addResolver) {
+  let nextUpdatePromise = null
+
+  const resolveOnNextUpdate = ({ timeout }) => (resolve, reject) => {
+    let timeoutId
+    if (timeout > 0) {
+      timeoutId = setTimeout(
+        () => reject(createTimeoutError('waitForNextUpdate', timeout)),
+        timeout
+      )
+    }
+    addResolver(() => {
+      clearTimeout(timeoutId)
+      nextUpdatePromise = null
+      resolve()
+    })
+  }
+
+  const waitForNextUpdate = async (options = {}) => {
+    if (!nextUpdatePromise) {
+      nextUpdatePromise = new Promise(resolveOnNextUpdate(options))
+      await act(() => nextUpdatePromise)
+    }
+    return await nextUpdatePromise
+  }
+
+  return {
+    waitForNextUpdate
+  }
+}
+
+export default asyncUtils

src/index.js

@@ -1,5 +1,6 @@
 import React, { Suspense } from 'react'
 import { act, create } from 'react-test-renderer'
+import asyncUtils from './asyncUtils'
 
 function TestHook({ callback, hookProps, onError, children }) {
   try {
@@ -73,20 +74,8 @@ function renderHook(callback, { initialProps, wrapper } = {}) {
   })
   const { unmount, update } = testRenderer
 
-  let waitingForNextUpdate = null
-  const resolveOnNextUpdate = (resolve) => {
-    addResolver((...args) => {
-      waitingForNextUpdate = null
-      resolve(...args)
-    })
-  }
-
   return {
     result,
-    waitForNextUpdate: () => {
-      waitingForNextUpdate = waitingForNextUpdate || act(() => new Promise(resolveOnNextUpdate))
-      return waitingForNextUpdate
-    },
     rerender: (newProps = hookProps.current) => {
       hookProps.current = newProps
       act(() => {
@@ -97,7 +86,8 @@ function renderHook(callback, { initialProps, wrapper } = {}) {
       act(() => {
         unmount()
       })
-    }
+    },
+    ...asyncUtils(addResolver)
   }
 }
 

test/asyncHook.test.js

@@ -1,58 +1,66 @@
-import { useState, useEffect } from 'react'
+import { useState, useRef, useEffect } from 'react'
 import { renderHook } from 'src'
 
 describe('async hook tests', () => {
-  const getSomeName = () => Promise.resolve('Betty')
-
-  const useName = (prefix) => {
-    const [name, setName] = useState('nobody')
+  const useSequence = (...values) => {
+    const [first, ...otherValues] = values
+    const [value, setValue] = useState(first)
+    const index = useRef(0)
 
     useEffect(() => {
-      getSomeName().then((theName) => {
-        setName(prefix ? `${prefix} ${theName}` : theName)
-      })
-    }, [prefix])
-
-    return name
+      const interval = setInterval(() => {
+        setValue(otherValues[index.current])
+        index.current++
+      }, 50)
+      return () => {
+        clearInterval(interval)
+      }
+    }, [...values])
+
+    return value
   }
 
   test('should wait for next update', async () => {
-    const { result, waitForNextUpdate } = renderHook(() => useName())
+    const { result, waitForNextUpdate } = renderHook(() => useSequence('first', 'second'))
 
-    expect(result.current).toBe('nobody')
+    expect(result.current).toBe('first')
 
     await waitForNextUpdate()
 
-    expect(result.current).toBe('Betty')
+    expect(result.current).toBe('second')
   })
 
   test('should wait for multiple updates', async () => {
-    const { result, waitForNextUpdate, rerender } = renderHook(({ prefix }) => useName(prefix), {
-      initialProps: { prefix: 'Mrs.' }
-    })
+    const { result, waitForNextUpdate } = renderHook(() => useSequence('first', 'second', 'third'))
 
-    expect(result.current).toBe('nobody')
+    expect(result.current).toBe('first')
 
     await waitForNextUpdate()
 
-    expect(result.current).toBe('Mrs. Betty')
-
-    rerender({ prefix: 'Ms.' })
+    expect(result.current).toBe('second')
 
     await waitForNextUpdate()
 
-    expect(result.current).toBe('Ms. Betty')
+    expect(result.current).toBe('third')
   })
 
   test('should resolve all when updating', async () => {
-    const { result, waitForNextUpdate } = renderHook(({ prefix }) => useName(prefix), {
-      initialProps: { prefix: 'Mrs.' }
-    })
+    const { result, waitForNextUpdate } = renderHook(() => useSequence('first', 'second'))
 
-    expect(result.current).toBe('nobody')
+    expect(result.current).toBe('first')
 
     await Promise.all([waitForNextUpdate(), waitForNextUpdate(), waitForNextUpdate()])
 
-    expect(result.current).toBe('Mrs. Betty')
+    expect(result.current).toBe('second')
+  })
+
+  test('should reject if timeout exceeded when waiting for next update', async () => {
+    const { result, waitForNextUpdate } = renderHook(() => useSequence('first', 'second'))
+
+    expect(result.current).toBe('first')
+
+    await expect(waitForNextUpdate({ timeout: 10 })).rejects.toThrow(
+      Error('Timed out in waitForNextUpdate after 10ms.')
+    )
   })
 })