Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン
  • 何か問題がありますか？
#1,233 コメント 16 件 リアクション 3 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
25/100
issue の種類
ドキュメント
明瞭さ
説明が足りない
活発さ
停滞
技術スタック
javascript, react
領域
frontend, testing

調査の方向性

参照されている src/tests/useContext.test.tsx の例から始め、その wrapper と initialProps の挙動を issue の React 18 セットアップと比較します。推奨される provider-wrapping パターンをメンテナーに確認してから、関連するテストまたはドキュメントを更新し、期待される prop の受け渡しの挙動を明示してカバーします。

索引モデルが issue の本文から書いたものです。

説明

question
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?

主要言語
JavaScript
スター
19.7k
フォーク
1.2k
30日以内にマージされた PR はありません

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

testing-library/react-testing-library のほかの issue

testing-library/react-testing-library の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。