人間のコンポーネントテストを反応します

効果的な反応コンポーネントテストを作成することは、直感的で、簡単で、簡単に保守可能でなければなりません。ただし、現在のテストライブラリのエコシステムは不足していることが多く、開発者は一貫して堅牢なJavaScriptテストを書くことを妨げています。テスト反応コンポーネントとDOMには、JestやMochaなどの人気のあるテストランナーをめぐる高レベルのラッパーが頻繁に必要です。

課題：退屈で紛らわしいテスト

現在のテスト方法は、しばしば退屈で混乱していることがわかります。テストロジックを表現するためのjQueryのようなチェーンスタイルは面倒であり、Reactのコンポーネントアーキテクチャとは一致しません。酵素を使用しているように、一見読みやすいコードでさえ、過度に冗長になる可能性があります。

 expect（screen.find（ "。view"）。hasclass（ "Technologies"））。to.equal（true）;
expect（screen.find（ "h3"）。text（））。toequal（ "Technologies："）;
想像（screen.find（ "ul"）。children（））。to.have.lengthof（4）;
期待する（screen.contains（[）
  // ...
]）。to.equal（true）;
expect（screen.find（ "button"）。text（））。toequal（ "back"）;
expect（screen.find（ "button"）。hasclass（ "small"））。to.equal（true）;

これは、比較的単純なDOM構造に対応します。

<div classname="view technologies">
  <h3 id="テクノロジー">テクノロジー：</h3>
  <ul>
<li>JavaScript</li>
<li> Reactjs</li>
<li> nodejs</li>
<li> webpack</li>
</ul>
  <button classname="small">戻る</button>
</div>

より複雑なコンポーネントをテストすると、これらの問題が増幅され、プロセスがさらに扱いにくくなります。 HTMLを生成するためのReactの原則とテストアプローチの間の切断は、非効率的で維持が困難なテストにつながります。単純なJavaScriptチェーンは、長期的な保守性には不十分です。

2つの重要な問題が現れます：

• コンポーネント固有のテストアプローチ：コンポーネントの動作に合わせたテストを効果的に記述する方法。
• 冗長性の最小化：不要なコードを排除し、テストの読みやすさを改善する方法。

実用的なソリューションを探索する前に、これらに対処しましょう。

反応コンポーネントテストへの集中的なアプローチ

基本的な反応成分を考えてみましょう。

機能歓迎（小道具）{
  戻る<h1 id="こんにちは-props-name">こんにちは、{props.name}</h1> ;
}

この関数はpropsを受け入れ、JSXを使用してDOMノードを返します。コンポーネントは本質的に関数であるため、それらをテストするには、関数の動作の検証が含まれます。引数が返された結果にどのように影響するか。 Reactコンポーネントの場合、これはprops設定とレンダリングされたDOMの検証につながります。 UIを変更するユーザーインタラクション（クリック、マウスオーバーなど）もプログラム的にトリガーする必要があります。

テストの読みやすさの向上：アレンジアッサートパターン

明確で読みやすいテストが重要です。これは、簡潔な言葉遣いと一貫した構造によって達成されます。 Arrange-act-Assert（AAA）パターンは理想的です。

1. アレンジ：コンポーネントの小道具を準備します。
2. ACT：コンポーネントをレンダリングし、ユーザーインタラクションをトリガーします。
3. アサート：コンポーネントのマークアップに基づいて、予想される結果を確認します。

例：

それ（「大きなボタンをクリックする必要があります」、（）=> {
  // 整える
  propss.size = "large";

  // 活動
  const component = mount（send）;
  Simulate（component、{type： "" "}）;

  // assert
  想像（component、 "class"、 "clicked"）;
}）;

より簡単なテストでは、フェーズを組み合わせることができます。

それ（ "カスタムテキストでレンダリングする必要があります"、（）=> {
  期待する（「マウントされたとき」、「テキストを持つ」、「送信」）;
}）;

現在のテスト慣行の改善

以前の例は、概念的には健全ですが、標準ツールでは簡単に達成できません。このより一般的なアプローチを考えてみましょう。

それ（ "テクノロジービューを表示する必要があります"、（）=> {
  const container = document.createelement（ "div"）;
  document.body.appendChild（container）;

  act（（）=> {
    Reactdom.Render（<profilecard></profilecard> 、 容器）;
  }）;

  const button = container.queryselector（ "button"）;

  act（（）=> {
    button.dispatchevent（new Window.MouseEvent（ "click"、{bubbles：true}））;
  }）;

  const details = container.queryselector（ "。詳細"）;

  expect（details.classlist.contains（ "Technologies"））。tobe（true）;
}）;

これをより抽象的なバージョンと比較してください。

それ（ "テクノロジービューを表示する必要があります"、（）=> {
  const component = mount（<profilecard></profilecard> ）;

  Simulate（component、{type： "click"、ターゲット： "ボタン"}）;

  expect（component、 "テストIDに照会された"、「詳細」、「クラスを持つ」、「テクノロジー」）;
}）;

これはよりクリーンで読みやすいです。このレベルの抽象化は、予期しないjsで達成可能です。

予期しないjを使用したテスト

予期しないJSは、さまざまなテストフレームワークと互換性のある拡張可能なアサーションライブラリです。そのプラグインシステムと構文は、Reactコンポーネントテストを簡素化します。予期しないJSの内部の仕組みを深く掘り下げるのではなく、使用法と例に焦点を当てます。

例：プロファイルカードコンポーネント

ProfileCardコンポーネントをテストします（Brevityのためにコード省略が省略されていますが、参照されたGitHubリポジトリで使用できます）。

プロジェクトのセットアップ

フォローするには、GitHubリポジトリをクローンし、指示に従ってプロジェクトをセットアップしてテストを実行します。

コンポーネントテスト

テスト（ src/components/ProfileCard/ProfileCard.test.js ）は、AAAパターンを利用します。

1. プロップのセットアップ： Eachがデフォルトの小道具をセットアップするbeforeEach 。

前に（（）=> {
  小道具= {
    データ： {
      名前：「ジャスティンケース」、
      投稿：45、
      CreationDate： "01.01.2021"、
    }、
  };
}）;

2. 特定のテストケース：例には、「オンライン」アイコンのテスト、バイオテキスト、テクノロジービュー（データの有無にかかわらず）、ロケーションディスプレイ、コールバック機能の実行、デフォルトのプロップでのレンダリングが含まれます。各テストケースは、アレンジアサートパターンを明確に示しています。 （Brevityのために詳細なテストケースは省略されていますが、GitHub Repoで入手できます）。

3. ランニングテスト：すべてのテストはyarn testで実行されます。

結論

この例は、反応成分テストに対するより効果的なアプローチを示しています。コンポーネントを関数として表示し、AAAパターンを採用することにより、より保守可能で読みやすいテストを作成できます。テストライブラリの選択は、コンポーネントのレンダリングとDOM比較を効果的に処理する能力によって導かれる必要があります。予期しないjsは、この点で強力な候補です。完全な理解とさらなる実験のために、提供されたGithubリポジトリを調べてください。

以上が人間のコンポーネントテストを反応しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。