refactor: replace renderHook with renderHookAsync

Author: mdjastrzebski

src/__tests__/render-hook-async.test.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import * as React from 'react';
 import { Text } from 'react-native';
 
-import { act, renderHookAsync } from '..';
+import { act, renderHook } from '..';
 import { excludeConsoleMessage } from '../test-utils/console';
 
 // eslint-disable-next-line no-console
@@ -18,8 +18,8 @@ function useSuspendingHook(promise: Promise<string>) {
   return React.use(promise);
 }
 
-test('renderHookAsync renders hook asynchronously', async () => {
-  const { result } = await renderHookAsync(() => {
+test('renderHook renders hook asynchronously', async () => {
+  const { result } = await renderHook(() => {
     const [state, setState] = React.useState(1);
 
     React.useEffect(() => {
@@ -32,7 +32,7 @@ test('renderHookAsync renders hook asynchronously', async () => {
   expect(result.current).toEqual(2);
 });
 
-test('renderHookAsync with wrapper option', async () => {
+test('renderHook with wrapper option', async () => {
   const Context = React.createContext('default');
 
   function useTestHook() {
@@ -43,7 +43,7 @@ test('renderHookAsync with wrapper option', async () => {
     return <Context.Provider value="provided">{children}</Context.Provider>;
   }
 
-  const { result } = await renderHookAsync(useTestHook, { wrapper: Wrapper });
+  const { result } = await renderHook(useTestHook, { wrapper: Wrapper });
   expect(result.current).toEqual('provided');
 });
 
@@ -58,12 +58,12 @@ test('rerenderAsync function updates hook asynchronously', async () => {
     return state;
   }
 
-  const { result, rerenderAsync } = await renderHookAsync(useTestHook, {
+  const { result, rerender } = await renderHook(useTestHook, {
     initialProps: { value: 5 },
   });
   expect(result.current).toEqual(10);
 
-  await rerenderAsync({ value: 10 });
+  await rerender({ value: 10 });
   expect(result.current).toEqual(20);
 });
 
@@ -80,10 +80,10 @@ test('unmount function unmounts hook asynchronously', async () => {
     return 'test';
   }
 
-  const { unmountAsync } = await renderHookAsync(useTestHook);
+  const { unmount } = await renderHook(useTestHook);
   expect(cleanupCalled).toBe(false);
 
-  await unmountAsync();
+  await unmount();
   expect(cleanupCalled).toBe(true);
 });
 
@@ -98,7 +98,7 @@ test('handles hook with state updates during effects', async () => {
     return count;
   }
 
-  const { result } = await renderHookAsync(useTestHook);
+  const { result } = await renderHook(useTestHook);
   expect(result.current).toBe(1);
 });
 
@@ -115,7 +115,7 @@ test('handles multiple state updates in effects', async () => {
     return { first, second };
   }
 
-  const { result } = await renderHookAsync(useTestHook);
+  const { result } = await renderHook(useTestHook);
   expect(result.current).toEqual({ first: 10, second: 20 });
 });
 
@@ -125,7 +125,7 @@ test('handles hook with suspense', async () => {
     resolvePromise = resolve;
   });
 
-  const { result } = await renderHookAsync(useSuspendingHook, {
+  const { result } = await renderHook(useSuspendingHook, {
     initialProps: promise,
     wrapper: ({ children }) => (
       <React.Suspense fallback={<Text>Loading...</Text>}>{children}</React.Suspense>
@@ -168,7 +168,7 @@ test('handles hook suspense with error boundary', async () => {
     rejectPromise = reject;
   });
 
-  const { result } = await renderHookAsync(useSuspendingHook, {
+  const { result } = await renderHook(useSuspendingHook, {
     initialProps: promise,
     wrapper: ({ children }) => (
       <ErrorBoundary fallback="error-fallback">
@@ -206,7 +206,7 @@ test('handles custom hooks with complex logic', async () => {
     return { count, increment, decrement, reset };
   }
 
-  const { result } = await renderHookAsync(useCounter, { initialProps: 5 });
+  const { result } = await renderHook(useCounter, { initialProps: 5 });
   expect(result.current.count).toBe(5);
 
   // eslint-disable-next-line require-await
@@ -247,20 +247,20 @@ test('handles hook with cleanup and re-initialization', async () => {
     return value;
   }
 
-  const { result, rerenderAsync, unmountAsync } = await renderHookAsync(useTestHook, {
+  const { result, rerender, unmount } = await renderHook(useTestHook, {
     initialProps: { key: 'initial' },
   });
 
   expect(result.current).toBe('initial-effect');
   expect(effectCount).toBe(1);
   expect(cleanupCount).toBe(0);
 
-  await rerenderAsync({ key: 'updated' });
+  await rerender({ key: 'updated' });
   expect(result.current).toBe('updated-effect');
   expect(effectCount).toBe(2);
   expect(cleanupCount).toBe(1);
 
-  await unmountAsync();
+  await unmount();
   expect(effectCount).toBe(2);
   expect(cleanupCount).toBe(2);
 });

src/__tests__/render-hook.test.tsx

@@ -3,8 +3,8 @@ import * as React from 'react';
 
 import { renderHook } from '../pure';
 
-test('gives committed result', () => {
-  const { result } = renderHook(() => {
+test('gives committed result', async () => {
+  const { result } = await renderHook(() => {
     const [state, setState] = React.useState(1);
 
     React.useEffect(() => {
@@ -17,8 +17,8 @@ test('gives committed result', () => {
   expect(result.current).toEqual([2, expect.any(Function)]);
 });
 
-test('allows rerendering', () => {
-  const { result, rerender } = renderHook(
+test('allows rerendering', async () => {
+  const { result, rerender } = await renderHook(
     (props: { branch: 'left' | 'right' }) => {
       const [left, setLeft] = React.useState('left');
       const [right, setRight] = React.useState('right');
@@ -37,17 +37,17 @@ test('allows rerendering', () => {
 
   expect(result.current).toEqual(['left', expect.any(Function)]);
 
-  rerender({ branch: 'right' });
+  await rerender({ branch: 'right' });
 
   expect(result.current).toEqual(['right', expect.any(Function)]);
 });
 
-test('allows wrapper components', () => {
+test('allows wrapper components', async () => {
   const Context = React.createContext('default');
   function Wrapper({ children }: { children: ReactNode }) {
     return <Context.Provider value="provided">{children}</Context.Provider>;
   }
-  const { result } = renderHook(
+  const { result } = await renderHook(
     () => {
       return React.useContext(Context);
     },
@@ -63,23 +63,23 @@ function useMyHook<T>(param: T) {
   return { param };
 }
 
-test('props type is inferred correctly when initial props is defined', () => {
-  const { result, rerender } = renderHook((num: number) => useMyHook(num), {
+test('props type is inferred correctly when initial props is defined', async () => {
+  const { result, rerender } = await renderHook((num: number) => useMyHook(num), {
     initialProps: 5,
   });
   expect(result.current.param).toBe(5);
 
-  rerender(6);
+  await rerender(6);
   expect(result.current.param).toBe(6);
 });
 
-test('props type is inferred correctly when initial props is explicitly undefined', () => {
-  const { result, rerender } = renderHook((num: number | undefined) => useMyHook(num), {
+test('props type is inferred correctly when initial props is explicitly undefined', async () => {
+  const { result, rerender } = await renderHook((num: number | undefined) => useMyHook(num), {
     initialProps: undefined,
   });
 
   expect(result.current.param).toBeUndefined();
 
-  rerender(6);
+  await rerender(6);
   expect(result.current.param).toBe(6);
 });

src/pure.ts

@@ -10,7 +10,7 @@ export { within, getQueriesForElement } from './within';
 export { configure, resetToDefaults } from './config';
 export { isHiddenFromAccessibility, isInaccessible } from './helpers/accessibility';
 export { getDefaultNormalizer } from './matches';
-export { renderHook, renderHookAsync } from './render-hook';
+export { renderHook } from './render-hook';
 export { screen } from './screen';
 export { userEvent } from './user-event';
 
@@ -21,6 +21,6 @@ export type {
   DebugFunction,
 } from './render';
 export type { RenderAsyncOptions, RenderAsyncResult } from './render-async';
-export type { RenderHookOptions, RenderHookResult, RenderHookAsyncResult } from './render-hook';
+export type { RenderHookOptions, RenderHookResult } from './render-hook';
 export type { Config } from './config';
 export type { UserEventConfig } from './user-event';

src/render-hook.tsx

@@ -1,19 +1,12 @@
 import * as React from 'react';
 
-import render from './render';
 import renderAsync from './render-async';
 import type { RefObject } from './types';
 
 export type RenderHookResult<Result, Props> = {
   result: RefObject<Result>;
-  rerender: (props: Props) => void;
-  unmount: () => void;
-};
-
-export type RenderHookAsyncResult<Result, Props> = {
-  result: RefObject<Result>;
-  rerenderAsync: (props: Props) => Promise<void>;
-  unmountAsync: () => Promise<void>;
+  rerender: (props: Props) => Promise<void>;
+  unmount: () => Promise<void>;
 };
 
 export type RenderHookOptions<Props> = {
@@ -30,39 +23,10 @@ export type RenderHookOptions<Props> = {
   wrapper?: React.ComponentType<any>;
 };
 
-export function renderHook<Result, Props>(
-  hookToRender: (props: Props) => Result,
-  options?: RenderHookOptions<NoInfer<Props>>,
-): RenderHookResult<Result, Props> {
-  const result = React.createRef<Result>() as RefObject<Result>;
-
-  function HookContainer({ hookProps }: { hookProps: Props }) {
-    const renderResult = hookToRender(hookProps);
-    React.useEffect(() => {
-      result.current = renderResult;
-    });
-
-    return null;
-  }
-
-  const { initialProps, ...renderOptions } = options ?? {};
-  const { rerender: rerenderComponent, unmount } = render(
-    // @ts-expect-error since option can be undefined, initialProps can be undefined when it should'nt
-    <HookContainer hookProps={initialProps} />,
-    renderOptions,
-  );
-
-  return {
-    result: result,
-    rerender: (hookProps: Props) => rerenderComponent(<HookContainer hookProps={hookProps} />),
-    unmount,
-  };
-}
-
-export async function renderHookAsync<Result, Props>(
+export async function renderHook<Result, Props>(
   hookToRender: (props: Props) => Result,
   options?: RenderHookOptions<NoInfer<Props>>,
-): Promise<RenderHookAsyncResult<Result, Props>> {
+): Promise<RenderHookResult<Result, Props>> {
   const result = React.createRef<Result>() as RefObject<Result>;
 
   function TestComponent({ hookProps }: { hookProps: Props }) {
@@ -83,8 +47,7 @@ export async function renderHookAsync<Result, Props>(
 
   return {
     result: result,
-    rerenderAsync: (hookProps: Props) =>
-      rerenderComponentAsync(<TestComponent hookProps={hookProps} />),
-    unmountAsync,
+    rerender: (hookProps: Props) => rerenderComponentAsync(<TestComponent hookProps={hookProps} />),
+    unmount: unmountAsync,
   };
 }