Reactで構(gòu)築されたようなインタラクティブなWebサイトの場(chǎng)合、統(tǒng)合テストは自然な選択です。エンドツーエンドテストの追加オーバーヘッドなしで、ユーザーがアプリケーションと対話(huà)する方法を検証します。

この記事では、単純なWebサイトから始まり、単體テストと統(tǒng)合テストを使用して動(dòng)作を検証するエクササイズで説明し、統(tǒng)合テストがコード行の少ない価値をより大きく達(dá)成する方法を示します。この記事では、ReactとJavaScriptでのテストに精通していると想定しています。 JestおよびReact Testingライブラリに精通することは役立ちますが、必要ありません。

テストには3つのタイプがあります。

• ユニットテストは、コードの一部を獨(dú)立して検証します。彼らは簡(jiǎn)単に書(shū)くことができますが、全體像を無(wú)視するかもしれません。
• エンドツーエンドテスト（E2E）サイプレスやセレンなどの自動(dòng)フレームワークを使用して、ユーザーなどのWebサイトと対話(huà)します。ページのロード、フォームの記入、ボタンのクリックなど。それらは通常、ゆっくりと書(shū)かれて実行されますが、実際のユーザーエクスペリエンスに非常に近いです。
• 統(tǒng)合テストはその間のどこかにあります。アプリケーションの複數(shù)のユニットがどのように連攜するかを確認(rèn)しますが、E2Eテストよりも軽いです。たとえば、Jestには、統(tǒng)合テストを容易にするためのいくつかの組み込みユーティリティが付屬しています。 Jestは、バックグラウンドでJSDOMを使用して、自動(dòng)化よりもオーバーヘッドが少ない一般的なブラウザAPIをシミュレートし、その強(qiáng)力なモッキングツールは外部API呼び出しをシミュレートできます。

別の注意事項(xiàng)：Reactアプリケーションでは、単體テストと統(tǒng)合テストが同じ方法で記述され、ツールが使用されます。

反応テストを開(kāi)始します

ログインフォームを使用して、Simple Reactアプリケーション（GitHubで利用可能）を作成しました。私はそれをreqres.inに接続します。これは、フロントエンドプロジェクトのテストに使用することがわかった便利なAPIです。

正常にログインできます。

...またはAPIからのエラーメッセージが発生します。

コード構(gòu)造は次のとおりです。

 <code>LoginModule/ ├── components/ │ ├── Login.js // 渲染LoginForm、錯(cuò)誤消息和登錄確認(rèn)│ └── LoginForm.js // 渲染登錄表單字段和按鈕├── hooks/ │ └── useLogin.js // 連接到API 并管理狀態(tài)└── index.js // 將所有內(nèi)容整合在一起</code>

オプション1：ユニットテスト

私のようなテストを書(shū)くのが好きなら（ヘッドフォンを著て、Spotifyで素?cái)长室魳Sを演奏することもあれば、各ファイルの単位テストを書(shū)くことに抵抗できないかもしれません。

テスト愛(ài)好家でなくても、明確な戦略なしで「テストの良い仕事をしようとする」プロジェクトに取り組んでいる可能性があり、テスト方法は「すべてのファイルに獨(dú)自のテストが必要だと思いますか？」

これは次のように見(jiàn)えます（明確にするためにテストファイル名にユニットを追加しました）：

 <code>LoginModule/ ├── components/ │  ├── Login.js │  ├── Login.unit.test.js │  ├── LoginForm.js │  └── LoginForm.unit.test.js ├── hooks/ │  ├── useLogin.js │  └── useLogin.unit.test.js ├── index.js └── index.unit.test.js</code>

GitHubでエクササイズを完了してこれらすべてのユニットテストを追加し、テストを作成しました：カバレッジ：カバレッジレポートを生成するユニットスクリプト（JESTの組み込み機(jī)能）。 4つのユニットテストファイルを使用して、100％のカバレッジを達(dá)成できます。

通常、100％のカバレッジは圧倒的ですが、このような単純なコードベースでは可能です。

Onlogin Reactフック用に作成された単體テストの1つを掘り下げましょう。 Reactフックやテスト方法に慣れていない場(chǎng)合は、心配しないでください。

テスト（ '成功したログインフロー'、async（）=> {
 //成功したAPI応答Jestをシミュレートします
  .spyon（window、 'fetch'）
  .MOCKRESOLVEDVALUE（{json：（）=>（{token： '123'}）}）;

 const {result、waitfornextupdate} = renderhook（（）=> uselogin（））;

 act（（）=> {
  result.current.Onsubmit（{
   電子メール： '[電子メール保護(hù)]'、
   パスワード：「パスワード」、
  }）;
 }）;

 //ステータスを保留中に設(shè)定します
 expect（result.current.state）.toequal（{
  ステータス：「保留中」、
  ユーザー：null、
  エラー：null、
 }）;

 waitfornextupdate（）を待ちます。

 //ステータスを解決に設(shè)定してメールアドレスを保存します
  ステータス：「解決済み」、
  ユーザー：{
   電子メール： '[電子メール保護(hù)]'、
  }、
  エラー：null、
 }）;
}）;

