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

How to wrap a hook with a Provider with prop passing?

Open
#1,233 16 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

question
Dominant language
JavaScript
Stars
19.7k
Forks
1.2k
Avg merge
3d 16h
Merged PRs (30d)
1

Description

What is your question:

I have seen the following which was helpful: https://github.com/testing-library/react-hooks-testing-library/issues/23
This question steams further from that with regards to passing initialProps.
I have updated React and DOM ("react": "18.2.0", "react-dom": "18.2.0",) and the React Testing Library ("@testing-library/react": "14.0.0",) to the most recent versions. I have followed that pattern, but notice that the props passed into Provider are only available via children. Please see the example below (borrowed from the tests within the library https://github.com/testing-library/react-hooks-testing-library/blob/1e01273374af4e48a0feb1f2233bf6c76d742167/src/__tests__/useContext.test.tsx):

 test('should update value in context when props are updated', () => {
    const TestContext = createContext('foo');

    const wrapper = ({
      current,
      children,
    }: {
      current: string;
      children: any;
    }) => {
      console.log({ current });
      console.log({ children });
      console.log('nested', children.props.renderCallbackProps);

      return (
        <TestContext.Provider value={current}>{children}</TestContext.Provider>
      );
    };

    const { result, rerender } = renderHook(() => useContext(TestContext), {
      wrapper,
      initialProps: {
        current: 'bar',
      },
    });

    rerender({ current: 'baz' });

    expect(result.current).toBe('baz');
  });

// console.logs

console.log
{ current: undefined }

console.log
{
  children: {
    '$$typeof': Symbol(react.element),
    type: [Function: TestComponent],
    key: null,
    ref: null,
    props: { renderCallbackProps: [Object] },
    _owner: null,
    _store: {}
  }
}

console.log
nested { current: 'baz' }


Was this the intended change? Are we supposed to only pass children to a wrapper and then desconstruct those props from it? Can we update the tests or docs to represent the recommended pattern?

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 referenced src/tests/useContext.test.tsx example and compare its wrapper and initialProps behavior with the issue's React 18 setup. Confirm the recommended provider-wrapping pattern with the maintainers, then update the relevant tests or documentation so the expected prop-passing behavior is explicit and covered.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend, testing
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.