fix: fixed potential error when hook suspends and current result is accessed

BREAKING CHANGE: Adjust types so that react renderer exports don't required extra generic parameter

Author: mpeyper

package.json

@@ -56,7 +56,7 @@
     "docz-theme-default": "1.2.0",
     "docz-utils": "2.3.0",
     "eslint": "7.17.0",
-    "kcd-scripts": "7.5.3",
+    "kcd-scripts": "7.5.4",
     "prettier": "^2.2.1",
     "react": "17.0.1",
     "react-dom": "^17.0.1",

src/__tests__/defaultRenderer.test.ts

@@ -0,0 +1,41 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import { ReactHooksRenderer } from '../types/react'
+
+describe('default renderer', () => {
+  beforeEach(() => {
+    jest.resetModules()
+  })
+
+  test('should resolve native renderer as default renderer', () => {
+    const expectedRenderer = require('../native/pure') as ReactHooksRenderer
+    const actualRenderer = require('..') as ReactHooksRenderer
+
+    expect(actualRenderer).toEqual(expectedRenderer)
+  })
+
+  test('should resolve dom renderer as default renderer', () => {
+    jest.doMock('react-test-renderer', () => {
+      throw new Error('missing dependency')
+    })
+
+    const expectedRenderer = require('../dom/pure') as ReactHooksRenderer
+    const actualRenderer = require('..') as ReactHooksRenderer
+
+    expect(actualRenderer).toEqual(expectedRenderer)
+  })
+
+  test('should throw error if a default renderer cannot be resolved', () => {
+    jest.doMock('react-test-renderer', () => {
+      throw new Error('missing dependency')
+    })
+
+    jest.doMock('react-dom', () => {
+      throw new Error('missing dependency')
+    })
+
+    const expectedMessage =
+      "Could not auto-detect a React renderer. Are you sure you've installed one of the following\n  - react-dom\n  - react-test-renderer"
+
+    expect(() => require('..')).toThrowError(new Error(expectedMessage))
+  })
+})

src/core/cleanup.ts

