Skip to content

Commit 3940216

Browse files
authored
docs: @testing-library/react#renderHook (#967)
* docs: `@testing-library/react#renderHook` * docs for `initialProps`
1 parent bbc34c7 commit 3940216

File tree

1 file changed

+98
-0
lines changed

1 file changed

+98
-0
lines changed

docs/react-testing-library/api.mdx

+98
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,13 @@ as these methods:
2424
- [`asFragment`](#asfragment)
2525
- [`cleanup`](#cleanup)
2626
- [`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)
2734

2835
---
2936

@@ -316,3 +323,94 @@ This is a light wrapper around the
316323
All it does is forward all arguments to the act function if your version of
317324
react supports `act`. It is recommended to use the import from
318325
`@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

Comments
 (0)