Merge remote-tracking branch 'upstream/master' into use-react-test-renderer

# Conflicts:
#	src/index.js

Author: sgrishchenko

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-hooks-testing-library",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Simple component wrapper for testing React hooks",
   "main": "lib/index.js",
   "typings": "typings/index.d.ts",
@@ -38,7 +38,7 @@
     "@babel/preset-env": "7.4.3",
     "@babel/preset-react": "7.0.0",
     "@types/react": "16.8.13",
-    "all-contributors-cli": "6.2.0",
+    "all-contributors-cli": "6.3.0",
     "babel-eslint": "10.0.1",
     "babel-plugin-module-resolver": "3.2.0",
     "codecov": "3.3.0",

package.json

@@ -1,12 +1,37 @@
-import React from 'react'
+import React, { Suspense } from 'react'
 import { create, act } from 'react-test-renderer'
 
 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,31 +52,38 @@ 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, wrapper } = {}) {
-  const { result, updateResult, addResolver } = resultContainer()
+  const { result, setValue, setError, addResolver } = resultContainer()
   const hookProps = { current: initialProps }
 
   const wrapUiIfNeeded = (innerElement) =>
     wrapper ? React.createElement(wrapper, null, innerElement) : innerElement
 
   const toRender = () =>
     wrapUiIfNeeded(
-      <TestHook callback={callback} hookProps={hookProps.current}>
-        {updateResult}
-      </TestHook>
+      <ErrorBoundary onError={setError}>
+        <Suspense fallback={<Fallback />}>
+          <TestHook callback={callback} hookProps={hookProps.current}>
+            {setValue}
+          </TestHook>
+        </Suspense>
+      </ErrorBoundary>
     )
 
   let testRenderer

src/index.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'))
+  })
+})