File tree Expand file tree Collapse file tree 1 file changed +42
-0
lines changed Expand file tree Collapse file tree 1 file changed +42
-0
lines changed Original file line number Diff line number Diff line change @@ -54,6 +54,48 @@ test('should use custom step when incrementing', () => {
54
54
The ` wrapper ` option will accept any React component, but it ** must** render ` children ` in order for
55
55
the test component to render and the hook to execute.
56
56
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
+
57
99
### ESLint Warning
58
100
59
101
It can be very tempting to try to inline the ` wrapper ` variable into the ` renderHook ` line, and
You can’t perform that action at this time.
0 commit comments