@@ -29,6 +29,7 @@ as these methods:
29
29
- [ ` act ` ] ( #act )
30
30
- [ ` renderHook ` ] ( #renderhook )
31
31
- [ ` renderHook ` Options] ( #renderhook-options )
32
+ - [ ` initialArgs ` ] ( #initialargs )
32
33
- [ ` initialProps ` ] ( #initialprops )
33
34
- [ ` onCaughtError ` ] ( #oncaughterror )
34
35
- [ ` onRecoverableError ` ] ( #onrecoverableerror )
@@ -133,7 +134,7 @@ Behaves the same as [`onCaughtError` in `ReactDOMClient.createRoot`](https://rea
133
134
134
135
### ` onRecoverableError `
135
136
136
- Callback called when React automatically recovers from errors .
137
+ Callback called when React automatically recovers from errors .
137
138
Behaves the same as [` onRecoverableError ` in ` ReactDOMClient.createRoot ` ](https : // react.dev/reference/react-dom/client/createRoot#parameters).
138
139
139
140
### ` wrapper `
@@ -364,14 +365,14 @@ test is not hidden behind an abstraction.
364
365
` ` ` typescript
365
366
function renderHook<
366
367
Result,
367
- Props ,
368
+ Args extends any[] ,
368
369
Q extends Queries = typeof queries,
369
370
Container extends Element | DocumentFragment = HTMLElement,
370
371
BaseElement extends Element | DocumentFragment = Container
371
372
>(
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 >
375
376
` ` `
376
377
377
378
Example :
@@ -387,8 +388,49 @@ test('returns logged in user', () => {
387
388
388
389
## ` renderHook ` Options
389
390
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
+
390
428
### ` renderHook ` Options ` initialProps `
391
429
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
+
392
434
Declares the props that are passed to the render -callback when first invoked .
393
435
These will **not ** be passed if you call ` rerender ` without props .
394
436
@@ -431,7 +473,7 @@ Behaves the same as [`onCaughtError` in `ReactDOMClient.createRoot`](https://rea
431
473
432
474
### ` onRecoverableError `
433
475
434
- Callback called when React automatically recovers from errors .
476
+ Callback called when React automatically recovers from errors .
435
477
Behaves the same as [` onRecoverableError ` in ` ReactDOMClient.createRoot ` ](https : // react.dev/reference/react-dom/client/createRoot#parameters).
436
478
437
479
### ` renderHook ` Options ` wrapper `
@@ -478,10 +520,10 @@ Renders the previously rendered render-callback with the new props:
478
520
` ` ` jsx
479
521
import {renderHook} from '@testing-library/react'
480
522
481
- const {rerender} = renderHook(({ name = 'Alice'} = {}) => name )
523
+ const {rerender} = renderHook((name, age) => {}, {initialArgs: ['Alice', 42]} )
482
524
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 )
485
527
` ` `
486
528
487
529
### ` unmount `
@@ -516,4 +558,4 @@ configure({reactStrictMode: true})
516
558
When enabled , [` <StrictMode> ` ](https : // react.dev/reference/react/StrictMode) is
517
559
rendered around the inner element . Defaults to ` false ` .
518
560
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