testing-library / testing-library/react-testing-library

Intial props not working when rendering a hook (or I've done something wrong.)

Open
#1,277 5 comments 2 reactions 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.