このテストは、React Hooks Testing Libraryがテストフックを簡(jiǎn)単にするため）に書(shū)くのが興味深いですが、いくつかの問(wèn)題があります。

まず、テスト検証內(nèi)部狀態(tài)は「保留中」から「解決」に変更されます。この実裝の詳細(xì)はユーザーにさらされていないため、テストするのは良いことではないかもしれません。アプリケーションをリファクタリングする場(chǎng)合、ユーザーの観點(diǎn)から何も変わらなくても、このテストを更新する必要があります。

また、単體テストとして、これはその一部にすぎません。送信ボタンテキストを「読み込み」に変更するなど、ログインプロセスの他の機(jī)能を確認(rèn)する場(chǎng)合は、別のテストファイルで実行する必要があります。

オプション2：統(tǒng)合テスト

このプロセスを検証するために、統(tǒng)合テストに代わるものを追加することを考えてみましょう。

 <code>LoginModule/ ├── components/ │  ├── Login.js │  └── LoginForm.js ├── hooks/ │  └── useLogin.js ├── index.js └── index.integration.test.js</code>

このテストとテスト：カバレッジ：統(tǒng)合スクリプトを?qū)g裝して、カバレッジレポートを生成しました。ユニットテストと同様に、100％のカバレッジに達(dá)することができますが、今回はすべて1つのファイルにあり、コードの行が少なくなります。

成功したログインプロセスをカバーする統(tǒng)合テストは次のとおりです。

 test（ '成功ログイン'、async（）=> {
  冗談
    .spyon（window、 'fetch'）
    .MOCKRESOLVEDVALUE（{json：（）=>（{token： '123'}）}）;

  與える（<loginmodule></loginmodule> ）;

  const emailfield = screen.getByrole（ 'textbox'、{name： 'email'}）;
  const passwordfield = screen.getByLabelText（ 'password'）;
  const button = screen.getByrole（ 'Button'）;

  // fireevent.change（emailfield、{target：{value： '[email protected]'}}）;
  fireevent.change（passwordfield、{target：{value： 'password'}}）;
  fireevent.click（ボタン）;

  // Load State expect（button）.tobedisabled（）を設(shè)定します。
  expect（button）.tohaveTextContent（ 'Loading ...'）;

  待機(jī)中（（）=> {
    // form element expect（button）.not.tobeinthedocument（）;
    expect（emailfield）.not.tobeinthedocument（）;
    expect（passwordfield）.not.tobeinthedocument（）;

    //成功テキストとメールアドレスconst loggedintext = screen.getByText（ 'ログインas'）;
    expect（loggedintext）.tobeinthedocument（）;
    const emailaddresstext = screen.getByText（ '[電子メール保護(hù)]'）;
    expect（emailaddresstext）.tobeinthedocument（）;
  }）;
}）;

このテストは、ユーザーの観點(diǎn)からログインプロセス全體を検証するため、フォーム、ロードステータス、および成功した確認(rèn)メッセージを検証するため、私は本當(dāng)に気に入っています。統(tǒng)合テストは、正確にはこのユースケースのために、Reactアプリケーションに最適です。ユーザーエクスペリエンスは私たちがテストしたいものであり、これにはほとんどの場(chǎng)合、一緒に動(dòng)作するコードの複數(shù)の異なるスニペットが含まれます。

このテストは、予想される動(dòng)作を機(jī)能させるコンポーネントまたはフックを理解していません。これは素晴らしいことです。ユーザーエクスペリエンスが同じままである限り、テストを破ることなく、これらの実裝の詳細(xì)を書(shū)き換えてリファクタリングすることができます。

エラー処理のためにログインプロセスの初期狀態(tài)やその他の統(tǒng)合テストを掘り下げることはありませんが、GitHubで表示することをお?jiǎng)幛幛筏蓼埂?/p>

それで、単體テストに何が必要ですか？

ユニットテストと統(tǒng)合テストを検討するのではなく、一歩後退して、そもそもテストする必要があるものをどのように決定するかを考えてみましょう。 LoginModuleは、ユーザー（アプリケーションの他のファイル）に自信を持って使用できるようにしたいエンティティであるため、テストする必要があります。

一方、LoginModuleの実裝の詳細(xì)だけであるため、Onloginフックをテストする必要はありません。ただし、要件が変更され、Onloginが他の場(chǎng)所に使用ケースがある場(chǎng)合は、獨(dú)自の（ユニット）テストを追加して、その機(jī)能を再利用可能なユーティリティとして検証する必要があります。 （ファイルもログインモジュールに固有ではないため、ファイルを移動(dòng)する必要があります。）

