検索

ホームページ >ウェブフロントエンド >jsチュートリアル >反応コンポーネントをテストするガイド

反応コンポーネントをテストするガイド

Christopher Nolan
Christopher Nolanオリジナル
2025-02-16 10:13:09277ブラウズ

反応コンポーネントをテストするガイド

キーテイクアウト

  • 反応コンポーネントは、オブジェクトの構成と関係のために本質的にテスト可能であり、再利用可能なコンポーネントを構築するために継承に依存していないため、テストが容易になります。
    • Reactの浅いレンダラーユーティリティにより、DOMを必要とせずに単一のコンポーネントを単独で単一のコンポーネントの単位テストが可能にし、迅速で焦点を絞ったテストを可能にします。
  • ReactのJSX構文により、ブール膜やコールバックなどのさまざまなJavaScriptタイプを渡すことができ、さまざまな状態でのコンポーネントのテストが促進されます。
    • 他のコンポーネントに絡み合ったり依存したりするコンポーネントをテストするには、単体テストでは、実装の詳細ではなく、コンポーネントの出力と相互作用に焦点を当てる必要があります。 JestやEnzymeなどのツールは、Reactコンポーネントのテストに推奨され、「浅いレンダリング」や現実的なテストシナリオを作成するための模擬関数などの有用な機能を提供します。
    • Reactは、JavaScript開発者コミュニティ内で前進したフレームワークです。 Reactには、コンポーネントを設計するための強力な構成フレームワークがあります。 Reactコンポーネントは、Webアプリケーションで使用できる再利用可能なコードのビットです。
  • 反応コンポーネントはDOMからしっかりと結合されていませんが、単位テストはどれくらい簡単ですか？このテイクでは、ユニットテスト反応コンポーネントに必要なものを調べてみましょう。コンポーネントをテスト可能にするための思考プロセスを示します。
    • 留意してください。私は特別な種類のテストであるユニットテストについてのみ話しています。 （さまざまな種類のテストの詳細については、「JavaScriptテスト：ユニットvs機能vs統合テスト」を読むことをお勧めします。）
    • ユニットテストでは、2つのことに興味があります：迅速な首を壊すフィードバック。これにより、高度な信頼性とコードの品質で変更を反復させることができます。これにより、Reactコンポーネントがブラウザで死んでいないというレベルの安心感が得られます。迅速な速度で適切なフィードバックを得ることができると、競争力が得られます。これは、今日のアジャイルソフトウェア開発の世界で維持したいと思うものです。
デモについては、チェックボックスを通してフィルタリングできるGreat Apesのリストを実行しましょう。 GitHubでコードベース全体を見つけることができます。簡潔にするために、興味のあるコードサンプルのみを表示します。この記事では、Reactコンポーネントを使用した作業レベルの知識を想定しています。

デモサンプルコードをダウンロードして実行すると、次のようなページが表示されます。

テスト可能なコンポーネントを書き込み

反応では、良いアプローチはコンポーネントの階層から始めることです。個々のコンポーネントを構築するときに、単一の責任の原則が思い浮かびます。 Reactコンポーネントは、オブジェクトの構成と関係を使用しますたとえば、大猿のリストについては、このアプローチがあります。

優れた類人猿リストには、データが多くの類人猿の行があることを見てみましょう。 Reactコンポーネントはこの組成データモデルを利用しており、テスト可能です。 
FilterableGreatApeList
|_ GreatApeSearchBar
|_ GreatApeList
   |_ GreatApeRow
反応コンポーネントでは、継承を使用して再利用可能なコンポーネントを構築しないようにします。古典的なオブジェクト指向プログラミングの背景から来る場合は、これに留意してください。 Reactコンポーネントは事前に子供を知らない。祖先の長いチェーンから降りるコンポーネントのテストは悪夢になる可能性があります。

自分でフィルター可能なGreatapelistを探索させていただきます。これは、ここで興味深い2つの個別のコンポーネントを備えたReactコンポーネントです。それに付属する単位テストもお気軽に探索してください。 たとえば、テスト可能なgreatapeSearchbarを構築するには、これを行います

このコンポーネントには、ラベルが付いたチェックボックスがあり、クリックイベントをワイヤします。このアプローチはすでにあなたにとってあまりにも馴染みがあるかもしれません、それはとても良いことです。

反応すると、テスト可能なコンポーネントが無料で、すぐに箱から出てくることに注意してください。ここには特別なことは何もありません。イベントハンドラー、JSX、レンダリング方法。

階層の次の反応コンポーネントはgreatapelistであり、次のようになります。

