Repository navigation
Intial props not working when rendering a hook (or I've done something wrong.) #1277
Description
"@testing-library/dom": "^8.13.0",
"@testing-library/jest-dom": "^6.1.3",
"@testing-library/react": "13.3.0",
"@testing-library/react-hooks": "^8.0.1",
"@testing-library/user-event": "^14.4.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-test-renderer: 18.1.0)"
"`node` version: 18"
"`pnpm` (or `yarn`) version: 7"
Relevant code or config:
In the Reproduction details.
Taking the example from the docs, logged the initial props;
const CounterStepContext = createContext(1);
export const CounterStepProvider = ({
step,
children,
}: {
step: number;
children: React.ReactNode;
}) => {
console.log({ step });
return (
<CounterStepContext.Provider value={step}>
{children}
</CounterStepContext.Provider>
);
};
export function useCounter(initialValue = 0) {
const [count, setCount] = useState(initialValue);
const step = useContext(CounterStepContext);
const increment = useCallback(() => setCount((x) => x + step), [step]);
const reset = useCallback(() => setCount(initialValue), [initialValue]);
return { count, increment, reset };
}
test("should use custom step when incrementing", () => {
const wrapper = ({
children,
step,
}: {
step: number;
children: React.ReactNode;
}) => <CounterStepProvider step={step}>{children}</CounterStepProvider>;
const { result, rerender } = renderHook(() => useCounter(), {
wrapper,
initialProps: {
step: 2,
},
});
act(() => {
result.current.increment();
});
expect(result.current.count).toBe(2);
/**
* Change the step value
*/
rerender({ step: 8 });
act(() => {
result.current.increment();
});
expect(result.current.count).toBe(10);
}); console.log
{ step: undefined }
What you did:
Trying to use initialProps with the renderHook
What happened:
Initial props are not being passed.
No obvious error message, component just isn't receiving the props.
Activity
mpeyper commentedon Jan 31, 2024
Hi @gbatterbee, is this still causing you issues?
I want to confirm whether you are using
renderHookfrom@testing-library/react-hooks(this library, up to react 17) or@testing-library/react(that library, react 18 and newer). We have a test around this case, does that pass in your environment?gbatterbee commentedon Feb 6, 2024
@mpeyper Sorry, didn't get notified of your message for some reason.
This is where we're using renderHook from.
I've not tried recently.
I'll take a look at your test case.
Thanks
gbatterbee commentedon Feb 6, 2024
This is what i get
mpeyper commentedon Feb 6, 2024
In that case, I’ll transfer your ticket to their repo ( @testing-library/react) instead as we’re actually a different library. I hope they can get to the bottom of it for you.
eps1lon commentedon Feb 7, 2024
initialPropsis for the hook, not the component.We should change the naming to avoid confusion. testing-library/react-hooks passed
initialPropsto both which is also confusing because it's harder to reason about (especially from a type perspective).