UseState（）フックを使用するコンポーネントをテストします

UseStateフックを使用して反応コンポーネントをテストするには、JestとReact Testingライブラリを使用して相互作用をシミュレートし、UIの状態の変化を検証します。 1）コンポーネントをレンダリングし、初期状態を確認します。 2）クリックやフォームの送信などのユーザーインタラクションをシミュレートします。 3）UIで更新された状態反射を確認します。実装の詳細ではなく、動作に焦点を当て、Waitforで非同期更新を処理します。

useStateフックを使用する反応コンポーネントをテストするとき、状態の変化がコンポーネントの動作とレンダリングにどのように影響するかを基本的に検討しています。コンポーネントが状態の更新に正しく応答するようにすることです。

これらの動的コンポーネントをテストする世界に飛び込みましょう。

あなたが芸術作品を作成していると想像してください、そして、ブラシのすべてのストロークがキャンバスを変えると想像してください。それが、 useStateあなたのReactコンポーネントで行うことです。それはあなたが状態の変化でペイントすることができます。現在、これらのコンポーネントをテストすることは、あなた自身のアートワークを批判し、各ストローク（または状態の変更）が想像した傑作の結果を確実にするようなものです。

開始するには、JestなどのテストライブラリをReact Testing Libraryとともに使用する必要があります。これらのツールは、ユーザーのインタラクションをシミュレートし、コンポーネントの出力を確認するのに役立ちます。これがこれにアプローチする方法です：

 「React」からのImport React;
'@testing-library/React'から{render、fireevent}をインポート。
'./counter'からカウンターをインポートします。

test（ 'increments counter'、（）=> {
  const {getByText} = render（<counter />）;
  const incrementButton = getByText（ &#39;increment&#39;）;

  //初期状態チェック
  expect（getByText（ &#39;count：0&#39;））。tobeinthedocument（）;

  //クリックをシミュレートします
  fireevent.click（incrementButton）;

  //新しい状態を確認します
  expect（getByText（ &#39;count：1&#39;））。tobeinthedocument（）;
}）;

このテストでは、「インクリメント」ボタンをクリックすると状態が0から1に正しく更新されるかどうかを確認します。しかし、より複雑な状態相互作用を扱っている場合はどうなりますか？複数の状態変数を使用するフォームがあるとしましょう。これをテストする方法は次のとおりです。

 「React」からのImport React;
'@testing-library/React'から{render、fireevent}をインポート。
'./form'からフォームをインポートします。

test（ 'フォーム送信更新state'、（）=> {
  const {getByLabelText、getByText} = render（<form />）;

  //フォームに記入します
  fireevent.change（getByLabelText（ &#39;name：&#39;）、{ターゲット：{value： &#39;john doe&#39;}}）;
  fireevent.change（getByLabelText（ &#39;Email：&#39;）、{ターゲット：{value： &#39;john@example.com&#39;}}）;

  //フォームを送信します
  fireevent.click（getByText（ &#39;submit&#39;））;

  //更新された状態を確認します
  expect（getByText（ &#39;name：john doe&#39;））。tobeinthedocument（）;
  expect（getByText（ &#39;email：john@example.com&#39;））。tobeinthedocument（）;
}）;

それでは、ニュアンスと潜在的な落とし穴について話しましょう。よくある間違いの1つは、動作ではなく実装の詳細をテストすることです。あなたは、州が内部的に管理される方法ではなく、ユーザーが見て対話するものに集中したいと考えています。

たとえば、次のようなテストを避けてください。

 //悪い練習：実装の詳細をテストします
test（ '状態が更新された'、（）=> {
  const {container} = render（<counter />）;
  const instance = container.firstchild._ReaCtInternals;
  expect（instance.memoizedstate）.tobe（0）;
}）;

このテストでは、コンポーネントの内部状態を調べます。コンポーネントは、壊れやすく、Reactの内部とともに変化する可能性があります。代わりに、レンダリングされた出力とユーザーインタラクションに焦点を当てます。

考慮すべきもう1つの側面は、非同期状態の更新をテストすることです。コンポーネントがuseEffectを使用して非同期に状態を更新する場合、ReactテストライブラリからwaitForを使用して、州が更新された後にアサーションが実行されるようにする必要があります。

 '@testing-library/React'から{waitfor}をインポートします。

test（ 'async state update'、async（）=> {
  const {getByText} = render（<asynccounter />）;

  fireevent.click（getByText（ &#39;fetch count&#39;））;

  待機中（（）=> {
    expect（getByText（ &#39;count：10&#39;））。tobeinthedocument（）;
  }）;
}）;

パフォーマンスの最適化とベストプラクティスに関しては、テスト過剰がテストスイートの遅いことにつながる可能性があることを忘れないでください。コンポーネントの重要なパスに焦点を当てます。また、Reactdom/Test-Utilsのactを使用して状態の更新を包み、それらが正しく処理されることを確認してください。

 'React-dom/test-utils'から{act}をインポートします。

test（ 'counter increments'、（）=> {
  コンテナを許可します。
  act（（）=> {
    container = render（<counter />).container;
  }）;

  const button = container.queryselector（ &#39;button&#39;）;
  const label = container.queryselector（ &#39;p&#39;）;

  act（（）=> {
    button.dispatchevent（new MouseEvent（ &#39;click&#39;、{bubbles：true}））;
  }）;

  expect（label.textcontent）.tobe（ &#39;count：1&#39;）;
}）;

まとめて、 useStateを持つコンポーネントのテストは、UIにコンポーネントの状態の変更が正しく反映されるようにすることです。それは芸術と科学です。正しさだけでなく、ユーザーエクスペリエンスのためにもテストします。動作に焦点を合わせたテストを維持し、適切なツールを使用して相互作用をシミュレートし、非同期の更新を検討することを忘れないでください。これらのプラクティスを使用すると、Reactコンポーネントが堅牢で信頼性が高いことを確認できます。

以上がUseState（）フックを使用するコンポーネントをテストしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。