Greataperowコンポーネントを備えており、オブジェクト構成を使用しているReactコンポーネントです。これは、職場でのReactの最も強力な組成モデルです。再利用可能でありながらテスト可能なコンポーネントを構築するときの継承の欠如に注意してください。 
<span>class GreatApeSearchBar extends Component {
</span>  <span>constructor(props) {
</span>    <span>super(props);
</span>
    <span>this.handleShowExtantOnlyChange = this.handleShowExtantOnlyChange.bind(this);
</span>  <span>}
</span>
  <span>handleShowExtantOnlyChange(e) {
</span>    <span>this.props.onShowExtantOnlyInput(e.target.checked);
</span>  <span>}
</span>
  <span>render() {
</span>    <span>return(
</span>      <span><span><span><form</span>></span>
</span><span>        <span><span><input</span>
</span></span><span>          <span>id<span>="GreatApeSearchBar-showExtantOnly"</span>
</span></span><span>          <span>type<span>="checkbox"</span>
</span></span><span>          <span>checked<span>={this.props.showExtantOnly}</span>
</span></span><span>          <span>onChange<span>={this.handleShowExtantOnlyChange}</span>
</span></span><span>        <span>/></span>
</span><span>
</span><span>        <span><span><label</span> htmlFor<span>="GreatApeSearchBar-showExtantOnly"</span>></span>Only show extant species<span><span></label</span>></span>
</span><span>      <span><span></form</span>></span>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>
プログラミングでは、オブジェクト構成は、データ駆動型要素を可能にするデザインパターンです。別の言い方を考えると、greatapelistには多くのgreataperowオブジェクトがあります。デザインを駆動するのは、UIコンポーネント間のこの関係です。 Reactコンポーネントにはこの考え方が組み込まれています。UI要素を見るこの方法では、いくつかの素晴らしいユニットテストを書くことができます。

ここで、チェックボックスから来るthis.props.showextantonlyフラグを確認します。このshowextantonlyプロパティは、greatapeSearchbarのイベントハンドラーを通じて設定されます。

ユニットテストでは、他のコンポーネントに依存するユニットテストの反応コンポーネントをどのようにしますか？互いに絡み合っているコンポーネントはどうですか？これらは、すぐにテストするときに留意すべき素晴らしい質問です。反応コンポーネントには、ロックを解除できる秘密がまだある場合があります

今のところ、偉大な類人猿のデータを収容しているgreataperowを見てみましょう：

Reactコンポーネントを使用すると、各UI要素を単一の懸念に焦点を合わせて分離することが実用的です。これは、単体テストに関して重要な利点があります。このデザインパターンに固執している限り、ユニットテストを作成するのはシームレスになります。 
<span>class GreatApeList extends Component {
</span>  <span>render() {
</span>    <span>let rows = [];
</span>
    <span>this.props.apes.forEach((ape) => {
</span>      <span>if (!this.props.showExtantOnly) {
</span>        rows<span>.push(<span><span><GreatApeRow</span> key<span>={ape.name}</span> ape<span>={ape}</span> /></span>);
</span>
        <span>return;
</span>      <span>}
</span>
      <span>if (ape.isExtant) {
</span>        rows<span>.push(<span><span><GreatApeRow</span> key<span>={ape.name}</span> ape<span>={ape}</span> /></span>);
</span>      <span>}
</span>    <span>});
</span>
    <span>return (
</span>      <span><span><span><div</span>></span>
</span><span>        {rows}
</span><span>      <span><span></div</span>></span>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>
テストユーティリティ

反応コンポーネントのテストに関しては、最大の懸念を要約しましょう。単一のコンポーネントを単独で解決するにはどうすればよいですか？まあ、結局のところ、あなたがそれをすることを可能にする気の利いたユーティリティがあります。

Reactの浅いレンダラーを使用すると、コンポーネントを1レベルにレンダリングできます。このことから、レンダリング方法が何をするかについて事実を主張することができます。注目に値するのは、domを必要としないということです

単位テストを速く実行するには、コンポーネントを単独でテストする方法が必要です。このようにして、単一の問題に焦点を合わせてテストし、次の懸念に進むことができます。これは、ソリューションが成長し、自由にリファクタリングできるようになります。コードの近くにとどまり、急速な変更を加え、ブラウザで機能することを安心させることができます。 このアプローチの利点の1つは、コードについてよりよく考えることです。これにより、手元の問題を扱う最良のソリューションが生成されます。気を散らすものに連れて行かれていないときは解放されます。人間の脳は、一度に複数の問題に対処するのにひどい仕事をしています。

残っている唯一の質問は、この小さなユーティリティがReactコンポーネントをどのくらい連れて行くことができるかです。 
FilterableGreatApeList
|_ GreatApeSearchBar
|_ GreatApeList
   |_ GreatApeRow
すべてをまとめます

たとえば、greatapelistをご覧ください。あなたが解決しようとしている主な関心事は何ですか？このコンポーネントは、フィルターに基づいた素晴らしい類人猿のリストを示しています。

効果的な単体テストは、リストに合格し、この反応コンポーネントが何をするかについての事実を確認することです。旗に基づいて大猿をフィルタリングしたいと思います。

1つのアプローチは、これを行うことです：

JESTを使用してReactコンポーネントをテストしていることに注意してください。詳細については、「Jestを使用して反応コンポーネントをテストする方法」をご覧ください。 JSXでは、showextantonly = {true}をご覧ください。 JSX構文を使用すると、Reactコンポーネントに状態を設定できます。これにより、特定の状態を考慮して、コンポーネントを単位テストする多くの方法が開かれます。 JSXは基本的なJavaScriptタイプを理解しているため、真のフラグがブール値として設定されます。 リストが邪魔にならないように、greatapeSearchbarはどうですか？このイベントハンドラーは、興味深い可能性のあるOnchangeプロパティにあります。

1つの良い単位テストは、これを行うことです：

イベントを処理およびテストするには、同じ浅いレンダリング方法を使用します。 getRenderOutputメソッドは、イベント付きのコンポーネントにコールバック関数をバインドするのに役立ちます。ここで、onshowextantonlyinputプロパティにコールバックonchange関数が割り当てられます。 より些細なユニットテストでは、Greataperow Reactコンポーネントはどうですか？ HTMLタグを使用して優れたAPE情報を表示します。結局のところ、浅いレンダラーを使用してこのコンポーネントもテストできます。 たとえば、

画像を表示してみましょう

Reactコンポーネントを使用して、すべてレンダリング方法を中心にしています。これにより、テストする必要があるものを正確に知ることがやや直感的になります。浅いレンダラーがそれを行うので、ノイズを排除しながら単一のコンポーネントにレーザーに焦点を合わせることができます。

結論
<span>class GreatApeSearchBar extends Component {
</span>  <span>constructor(props) {
</span>    <span>super(props);
</span>
    <span>this.handleShowExtantOnlyChange = this.handleShowExtantOnlyChange.bind(this);
</span>  <span>}
</span>
  <span>handleShowExtantOnlyChange(e) {
</span>    <span>this.props.onShowExtantOnlyInput(e.target.checked);
</span>  <span>}
</span>
  <span>render() {
</span>    <span>return(
</span>      <span><span><span><form</span>></span>
</span><span>        <span><span><input</span>
</span></span><span>          <span>id<span>="GreatApeSearchBar-showExtantOnly"</span>
</span></span><span>          <span>type<span>="checkbox"</span>
</span></span><span>          <span>checked<span>={this.props.showExtantOnly}</span>
</span></span><span>          <span>onChange<span>={this.handleShowExtantOnlyChange}</span>
</span></span><span>        <span>/></span>
</span><span>
</span><span>        <span><span><label</span> htmlFor<span>="GreatApeSearchBar-showExtantOnly"</span>></span>Only show extant species<span><span></label</span>></span>
</span><span>      <span><span></form</span>></span>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

示されているように、Reactコンポーネントは非常にテスト可能です。あなたのコンポーネントのための良いユニットテストを書くことを忘れる言い訳はありません。

良いことは、JSXが個々のテストではなく、あなたに対抗するのではなく、あなたのために働くことです。 JSXを使用すると、ブール人、コールバック、または必要なものをすべて渡すことができます。ユニットテストに挑戦するときにこれを覚えておいてください。

浅いレンダラーテストユーティリティにより、適切なユニットテストに必要なものすべてが提供されます。 1レベルの深さのみをレンダリングし、単独でテストすることができます。ユニットテストを破る可能性のある階層のarbitrary意的な子供には関心がありません。

Jest Toolingを使用して、変更している特定のファイルのみでフィードバックを提供する方法が気に入っています。これにより、フィードバックループが短くなり、レーザーフォーカスが追加されます。いくつかの厳しい問題に取り組むとき、これがどれほど価値があるかをお待ちしております。

反応成分のテストに関するよくある質問（FAQ）

反応コンポーネントのテストのベストプラクティスは何ですか？

テスト対応コンポーネントのベストプラクティスには、一度に1つの機能を検証する小さな集中テストの作成が含まれます。これにより、問題を識別して修正しやすくなります。また、実装の詳細ではなく、コンポーネントの出力をテストすることが重要です。これは、コンポーネントがそれを達成する方法ではなく、ユーザーが見て対話するものをチェックすることを意味します。最後に、反応成分をテストするために特別に設計されたJestや酵素などのツールを使用します。テストをより効率的かつ効果的にすることができる「浅いレンダリング」などの有用な機能を提供します。そして、それは特に反応成分のテストに適しています。 JESTを使用するには、最初にNPMまたはYARNを使用してプロジェクトにインストールする必要があります。次に、JESTによって提供されるdescrib and IT関数を使用してテストを作成できます。 IT関数の内部では、特定の条件が満たされていると主張するために期待することができます。 JESTは、モック関数を作成するための模擬関数を提供します。これは、コンポーネントがアプリケーションの他の部分とどのように相互作用するかをテストするのに役立ちます。 > Enzymeは、コンポーネントのテストが容易になるReactのJavaScriptテストユーティリティです。これは、子コンポーネントなしでコンポーネント自体のみをレンダリングする「浅いレンダリング」など、さまざまな方法でコンポーネントをレンダリングする機能を提供します。これにより、テストをより速く、より集中させることができます。酵素は、ボタンをクリックするなどのユーザーインタラクションをシミュレートしたり、コンポーネントの出力を検査したりする機能を提供します。

Reactコンポーネントでユーザーインタラクションをテストするにはどうすればよいですか？ ​​

Reactコンポーネントのアクセシビリティを確保するには、セマンティックHTMLの使用、画像の代替テキストの提供、キーボードでコンポーネントを使用できるようにするなど、アクセス可能なWebデザインのベストプラクティスに従うことが含まれます。また、アクセシビリティをテストするためのJestプラグインであるJest-Axeなどのツールを使用して、一般的なアクセシビリティの問題についてコンポーネントを自動的に確認することもできます。さらに、スクリーンリーダーやその他の支援技術を使用してコンポーネントをテストして、それらが本当にアクセスできるようにすることが重要です。

反応コンポーネントのパフォーマンスをテストするにはどうすればよいですか？ Reactコンポーネントは、Reactプロファイラーを使用して実行できます。これは、Reactアプリケーションがレンダリングの頻度とレンダリングの「コスト」が何であるかを測定するツールです。これにより、あまりにも頻繁にレンダリングしているコンポーネントを特定したり、レンダリングに時間がかかりすぎたりすると、アプリケーションが遅くなる可能性があります。また、Chrome DevToolsパフォーマンスパネルなどのブラウザツールを使用して、ネットワークリクエストやJavaScriptの実行時間などの要因など、アプリケーションの全体的なパフォーマンスを測定することもできます。 >

酵素が提供するSetProps関数を使用して、異なる小道具で反応コンポーネントをテストできます。これにより、コンポーネントがレンダリングされた後にコンポーネントのプロップを変更し、正しく応答することを確認できます。たとえば、コンポーネントが異なるテキストの小道具が与えられたときに正しいテキストを表示するか、オプションの小道具を正しく処理することをテストする場合があります。さまざまなブラウザのReactコンポーネントのテストは、BrowserStackやソースラボなどのツールを使用して実行できます。これらのツールを使用すると、実際のデバイスで実際のブラウザでテストを実行できます。これにより、ブラウザ固有のバグをキャッチするのに役立ちます。また、自動化されたテストでは視覚的な問題や使いやすさの問題を見逃す可能性があるため、さまざまなブラウザーでコンポーネントを手動でテストすることも重要です。

さまざまな画面サイズで反応コンポーネントをテストするにはどうすればよいですか？

​​

ブラウザーの開発者ツールのレスポンシブデザインモードを使用して、異なる画面サイズの反応コンポーネントをテストできます。これにより、さまざまな画面サイズと解像度をシミュレートし、コンポーネントがそれらを正しく見ていることを確認できます。 BrowserstackやSauce Labsなどのツールを使用して、異なる画面サイズの実際のデバイスでテストを実行することもできます。さまざまなユーザーロールを持つコンポーネントには、さまざまなタイプのユーザーのアクションをシミュレートし、コンポーネントが正しく応答することを確認します。たとえば、特定の機能はログインしたユーザーのみが利用できるか、管理者ユーザーが通常のユーザーとは異なるインターフェイスを見ることができることをテストする場合があります。これは、酵素によって提供されるシミュレーション関数を使用し、テストをセットアップして異なるユーザーロールを使用することで実行できます。

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

JavaScript chrome html es6 npm chrome devtools yarn edge Boolean Object if for while checkbox include require catch Filter break using Interface Property Event function dom this background input github kind ui Other
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：Googleアナリティクスでeコマーストランザクションを追跡する方法次の記事：Googleアナリティクスでeコマーストランザクションを追跡する方法

関連記事

続きを見る