fix: fix render hook typing

Author: mdjastrzebski

src/__tests__/render-hook.test.tsx

@@ -60,32 +60,29 @@ test('allows wrapper components', () => {
   expect(result.current).toEqual('provided');
 });
 
-const useMyHook = (param: number | undefined) => {
-  return param;
-};
+function useMyHook<T>(param: T) {
+  return { param };
+}
 
 test('props type is inferred correctly when initial props is defined', () => {
-  const { result, rerender } = renderHook((num: number | undefined) => useMyHook(num), {
+  const { result, rerender } = renderHook((num: number) => useMyHook(num), {
     initialProps: 5,
   });
-
-  expect(result.current).toBe(5);
+  expect(result.current.param).toBe(5);
 
   rerender(6);
-
-  expect(result.current).toBe(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), {
     initialProps: undefined,
   });
 
-  expect(result.current).toBeUndefined();
+  expect(result.current.param).toBeUndefined();
 
   rerender(6);
-
-  expect(result.current).toBe(6);
+  expect(result.current.param).toBe(6);
 });
 
 /**

src/render-hook.tsx

@@ -2,15 +2,16 @@ 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: React.RefObject<Result>;
+  result: RefObject<Result>;
   rerender: (props: Props) => void;
   unmount: () => void;
 };
 
 export type RenderHookAsyncResult<Result, Props> = {
-  result: React.RefObject<Result>;
+  result: RefObject<Result>;
   rerenderAsync: (props: Props) => Promise<void>;
   unmountAsync: () => Promise<void>;
 };
@@ -39,7 +40,7 @@ export function renderHook<Result, Props>(
   hookToRender: (props: Props) => Result,
   options?: RenderHookOptions<Props>,
 ): RenderHookResult<Result, Props> {
-  const result: React.RefObject<Result | null> = React.createRef();
+  const result = React.createRef<Result>();
 
   function HookContainer({ hookProps }: { hookProps: Props }) {
     const renderResult = hookToRender(hookProps);
@@ -59,7 +60,7 @@ export function renderHook<Result, Props>(
 
   return {
     // Result should already be set after the first render effects are run.
-    result: result as React.RefObject<Result>,
+    result: result as RefObject<Result>,
     rerender: (hookProps: Props) => rerenderComponent(<HookContainer hookProps={hookProps} />),
     unmount,
   };
@@ -69,7 +70,7 @@ export async function renderHookAsync<Result, Props>(
   hookToRender: (props: Props) => Result,
   options?: RenderHookOptions<Props>,
 ): Promise<RenderHookAsyncResult<Result, Props>> {
-  const result: React.RefObject<Result | null> = React.createRef();
+  const result = React.createRef<Result>();
 
   function TestComponent({ hookProps }: { hookProps: Props }) {
     const renderResult = hookToRender(hookProps);
@@ -89,7 +90,7 @@ export async function renderHookAsync<Result, Props>(
 
   return {
     // Result should already be set after the first render effects are run.
-    result: result as React.RefObject<Result>,
+    result: result as RefObject<Result>,
     rerenderAsync: (hookProps: Props) =>
       rerenderComponentAsync(<TestComponent hookProps={hookProps} />),
     unmountAsync,

src/types.ts

@@ -1,3 +1,8 @@
+/** `RefObject` type from React 19. */
+export type RefObject<T> = {
+  current: T;
+};
+
 /**
  * Location of an element.
  */