@@ -1,4 +1,6 @@
-let cleanupCallbacks: (() => Promise<void> | void)[] = []
+import { CleanupCallback } from '../types'
+
+let cleanupCallbacks: Array<CleanupCallback> = []
 
 async function cleanup() {
   for (const callback of cleanupCallbacks) {
@@ -7,12 +9,12 @@ async function cleanup() {
   cleanupCallbacks = []
 }
 
-function addCleanup(callback: () => Promise<void> | void) {
+function addCleanup(callback: CleanupCallback) {
   cleanupCallbacks = [callback, ...cleanupCallbacks]
   return () => removeCleanup(callback)
 }
 
-function removeCleanup(callback: () => Promise<void> | void) {
+function removeCleanup(callback: CleanupCallback) {
   cleanupCallbacks = cleanupCallbacks.filter((cb) => cb !== callback)
 }
 

src/core/index.ts

@@ -1,19 +1,18 @@
-import { CreateRenderer, Renderer, RenderResult, RenderHook, RenderHookOptions } from '../types'
-import { ResultContainer } from '../types/internal'
+import { CreateRenderer, Renderer, RenderResult, RenderHookOptions } from '../types'
 
 import { asyncUtils } from './asyncUtils'
 import { cleanup, addCleanup, removeCleanup } from './cleanup'
 
-function resultContainer<TValue>(): ResultContainer<TValue> {
+function resultContainer<TValue>() {
   const results: Array<{ value?: TValue; error?: Error }> = []
   const resolvers: Array<() => void> = []
 
   const result: RenderResult<TValue> = {
     get all() {
-      return results.map(({ value, error }) => error ?? value)
+      return results.map(({ value, error }) => error ?? (value as TValue))
     },
     get current() {
-      const { value, error } = results[results.length - 1]
+      const { value, error } = results[results.length - 1] ?? {}
       if (error) {
         throw error
       }
@@ -43,12 +42,12 @@ function resultContainer<TValue>(): ResultContainer<TValue> {
 function createRenderHook<
   TProps,
   TResult,
-  TOptions extends object,
+  TRendererOptions extends object,
   TRenderer extends Renderer<TProps>
->(createRenderer: CreateRenderer<TProps, TResult, TOptions, TRenderer>) {
-  const renderHook: RenderHook<TProps, TResult, TOptions, TRenderer> = (
-    callback,
-    options = {} as RenderHookOptions<TProps, TOptions>
+>(createRenderer: CreateRenderer<TProps, TResult, TRendererOptions, TRenderer>) {
+  const renderHook = (
+    callback: (props: TProps) => TResult,
+    options = {} as RenderHookOptions<TProps> & TRendererOptions
   ) => {
     const { result, setValue, setError, addResolver } = resultContainer<TResult>()
     const renderProps = { callback, setValue, setError }
@@ -79,11 +78,6 @@ function createRenderHook<
     }
   }
 
-  // If the function name does not get used before it is returned,
-  // it's name is removed by babel-plugin-minify-dead-code-elimination.
-  // This dummy usage works around that.
-  renderHook.name // eslint-disable-line @typescript-eslint/no-unused-expressions
-
   return renderHook
 }
 

src/dom/__tests__/suspenseHook.test.ts

@@ -46,4 +46,10 @@ describe('suspense hook tests', () => {
 
     expect(result.error).toEqual(new Error('Failed to fetch name'))
   })
+
+  test('should return undefined if current value is requested before suspension has resolved', async () => {
+    const { result } = renderHook(() => useFetchName(true))
+
+    expect(result.current).toBe(undefined)
+  })
 })

src/dom/pure.ts

@@ -1,10 +1,9 @@
 import ReactDOM from 'react-dom'
 import { act } from 'react-dom/test-utils'
 
-import { RendererProps } from '../types'
-import { RendererOptions } from '../types/react'
+import { RendererProps, RendererOptions } from '../types/react'
 
-import { createRenderHook, cleanup, addCleanup, removeCleanup } from '../core'
+import { createRenderHook } from '../core'
 import { createTestHarness } from '../helpers/createTestHarness'
 
 function createDomRenderer<TProps, TResult>(
@@ -39,7 +38,8 @@ function createDomRenderer<TProps, TResult>(
 
 const renderHook = createRenderHook(createDomRenderer)
 
-export { renderHook, act, cleanup, addCleanup, removeCleanup }
+export { renderHook, act }
+
+export { cleanup, addCleanup, removeCleanup } from '../core'
 
-export * from '../types'
 export * from '../types/react'

src/helpers/createTestHarness.tsx

@@ -1,7 +1,6 @@
 import React, { Suspense } from 'react'
 
-import { RendererProps } from '../types'
-import { WrapperComponent } from '../types/react'
+import { RendererProps, WrapperComponent } from '../types/react'
 
 import { isPromise } from './promises'
 
@@ -40,11 +39,6 @@ function createTestHarness<TProps, TResult>(
     return component
   }
 
-  // If the function name does not get used before it is returned,
-  // it's name is removed by babel-plugin-minify-dead-code-elimination.
-  // This dummy usage works around that.
-  testHarness.name // eslint-disable-line @typescript-eslint/no-unused-expressions
-
   return testHarness
 }
 

src/native/__tests__/suspenseHook.test.ts

@@ -46,4 +46,10 @@ describe('suspense hook tests', () => {
 
     expect(result.error).toEqual(new Error('Failed to fetch name'))
   })
+
+  test('should return undefined if current value is requested before suspension has resolved', async () => {
+    const { result } = renderHook(() => useFetchName(true))
+
+    expect(result.current).toBe(undefined)
+  })
 })

src/native/pure.ts

@@ -1,9 +1,8 @@
 import { act, create, ReactTestRenderer } from 'react-test-renderer'
 
-import { RendererProps } from '../types'
-import { RendererOptions } from '../types/react'
+import { RendererProps, RendererOptions } from '../types/react'
 
-import { createRenderHook, cleanup, addCleanup, removeCleanup } from '../core'
+import { createRenderHook } from '../core'
 import { createTestHarness } from '../helpers/createTestHarness'
 
 function createNativeRenderer<TProps, TResult>(
@@ -36,7 +35,8 @@ function createNativeRenderer<TProps, TResult>(
 
 const renderHook = createRenderHook(createNativeRenderer)
 
-export { renderHook, act, cleanup, addCleanup, removeCleanup }
+export { renderHook, act }
+
+export { cleanup, addCleanup, removeCleanup } from '../core'
 
-export * from '../types'
 export * from '../types/react'

src/pure.ts

@@ -36,5 +36,4 @@ const { renderHook, act, cleanup, addCleanup, removeCleanup } = getRenderer()
 
 export { renderHook, act, cleanup, addCleanup, removeCleanup }
 
-export * from './types'
 export * from './types/react'

src/server/pure.ts

@@ -2,10 +2,9 @@ import ReactDOMServer from 'react-dom/server'
 import ReactDOM from 'react-dom'
 import { act } from 'react-dom/test-utils'
 
-import { RendererProps } from '../types'
-import { RendererOptions } from '../types/react'
+import { RendererProps, RendererOptions } from '../types/react'
 
-import { createRenderHook, cleanup, addCleanup, removeCleanup } from '../core'
+import { createRenderHook } from '../core'
 import { createTestHarness } from '../helpers/createTestHarness'
 
 function createServerRenderer<TProps, TResult>(
@@ -60,7 +59,8 @@ function createServerRenderer<TProps, TResult>(
 
 const renderHook = createRenderHook(createServerRenderer)
 
-export { renderHook, act, cleanup, addCleanup, removeCleanup }
+export { renderHook, act }
+
+export { cleanup, addCleanup, removeCleanup } from '../core'
 
-export * from '../types'
 export * from '../types/react'

src/types/index.ts

@@ -11,13 +11,15 @@ export type RendererProps<TProps, TResult> = {
   setValue: (value: TResult) => void
 }
 
-export type CreateRenderer<TProps, TResult, TOptions, TRenderer extends Renderer<TProps>> = (
-  props: RendererProps<TProps, TResult>,
-  options: TOptions
-) => TRenderer
+export type CreateRenderer<
+  TProps,
+  TResult,
+  TRendererOptions extends object,
+  TRenderer extends Renderer<TProps>
+> = (props: RendererProps<TProps, TResult>, options: TRendererOptions) => TRenderer
 
 export type RenderResult<TValue> = {
-  readonly all: (TValue | Error | undefined)[]
+  readonly all: Array<TValue | Error>
   readonly current: TValue
   readonly error?: Error
 }
@@ -47,23 +49,13 @@ export type RenderHookResult<
   Omit<TRenderer, keyof Renderer<TProps>> &
   AsyncUtils
 
-export type RenderHookOptions<TProps, TOptions extends object> = TOptions & {
+export type RenderHookOptions<TProps> = {
   initialProps?: TProps
 }
 
-export interface RenderHook<
-  TProps,
-  TResult,
-  TOptions extends object,
-  TRenderer extends Renderer<TProps> = Renderer<TProps>
-> {
-  (
-    callback: (props: TProps) => TResult,
-    options?: RenderHookOptions<TProps, TOptions>
-  ): RenderHookResult<TProps, TResult, TRenderer>
-}
-
-export interface Act {
+export type Act = {
   (callback: () => void | undefined): void
   (callback: () => Promise<void | undefined>): Promise<undefined>
 }
+
+export type CleanupCallback = () => Promise<void> | void

src/types/internal.ts

@@ -1,20 +1,31 @@
 import { ComponentType } from 'react'
 
-import { RenderHookOptions, RenderHookResult, Act } from '.'
+import {
+  RenderHookOptions as BaseRenderHookOptions,
+  RenderHookResult,
+  Act,
+  CleanupCallback
+} from '.'
 
 export type WrapperComponent<TProps> = ComponentType<TProps>
 
 export type RendererOptions<TProps> = {
   wrapper?: WrapperComponent<TProps>
 }
 
+export type RenderHookOptions<TProps> = BaseRenderHookOptions<TProps> & {
+  wrapper?: WrapperComponent<TProps>
+}
+
 export type ReactHooksRenderer = {
   renderHook: <TProps, TResult>(
     callback: (props: TProps) => TResult,
-    options?: RenderHookOptions<TProps, RendererOptions<TProps>>
+    options?: RenderHookOptions<TProps>
   ) => RenderHookResult<TProps, TResult>
   act: Act
   cleanup: () => void
-  addCleanup: (callback: () => Promise<void> | void) => () => void
-  removeCleanup: (callback: () => Promise<void> | void) => void
+  addCleanup: (callback: CleanupCallback) => () => void
+  removeCleanup: (callback: CleanupCallback) => void
 }
+
+export * from '.'