Skip to content

Commit 952ea0b

Browse files
committed
feat: add support for multiple arguments in renderHook() for react
1 parent 1b9e396 commit 952ea0b

File tree

1 file changed

+52
-10
lines changed

1 file changed

+52
-10
lines changed

docs/react-testing-library/api.mdx

Lines changed: 52 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ as these methods:
2929
- [`act`](#act)
3030
- [`renderHook`](#renderhook)
3131
- [`renderHook` Options](#renderhook-options)
32+
- [`initialArgs`](#initialargs)
3233
- [`initialProps`](#initialprops)
3334
- [`onCaughtError`](#oncaughterror)
3435
- [`onRecoverableError`](#onrecoverableerror)
@@ -133,7 +134,7 @@ Behaves the same as [`onCaughtError` in `ReactDOMClient.createRoot`](https://rea
133134

134135
### `onRecoverableError`
135136

136-
Callback called when React automatically recovers from errors.
137+
Callback called when React automatically recovers from errors.
137138
Behaves the same as [`onRecoverableError` in `ReactDOMClient.createRoot`](https://react.dev/reference/react-dom/client/createRoot#parameters).
138139

139140
### `wrapper`
@@ -364,14 +365,14 @@ test is not hidden behind an abstraction.
364365
```typescript
365366
function renderHook<
366367
Result,
367-
Props,
368+
Args extends any[],
368369
Q extends Queries = typeof queries,
369370
Container extends Element | DocumentFragment = HTMLElement,
370371
BaseElement extends Element | DocumentFragment = Container
371372
>(
372-
render: (initialProps: Props) => Result,
373-
options?: RenderHookOptions<Props, Q, Container, BaseElement>,
374-
): RenderHookResult<Result, Props>
373+
render: (initialArgs: Args) => Result,
374+
options?: RenderHookArgsOptions<Args, Q, Container, BaseElement>,
375+
): RenderHookArgsResult<Result, Args>
375376
```
376377

377378
Example:
@@ -387,8 +388,49 @@ test('returns logged in user', () => {
387388

388389
## `renderHook` Options
389390

391+
### `renderHook` Options `initialArgs`
392+
393+
Declares the arguments that are passed to the render-callback when first
394+
invoked. These will **not** be passed if you call `rerender` without arguments.
395+
396+
```jsx
397+
import {renderHook} from '@testing-library/react'
398+
399+
test('returns logged in user', () => {
400+
const {result, rerender} = renderHook((...args) => args, {
401+
initialArgs: ['Alice', 42],
402+
})
403+
expect(result.current).toEqual(['Alice', 42])
404+
rerender()
405+
expect(result.current).toEqual([])
406+
})
407+
```
408+
409+
> NOTE: When using `renderHook` in conjunction with the `wrapper` and
410+
> `initialArgs` options, the `initialArgs` are not passed to the `wrapper`
411+
> component. To provide props to the `wrapper` component, consider a solution
412+
> like this:
413+
>
414+
> ```js
415+
> const createWrapper = (Wrapper, props) => {
416+
> return function CreatedWrapper({ children }) {
417+
> return <Wrapper {...props}>{children}</Wrapper>;
418+
> };
419+
> };
420+
>
421+
> ...
422+
>
423+
> {
424+
> wrapper: createWrapper(Wrapper, { value: 'foo' }),
425+
> }
426+
> ```
427+
390428
### `renderHook` Options `initialProps`
391429

430+
> NOTE: This option is left for backwards compatibility: It allows to pass a
431+
> single hook argument only. Prefer using `initialArgs` which allows to pass
432+
> multiple arguments to the hook function.
433+
392434
Declares the props that are passed to the render-callback when first invoked.
393435
These will **not** be passed if you call `rerender` without props.
394436

@@ -431,7 +473,7 @@ Behaves the same as [`onCaughtError` in `ReactDOMClient.createRoot`](https://rea
431473

432474
### `onRecoverableError`
433475

434-
Callback called when React automatically recovers from errors.
476+
Callback called when React automatically recovers from errors.
435477
Behaves the same as [`onRecoverableError` in `ReactDOMClient.createRoot`](https://react.dev/reference/react-dom/client/createRoot#parameters).
436478

437479
### `renderHook` Options `wrapper`
@@ -478,10 +520,10 @@ Renders the previously rendered render-callback with the new props:
478520
```jsx
479521
import {renderHook} from '@testing-library/react'
480522
481-
const {rerender} = renderHook(({name = 'Alice'} = {}) => name)
523+
const {rerender} = renderHook((name, age) => {}, {initialArgs: ['Alice', 42]})
482524
483-
// re-render the same hook with different props
484-
rerender({name: 'Bob'})
525+
// re-render the same hook with different arguments
526+
rerender('Bob', 84)
485527
```
486528

487529
### `unmount`
@@ -516,4 +558,4 @@ configure({reactStrictMode: true})
516558
When enabled, [`<StrictMode>`](https://react.dev/reference/react/StrictMode) is
517559
rendered around the inner element. Defaults to `false`.
518560

519-
This setting can be changed for a single test by providing `reactStrictMode` in the options argument of the [`render`](#render-options-reactstrictmode) function.
561+
This setting can be changed for a single test by providing `reactStrictMode` in the options argument of the [`render`](#render-options-reactstrictmode) function.

0 commit comments

Comments
 (0)