Merge pull request #11 from mpeyper/async-updates

Add `waitForNextUpdate` promise for testing async updates

Resolves #10

Author: mpeyper

.babelrc

@@ -4,6 +4,7 @@
     "@babel/react"
   ],
   "plugins": [
+    "@babel/plugin-transform-runtime",
     "@babel/proposal-object-rest-spread",
     ["module-resolver", { "alias": { "src": "./src" } }],
     "@babel/transform-modules-commonjs"

README.md

@@ -77,7 +77,9 @@ const useTheme = (initialTheme) => {
   }
   return useMemo(() => ({ ...themes[theme], toggleTheme }), [theme])
 }
+```
 
+```js
 // useTheme.test.js
 import { renderHook, cleanup, act } from 'react-hooks-testing-library'
 
@@ -152,6 +154,7 @@ Renders a test component that will call the provided `callback`, including any h
 
 - `result` (`object`)
   - `current` (`any`) - the return value of the `callback` function
+- `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` (`function([newProps])`) - function to rerender the test component including any hooks called in the `callback` function. If `newProps` are passed, the will replace the `initialProps` passed the the `callback` function for future renders.
 - `unmount` (`function()`) - function to unmount the test component, commonly used to trigger cleanup effects for `useEffect` hooks.
 

package-lock.json

@@ -27,13 +27,15 @@
     "contributors:add": "all-contributors add"
   },
   "dependencies": {
+    "@babel/runtime": "^7.3.4",
     "react-testing-library": "^6.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.2.3",
     "@babel/core": "^7.3.4",
     "@babel/plugin-proposal-object-rest-spread": "^7.3.4",
     "@babel/plugin-transform-modules-commonjs": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.3.4",
     "@babel/preset-env": "^7.3.4",
     "@babel/preset-react": "^7.0.0",
     "@types/react": "^16.8.5",
@@ -44,16 +46,13 @@
     "eslint": "^5.14.1",
     "eslint-config-prettier": "^4.0.0",
     "eslint-plugin-prettier": "^3.0.1",
-    "fetch-mock": "^7.3.1",
     "husky": "^1.3.1",
     "jest": "^24.1.0",
     "lint-staged": "^8.1.4",
-    "node-fetch": "^2.3.0",
     "prettier": "^1.16.4",
     "prettier-eslint": "^8.8.2",
     "prettier-eslint-cli": "^4.7.1",
     "react": "^16.8.3",
-    "react-async": "^5.1.0",
     "react-dom": "^16.8.3",
     "typescript": "^3.3.3333",
     "typings-tester": "^0.3.2"

package.json

@@ -9,11 +9,17 @@ function TestHook({ callback, hookProps, children }) {
 function renderHook(callback, { initialProps, ...options } = {}) {
   const result = { current: null }
   const hookProps = { current: initialProps }
+  const resolvers = []
+  const waitForNextUpdate = () =>
+    new Promise((resolve) => {
+      resolvers.push(resolve)
+    })
 
   const toRender = () => (
     <TestHook callback={callback} hookProps={hookProps.current}>
       {(res) => {
         result.current = res
+        resolvers.splice(0, resolvers.length).forEach((resolve) => resolve())
       }}
     </TestHook>
   )
@@ -22,6 +28,7 @@ function renderHook(callback, { initialProps, ...options } = {}) {
 
   return {
     result,
+    waitForNextUpdate,
     unmount,
     rerender: (newProps = hookProps.current) => {
       hookProps.current = newProps

src/index.js

@@ -0,0 +1,60 @@
+import { useState, useEffect } from 'react'
+import { renderHook, cleanup } from 'src'
+
+describe('async hook tests', () => {
+  const getSomeName = () => Promise.resolve('Betty')
+
+  const useName = (prefix) => {
+    const [name, setName] = useState('nobody')
+
+    useEffect(() => {
+      getSomeName().then((theName) => {
+        setName(prefix ? `${prefix} ${theName}` : theName)
+      })
+    }, [prefix])
+
+    return name
+  }
+
+  afterEach(cleanup)
+
+  test('should wait for next update', async () => {
+    const { result, waitForNextUpdate } = renderHook(() => useName())
+
+    expect(result.current).toBe('nobody')
+
+    await waitForNextUpdate()
+
+    expect(result.current).toBe('Betty')
+  })
+
+  test('should wait for multiple updates', async () => {
+    const { result, waitForNextUpdate, rerender } = renderHook(({ prefix }) => useName(prefix), {
+      initialProps: { prefix: 'Mrs.' }
+    })
+
+    expect(result.current).toBe('nobody')
+
+    await waitForNextUpdate()
+
+    expect(result.current).toBe('Mrs. Betty')
+
+    rerender({ prefix: 'Ms.' })
+
+    await waitForNextUpdate()
+
+    expect(result.current).toBe('Ms. Betty')
+  })
+
+  test('should resolve all when updating', async () => {
+    const { result, waitForNextUpdate } = renderHook(({ prefix }) => useName(prefix), {
+      initialProps: { prefix: 'Mrs.' }
+    })
+
+    expect(result.current).toBe('nobody')
+
+    await Promise.all([waitForNextUpdate(), waitForNextUpdate(), waitForNextUpdate()])
+
+    expect(result.current).toBe('Mrs. Betty')
+  })
+})

test/asyncHook.test.js

@@ -64,3 +64,12 @@ function checkTypesWhenHookReturnsVoid() {
   const _unmount: () => boolean = unmount
   const _rerender: () => void = rerender
 }
+
+async function checkTypesForWaitForNextUpdate() {
+  const { waitForNextUpdate } = renderHook(() => {})
+
+  await waitForNextUpdate()
+
+  // check type
+  const _waitForNextUpdate: () => Promise<void> = waitForNextUpdate
+}

test/typescript/renderHook.ts

@@ -9,6 +9,7 @@ export function renderHook<P, R>(
   readonly result: {
     current: R
   }
+  readonly waitForNextUpdate: () => Promise<void>
   readonly unmount: RenderResult['unmount']
   readonly rerender: (hookProps?: P) => void
 }