testing-library / testing-library/react-testing-library
Intial props not working when rendering a hook (or I've done something wrong.)
Open
Nobody has claimed this yet.
BREAKING CHANGE
enhancement
- Dominant language
- JavaScript
- Stars
- 19.7k
- Forks
- 1.2k
- Avg merge
- 3d 16h
- Merged PRs (30d)
- 1
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.
Reproduction:
Problem description:
Suggested solution:
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the renderHook call and wrapper in the supplied reproduction, then inspect how initialProps are passed to the wrapper. Re-run the custom-step test and confirm the wrapper receives step 2 initially, receives step 8 after rerender, and the count assertions pass.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- testing
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100