Merge pull request #35 from mpeyper/suspense-support

Add Suspense and ErrorBoundary to better support suspending from hooks

Fixes #27

Author: mpeyper

src/index.js

@@ -1,12 +1,37 @@
-import React from 'react'
+import React, { Suspense } from 'react'
 import { render, cleanup, act } from 'react-testing-library'
 
 function TestHook({ callback, hookProps, children }) {
-  try {
-    children(callback(hookProps))
-  } catch (e) {
-    children(undefined, e)
+  children(callback(hookProps))
+  return null
+}
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true }
   }
+
+  componentDidCatch(error) {
+    this.props.onError(error)
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props != prevProps && this.state.hasError) {
+      this.setState({ hasError: false })
+    }
+  }
+
+  render() {
+    return !this.state.hasError && this.props.children
+  }
+}
+
+function Fallback() {
   return null
 }
 
@@ -27,27 +52,34 @@ function resultContainer() {
     }
   }
 
+  const updateResult = (val, err) => {
+    value = val
+    error = err
+    resolvers.splice(0, resolvers.length).forEach((resolve) => resolve())
+  }
+
   return {
     result,
     addResolver: (resolver) => {
       resolvers.push(resolver)
     },
-    updateResult: (val, err) => {
-      value = val
-      error = err
-      resolvers.splice(0, resolvers.length).forEach((resolve) => resolve())
-    }
+    setValue: (val) => updateResult(val),
+    setError: (err) => updateResult(undefined, err)
   }
 }
 
 function renderHook(callback, { initialProps, ...options } = {}) {
-  const { result, updateResult, addResolver } = resultContainer()
+  const { result, setValue, setError, addResolver } = resultContainer()
   const hookProps = { current: initialProps }
 
   const toRender = () => (
-    <TestHook callback={callback} hookProps={hookProps.current}>
-      {updateResult}
-    </TestHook>
+    <ErrorBoundary onError={setError}>
+      <Suspense fallback={<Fallback />}>
+        <TestHook callback={callback} hookProps={hookProps.current}>
+          {setValue}
+        </TestHook>
+      </Suspense>
+    </ErrorBoundary>
   )
 
   const { unmount, rerender: rerenderComponent } = render(toRender(), options)

test/suspenseHook.test.js

@@ -0,0 +1,51 @@
+import { renderHook, cleanup } from 'src'
+
+describe('suspense hook tests', () => {
+  const cache = {}
+  const fetchName = (isSuccessful) => {
+    if (!cache.value) {
+      cache.value = new Promise((resolve, reject) => {
+        setTimeout(() => {
+          if (isSuccessful) {
+            resolve('Bob')
+          } else {
+            reject(new Error('Failed to fetch name'))
+          }
+        }, 50)
+      })
+        .then((value) => (cache.value = value))
+        .catch((e) => (cache.value = e))
+    }
+    return cache.value
+  }
+
+  const useFetchName = (isSuccessful = true) => {
+    const name = fetchName(isSuccessful)
+    if (typeof name.then === 'function' || name instanceof Error) {
+      throw name
+    }
+    return name
+  }
+
+  beforeEach(() => {
+    delete cache.value
+  })
+
+  afterEach(cleanup)
+
+  test('should allow rendering to be suspended', async () => {
+    const { result, waitForNextUpdate } = renderHook(() => useFetchName(true))
+
+    await waitForNextUpdate()
+
+    expect(result.current).toBe('Bob')
+  })
+
+  test('should set error if suspense promise rejects', async () => {
+    const { result, waitForNextUpdate } = renderHook(() => useFetchName(false))
+
+    await waitForNextUpdate()
+
+    expect(result.error).toEqual(new Error('Failed to fetch name'))
+  })
+})