React: TestUtils.renderIntoDocumentは、有効な機能コンポーネントが渡されると `null`を返します。

作成日 2019年04月10日 · 4コメント · ソース: facebook/react

機能をリクエストしバグを報告しますか？
バグを報告したい。

現在の動作は何ですか？
現在、有効な機能コンポーネントがTestUtils.renderIntoDocumentに渡されると、 nullが返され、エラーは発生しません。

デモ
この動作はサンドボックスで再現されました： https ：

コンソールをチェックして、準備されたサンプルコンポーネントのTestUtils.renderIntoDocument出力を確認します。

回避策
SFCとFCの両方を満たす回避策は、コンポーネントをコンテナーにラップすることです。

const FCCounter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <div>{count}</div>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
};

TestUtils.renderIntoDocument(
  <div>
    <FCCounter />
  </div>
);

期待される動作は何ですか？

機能コンポーネントをレンダリングします。
最悪の場合-エラーを提供します。

この問題の影響を受けるReactのバージョンはどれですか？
Reactバージョン：16.8.6

Test Utils Question

ソース

DeividasBakanas

全てのコメント4件

機能コンポーネントにはinstancesがないので、何を期待しますか

TestUtils.renderIntoDocument(<FCCounter/>)

戻るには？

また、大まかに言って、あなたがやろうとしていることを説明できますか？ forwardRef / useImperativeHandle （https://reactjs.org/docs/hooks-reference.html#useimperativehandle）を使用して、内部の「メソッド」にアクセスできますが、私は何に興味がありますかあなたはまったくテストしようとしています。

threepointone 2019年04月11日

呼び出した後TestUtils.renderIntoDocument古典的なコンポーネントで、私は完全にそれがの到達するために有効になっていますstate 、 propsして使用してコンポーネントを操作setState 。したがって、 TestUtils.renderIntoDocumentが返されると予想したのは、 state 、 props 、およびsetStateを使用できるオブジェクトです。

機能コンポーネントとして実装されているコンポーネントをテストしようとしています。主な目的は、コンポーネントの状態を変更し、変更された状態がテストで期待される状態と一致するかどうかを確認することです。

テストの場合、前提条件があります。コンポーネントはそのままテストする必要があり、テスト専用のコードを含むように変更しないでください。したがって、 forwardRef/useImperativeHandleを使用するようにコンポーネント自体を変更することはできません。

DeividasBakanas 2019年04月12日

@DeividasBakanas関数コンポーネントにはインスタンスがありません。ボタンをトリガーすると、イベントをディスパッチして状態を更新できます。私の意見では、これはTestUtils.renderIntoDocumentから返されたインスタンスを強制的に更新しようとするよりも優れたアプローチです（クラスコンポーネントの場合）。

trueadm 2019年04月13日

👍1

前述の@trueadmのように、コンポーネント自体の実装の詳細をテストすることはお勧めしません。また、props / eventsを使用して更新をトリガーし、コンポーネントの出力に対してアサーションを実行します。これを少し簡単にするために、react-testing-libraryhttps ：//github.com/kentcdodds/react-testing-libraryのようなライブラリをお勧めします。ケントはまた、このトピックについて広範囲に書いているので、お勧めします。

バグ/機能のリクエストというよりは使用上の質問であるため、この問題を解決します。

threepointone 2019年04月15日

👍1

このページは役に立ちましたか？

0 / 5 - 0 評価

React: TestUtils.renderIntoDocumentは、有効な機能コンポーネントが渡されると `null`を返します。

全てのコメント4件

関連する問題