単體テストには、再利用可能なセレクター、フック、通常の機(jī)能を検証する必要性など、まだ多くのユースケースがあります。コードを開(kāi)発するときは、後で統(tǒng)合テストにそのロジックを移動(dòng)しても、単體テスト駆動(dòng)型開(kāi)発を使用することも役立つ場(chǎng)合があります。

さらに、ユニットテストは、複數(shù)の入力とユースケースの徹底的なテストの素晴らしい仕事をします。たとえば、私のフォームがさまざまなシナリオのインライン検証を表示する必要がある場(chǎng)合（たとえば、無(wú)効な電子メール、パスワードが欠けている、パスワードが短すぎる）、統(tǒng)合テストで代表的なケースをカバーし、単體テストで特定のケースを掘り下げます。

その他の利點(diǎn)

私たちがここにいるので、統(tǒng)合テストを明確で整然と保つのに役立ついくつかの構(gòu)文のヒントについてお話(huà)したいと思います。

ブロックをクリアします

私たちのテストでは、荷重狀態(tài)とログインモジュールの成功狀態(tài)の間の遅延を考慮する必要があります。

 const button = screen.getByrole（ 'Button'）;
fireevent.click（ボタン）;

expect（button）.not.tobeinthedocument（）; //速すぎると、ボタンはまだそこにあります！

DOMテストライブラリのWaitfor Helper機(jī)能を使用してこれを行うことができます。

 const button = screen.getByrole（ 'Button'）;
fireevent.click（ボタン）;

待機(jī)中（（）=> {
 expect（button）.not.tobeinthedocument（）; //ああ、それははるかに優(yōu)れています}）;

しかし、他のプロジェクトをテストしたい場(chǎng)合はどうなりますか？これをどのように処理するかについてインターネット上には多くの良い例はありません。過(guò)去のプロジェクトでは、他のプロジェクトをWaitfor以外に置きました。

 //待機(jī)ボタンを待ってくださいwaitfor（（）=> {
 expect（button）.not.tobeinthedocument（）;
}）;

//次に、確認(rèn)メッセージconst confirmentationtext = getByText（ '[電子メール保護(hù)]'）;
expect（cusmentationtext）.tobeinthedocument（）;

これは機(jī)能しますが、これらのステートメントの順序を簡(jiǎn)単に切り替えることができても、ボタン狀態(tài)を特別に見(jiàn)せるため、私はそれが好きではありません。

 //確認(rèn)メッセージが待機(jī)するのを待ってくださいwaitfor（（）=> {
 const cundimationText = getByText（ '[電子メール保護(hù)]'）としてログインします '）;
 expect（cusmentationtext）.tobeinthedocument（）;
}）;

// [ボタン] [ボタン）.not.tobeinthedocument（）をテストします。

同じアップデートに関連するすべてをWaitfor Callbackにグループ化する方がはるかに良いように思えます。

待機(jī)中（（）=> {
 expect（button）.not.tobeinthedocument（）;

 const cundimationText = screen.getByText（ '[電子メール保護(hù)]'）としてログインします '）;
 expect（cusmentationtext）.tobeinthedocument（）;
}）;

私はこのような単純な主張のためのこの手法が本當(dāng)に好きですが、場(chǎng)合によってはテストを遅くすることができ、Waitforのすぐ外で発生する失敗を待っています。この例については、React Testing Libraryの共通エラーの「コールバックの1回の待機(jī)中の複數(shù)のアサーション」を參照してください。

いくつかのステップを含むテストの場(chǎng)合、複數(shù)の待機(jī)を連続して使用できます。

 const button = screen.getByrole（ 'Button'）;
const emailfield = screen.getByrole（ 'textbox'、{name： 'email'}）;

// fireevent.change（emailfield、{target：{value： '[email protected]'}}）のフォームに記入します。

待機(jī)中（（）=> {
 //ボタンが有効になっているかどうかを確認(rèn)する（ボタン）.not.tobedisabled（）;
  expect（button）.tohavetextcontent（ 'submit'）;
}）;

// fireevent.click（button）;

待機(jī)中（（）=> {
 //ボタンが存在しなくなったかどうかを確認(rèn)します（ボタン）.not.tobeinthedocument（）;
}）;

アイテムが1つだけ表示されるのを待っている場(chǎng)合は、代わりにFindByクエリを使用できます。バックグラウンドでWaitforを使用します。

インラインITコメント

