@@ -24,6 +24,13 @@ as these methods:
24
24
- [ ` asFragment ` ] ( #asfragment )
25
25
- [ ` cleanup ` ] ( #cleanup )
26
26
- [ ` act ` ] ( #act )
27
+ - [ ` renderHook ` ] ( #renderhook )
28
+ - [ ` renderHook ` Options] ( #renderhook-options )
29
+ - [ ` initialProps ` ] ( #initialprops )
30
+ - [ ` wrapper ` ] ( #wrapper-1 )
31
+ - [ ` renderHook ` Result] ( #renderhook-result )
32
+ - [ ` result ` ] ( #result )
33
+ - [ ` rerender ` ] ( #rerender-1 )
27
34
28
35
---
29
36
@@ -316,3 +323,94 @@ This is a light wrapper around the
316
323
All it does is forward all arguments to the act function if your version of
317
324
react supports ` act ` . It is recommended to use the import from
318
325
` @testing - library / react ` over ` react - dom / test - utils ` for consistency reasons.
326
+
327
+ ## ` renderHook `
328
+
329
+ This is a convenience wrapper around ` render ` with a custom test component. The
330
+ API emerged from a popular testing pattern and is mostly interesting for
331
+ libraries publishing hooks. You should prefer ` render ` since a custom test
332
+ component results in more readable and robust tests since the thing you want to
333
+ test is not hidden behind an abstraction.
334
+
335
+ ` ` ` typescript
336
+ function renderHook<Result , Props >(
337
+ render : (props : Props ) => Result ,
338
+ options ? : RenderHookOptions <Props >,
339
+ ): RenderHookResult <Result , Props >
340
+ ```
341
+
342
+ Example:
343
+
344
+ ```jsx
345
+ import {renderHook } from ' @testing-library/react'
346
+
347
+ test (' returns logged in user' , () => {
348
+ const {result} = renderHook (() => useLoggedInUser ())
349
+ expect (result .current ).toEqual ({name: ' Alice' })
350
+ })
351
+ ` ` `
352
+
353
+ ## ` renderHook ` Options
354
+
355
+ ### ` renderHook ` Options ` initialProps `
356
+
357
+ Declares the props that are passed to the render-callback when first invoked.
358
+ These will **not** be passed if you call ` rerender ` without props.
359
+
360
+ ` ` ` jsx
361
+ import {renderHook } from ' @testing-library/react'
362
+
363
+ test (' returns logged in user' , () => {
364
+ const {result, rerender} = renderHook (({name } = {}) => name , {
365
+ initialProps: {name: ' Alice' },
366
+ })
367
+ expect (result .current ).toEqual ({name: ' Alice' })
368
+ rerender ()
369
+ expect (result .current ).toEqual ({name: undefined })
370
+ })
371
+ ` ` `
372
+
373
+ ### ` renderHook ` Options ` wrapper `
374
+
375
+ See [ ` wrapper ` option for ` render ` ](#wrapper)
376
+
377
+ ## ` renderHook ` Result
378
+
379
+ The ` renderHook ` method returns an object that has a few properties:
380
+
381
+ ### ` result `
382
+
383
+ Holds the value of the most recently **committed** return value of the
384
+ render-callback:
385
+
386
+ ` ` ` jsx
387
+ import {renderHook } from ' @testing-library/react'
388
+
389
+ const {result } = renderHook (() => {
390
+ const [name, setName] = useState (' ' )
391
+ React .useEffect (() => {
392
+ setName (' Alice' )
393
+ }, [])
394
+
395
+ return name
396
+ })
397
+
398
+ expect (result .current ).toBe (' Alice' )
399
+ ` ` `
400
+
401
+ Note that the value is held in ` result .current ` . Think of ` result ` as a
402
+ [ref](https://reactjs.org/docs/glossary.html#refs) for the most recently
403
+ **committed** value.
404
+
405
+ ### ` rerender `
406
+
407
+ Renders the the previously rendered render-callback with the new props:
408
+
409
+ ` ` ` jsx
410
+ import {renderHook } from ' @testing-library/react'
411
+
412
+ const {rerender } = renderHook (({name = ' Alice' } = {}) => name )
413
+
414
+ // re-render the same hook with different props
415
+ rerender ({name: ' Bob' })
416
+ ` ` `
0 commit comments