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

[gbatterbee]

    "@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:

[mpeyper]

Hi @gbatterbee, is this still causing you issues?

I want to confirm whether you are using renderHook from @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]

@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]

This is what i get

[mpeyper]

@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

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]

initialProps is for the hook, not the component.

We should change the naming to avoid confusion. testing-library/react-hooks passed initialProps to both which is also confusing because it's harder to reason about (especially from a type perspective).