feat: add render hook support for multiple arguments

Author: imevanc

src/__tests__/renderHook.js

@@ -111,3 +111,28 @@ testGateReact19('legacyRoot throws', () => {
     `\`legacyRoot: true\` is not supported in this version of React. If your app runs React 19 or later, you should remove this flag. If your app runs React 18 or earlier, visit https://react.dev/blog/2022/03/08/react-18-upgrade-guide for upgrade instructions.`,
   )
 })
+
+test('supports initialArgs for multi-parameter hooks', () => {
+  const useTestHook = (a, b, c) => a + b + c
+  const {result} = renderHook(useTestHook, {initialArgs: [1, 2, 3]})
+
+  expect(result.current).toBe(6)
+})
+
+test('rerender supports multiple parameters', () => {
+  const useTestHook = (a, b) => a * b
+  const {result, rerender} = renderHook(useTestHook, {initialArgs: [2, 3]})
+
+  expect(result.current).toBe(6)
+
+  rerender(4, 5)
+  expect(result.current).toBe(20)
+})
+
+test('throws error when both initialProps and initialArgs are used', () => {
+  const useTestHook = (a, b) => a + b
+
+  expect(() =>
+    renderHook(useTestHook, {initialProps: 1, initialArgs: [2, 3]}),
+  ).toThrow('Cannot use both initialProps and initialArgs. Choose one.')
+})

src/pure.js

@@ -290,7 +290,11 @@ function cleanup() {
 }
 
 function renderHook(renderCallback, options = {}) {
-  const {initialProps, ...renderOptions} = options
+  const {initialProps, initialArgs, ...renderOptions} = options
+
+  if (initialProps !== undefined && initialArgs !== undefined) {
+    throw new Error('Cannot use both initialProps and initialArgs. Choose one.')
+  }
 
   if (renderOptions.legacyRoot && typeof ReactDOM.render !== 'function') {
     const error = new Error(
@@ -303,9 +307,18 @@ function renderHook(renderCallback, options = {}) {
   }
 
   const result = React.createRef()
+  const isUsingArgs = initialArgs !== undefined
 
   function TestComponent({renderCallbackProps}) {
-    const pendingResult = renderCallback(renderCallbackProps)
+    // Handle both cases: when renderCallbackProps is an array to spread,
+    // and when it's a single value not to spread
+    const pendingResult = isUsingArgs
+      ? renderCallback(
+          ...(Array.isArray(renderCallbackProps)
+            ? renderCallbackProps
+            : [renderCallbackProps]),
+        )
+      : renderCallback(renderCallbackProps)
 
     React.useEffect(() => {
       result.current = pendingResult
@@ -315,13 +328,17 @@ function renderHook(renderCallback, options = {}) {
   }
 
   const {rerender: baseRerender, unmount} = render(
-    <TestComponent renderCallbackProps={initialProps} />,
+    <TestComponent
+      renderCallbackProps={isUsingArgs ? initialArgs : initialProps}
+    />,
     renderOptions,
   )
 
-  function rerender(rerenderCallbackProps) {
+  function rerender(...newArgs) {
     return baseRerender(
-      <TestComponent renderCallbackProps={rerenderCallbackProps} />,
+      <TestComponent
+        renderCallbackProps={isUsingArgs ? newArgs : newArgs[0]}
+      />,
     )
   }
 

types/index.d.ts

@@ -249,6 +249,7 @@ export interface RenderHookOptions<
    * to use the rerender utility to change the values passed to your hook.
    */
   initialProps?: Props | undefined
+  initialArgs?: Props | undefined
 }
 
 /**
@@ -262,7 +263,7 @@ export function renderHook<
   Container extends RendererableContainer | HydrateableContainer = HTMLElement,
   BaseElement extends RendererableContainer | HydrateableContainer = Container,
 >(
-  render: (initialProps: Props) => Result,
+  render: (initialProps: Props, initialArgs: Props) => Result,
   options?: RenderHookOptions<Props, Q, Container, BaseElement> | undefined,
 ): RenderHookResult<Result, Props>