別のテストベストプラクティスは、より少ない、より長(zhǎng)いテストを書(shū)くことです。これにより、テストケースを重要なユーザープロセスと相関させることができ、予期しない動(dòng)作を避けるためにテストを隔離し続けることができます。私はこのアプローチに同意しますが、コードを整理し、必要な動(dòng)作を文書(shū)化することに課題をもたらす可能性があります。將來(lái)の開(kāi)発者がテストに戻り、それが何をしているのか、なぜ失敗するのかを理解できるようにする必要があります。

たとえば、これらの期待の1つが失敗し始めたとします。

それ（ '成功したログインフローを処理します'、async（）=> {
 //明確にするためにテストの開(kāi)始を非表示にします?
  （ボタン）.tobedisabled（）;
  expect（button）.tohaveTextContent（ 'Loading ...'）;
?
 待機(jī)中（（）=> {
  expect（button）.not.tobeinthedocument（）;
  expect（emailfield）.not.tobeinthedocument（）;
  expect（passwordfield）.not.tobeinthedocument（）;
?
  const cundimationText = screen.getByText（ '[電子メール保護(hù)]'）としてログインします '）;
  expect（cusmentationtext）.tobeinthedocument（）;
 }）;
}）;

このコンテンツを見(jiàn)る開(kāi)発者は、テストされているものを簡(jiǎn)単に判斷できず、障害がバグ（コードを修正する必要があることを意味する）か、動(dòng)作の変更（テストを修正する必要があることを意味します）であるかどうかを判斷するのが難しい場(chǎng)合があります。

私のお?dú)荬巳毪辘违渐辚濠`ションは、テストごとにあまり知られていないテスト構(gòu)文を使用し、テストされている各重要な動(dòng)作を説明するインラインスタイルのコメントを追加することです。

 test（ '成功ログイン'、async（）=> {
 //明確にするためにテストの開(kāi)始を非表示にします?
 //ロードステータスexpect（button）.tobedisabled（）を設(shè)定します。
  expect（button）.tohaveTextContent（ 'Loading ...'）;
?
 待機(jī)中（（）=> {
  // form element expect（button）.not.tobeinthedocument（）;
  expect（emailfield）.not.tobeinthedocument（）;
  expect（passwordfield）.not.tobeinthedocument（）;
?
  //成功テキストと電子メールアドレスconst confirmentationtext = screen.getByText（ '[電子メール保護(hù)]'）;
  expect（cusmentationtext）.tobeinthedocument（）;
 }）;
}）;

これらのコメントは魔法のようにJESTと統(tǒng)合されていないため、障害が発生した場(chǎng)合、テスト名の失敗はテストタグに渡されたパラメーター、この場(chǎng)合は「ログインの成功」に対応します。ただし、Jestのエラーメッセージには周?chē)欷违畅`ドが含まれているため、これらのITコメントは依然として失敗した動(dòng)作を識(shí)別するのに役立ちます。期待から削除しないと、次のエラーメッセージが表示されます。

より明示的なエラーを取得するために、各期待のエラーメッセージを定義できるJest-Expect-Messageというパッケージがあります。

想像（ボタン、 'ボタンはまだドキュメントにあります'）。

一部の開(kāi)発者はこのアプローチを好みますが、ほとんどの場(chǎng)合、私はそれが少しきめになりすぎていると思います。単一は通常、複數(shù)の期待を伴うためです。

チームの次のステップ

時(shí)々、私たちは人間のためにリナールールを作ることができたらいいのにと思います。もしそうなら、私たちはチームに優(yōu)先統(tǒng)合テストルールを設(shè)定することができ、それは終わります。

しかし、殘念ながら、以前に紹介したログインモジュールの例など、場(chǎng)合によっては開(kāi)発者が統(tǒng)合テストを選択することを奨勵(lì)するために、より類(lèi)似したソリューションを見(jiàn)つける必要があります。ほとんどのことと同様に、それはあなたのテスト戦略について議論し、プロジェクトにとって何が理にかなっていることに同意し、そしてそれをADRで説明するチームに帰著します。

テスト計(jì)畫(huà)を開(kāi)発するときは、開(kāi)発者が各ファイルのテストを作成するように強(qiáng)制する文化を避ける必要があります。開(kāi)発者は、「アンダーテスト」を心配することなく、情報(bào)に基づいたテストの決定を自信を持って行うことができる必要があります。 Jestのカバレッジレポートは、テストが統(tǒng)合レベルでマージされたとしても、正気チェックを提供することにより、この問(wèn)題を解決するのに役立ちます。

私はまだ自分自身を統(tǒng)合テストの専門(mén)家とは考えていませんが、この演習(xí)を行うと、統(tǒng)合テストがユニットテストよりも価値がある場(chǎng)合のユースケースを分解するのに役立ちました。これをチームと共有するか、コードベースで同様のエクササイズを行うことで、統(tǒng)合テストをワークフローに組み込むことができれば幸いです。

以上が反応統(tǒng)合テスト：カバレッジが増え、テストが少なくなりますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。