@@ -54,6 +54,48 @@ test('should use custom step when incrementing', () => {
5454The ` wrapper ` option will accept any React component, but it ** must** render ` children ` in order for
5555the test component to render and the hook to execute.
5656
57+ ### Providing Props
58+ 59+ Sometimes we need to test a hook with different context values. By using the ` initialProps ` option
60+ and the new props of ` rerender ` method, we can easily do this:
61+ 62+ ``` js
63+ import { renderHook , act } from ' @testing-library/react-hooks'
64+ import { CounterStepProvider , useCounter } from ' ./counter'
65+ 66+ test (' should use custom step when incrementing' => {
67+ const wrapper = ({ children, step }) => (
68+ < CounterStepProvider step= {step}> {children}< / CounterStepProvider>
69+ )
70+ const { result , rerender } = renderHook (() => useCounter (), {
71+ wrapper,
72+ initialProps: {
73+ step: 2
74+ }
75+ })
76+ 77+ act (() => {
78+ result .current .increment ()
79+ })
80+ 81+ expect (result .current .count ).toBe (2 )
82+ 83+ /**
84+ * Change the step value
85+ */
86+ rerender ({ step: 8 })
87+ 88+ act (() => {
89+ result .current .increment ()
90+ })
91+ 92+ expect (result .current .count ).toBe (10 )
93+ })
94+ ```
95+ 96+ Note the ` initialProps ` and the new props of ` rerender ` are also accessed by the callback function
97+ of the ` renderHook ` which the wrapper is provided to.
98+ 5799### ESLint Warning
58100
59101It can be very tempting to try to inline the ` wrapper ` variable into the ` renderHook ` line, and
0 commit comments