React Testingライブラリを開始します

あなたは疑問に思っているかもしれません：別のReactテストライブラリ？ CSS-Tricks（実際、私はJestとEnzymeに関する記事を投稿しました）でカバーされていますが、十分な選択肢がありませんか？

ただし、React-Testing-Libraryは、単なる別のテストライブラリ以上のものです。はい、これはテストライブラリですが、基本原則に基づいて構築されており、他のテストライブラリとは異なります。

テストがソフトウェアの使用方法をシミュレートするほど、自信が高まります。

ユーザーがアプリの使用方法をテストしようとします。実際、コンポーネントをリファクタリングしても、テストが壊れないように実装されています。私たちは、私たちの反応の旅のある時点でこれを起こしたことを知っています。

私たちは、React-Testing-Libraryを使用して構築した簡単なTo Doアプリケーションのテストを書くのに時間を費やします。リポジトリをローカルにクローンできます。

 git clone https://github.com/kinsomicrote/todoapp-test.git

これを行う場合は、必要なパッケージをインストールします。

 ## Yarn
Yarn add  - デフの反応テスト式 - ライブラリーjest-dom

## npm
npmインストール -  save-dev react-testing-library jest-dom

Jestがここにある理由を知りたい場合は、アサーションに使用します。 srcディレクトリに__test__という名前のフォルダーを作成し、 App.test.jsという名前の新しいファイルを作成します。

スナップショットを取ります

スナップショットテストは、変更間の違いを視覚的に表示する方法として、テスト済みコンポーネントで実行されたレコードテストを実行します。

このテストを最初に実行するとき、コンポーネントの外観の最初のスナップショットを取ります。したがって、最初のテストは間違いなく合格します。なぜなら、何かが失敗することを示すためにそれと比較する他のスナップショットはないからです。新しい要素、クラス、コンポーネント、またはテキストを追加することにより、コンポーネントに新しい変更を加える場合にのみ失敗します。スナップショットが作成されたとき、または最後の更新が最後に更新されたときに存在しなかったコンテンツを追加します。

スナップショットテストは、ここで書いた最初のテストです。 App.test.jsファイルを開いて、次のようにしましょう。

 「React」からのImport React;
「React-Testing-Library」から{render、cleanup}をインポートします。
「jest-dom/extend-expect」をインポートします。
'./App'からアプリをインポートします。

後に（クリーンアップ）;

it（ "Snapshot"、（）=> {
  const {asfragment} = render（<app></app> ）;
  （asfragment（））。tomatchsnapshot（）;
}）;

これにより、テストの書き込みと実行に使用する必要なパッケージがインポートされます。 renderは、テストするコンポーネントを表示するために使用されます。 cleanupを使用して、各テストのafterEach(cleanup)後にコンテンツをクリアします。

asFragmentを使用して、レンダリングコンポーネントのDocumentFragmentを取得します。次に、作成されたスナップショットに一致すると予想されます。

何が起こるかを確認するためにテストを実行しましょう：

 ## Yarn
糸検査

## npm
NPMテスト

私たちが知っているように、これが最初のテストである場合、コンポーネントスナップショットは、 __tests__ディレクトリ内の__snapshots__という名前の新しいフォルダーに作成されます。実際には、 App.test.js.snapというファイルを取得します。これは次のようになります。

 // Jest Snapshot V1、https：//goo.gl/fbaqlp

エクスポート[`スナップショット1`] =`
<documentfragment><div>
    <div>
      <div>
        <h2>
          todoを追加します
        </h2>
      </div>
    </div>

      <div>
        <div>
          </div>
      </div>
      <div>
        <div>

            タスクを追加します

        </div>
      </div>

    <div>
      <div>
        <h3>
          リスト
        </h3>
        <ul data-test="">
<li>
            <div>
              牛乳を買う

                x

            </div>
          </li>
          <li>
            <div>
              チュートリアルを書く

                x

            </div>
          </li>
        </ul>
</div>
    </div>
  </div>
</documentfragment>
`;

次に、DOM要素とイベントをテストしましょう

アプリケーションには、アプリケーションが最初に実行されたときにデフォルトで表示される2つのTO-DOアイテムが含まれています。最初のアプリケーションが実行されたときにそれらが表示されることを確認したいので、これをテストするには、順序付けられていないリストを見つける必要があります（<ul></ul> ）そして長さを確認します。長さは2に等しいと予想されます - アイテムの数。

それ（ 'デフォルトのtodoアイテムが表示されます'、（）=> {
  const {getbytestid} = render（<app></app> ）;
  const todolist = getbytestid（ 'todos-ul'）;
  期待（todolist.children.length）.tobe（2）;  
}）;

このコードスニペットでgetByTestId使用して、 AppコンポーネントからテストIDを抽出します。次に、 todoListを設定してtodos-ul要素を見つけます。これは2を返すはずです。

これまでに学んだことを使用して、ユーザーが入力フィールドに値を入力できると主張するテストを作成できるかどうかを確認してください。ここにあなたがする必要がある行動は次のとおりです。

• 入力フィールドを取得します
• 入力フィールドの値を設定します
• 変更イベントをトリガーします
• 入力フィールドの値は、ステップ2で設定した値と同じであると主張します

以下の私の答えを覗き見しないでください！できるだけ多くの時間を費やしてください。

まだ続いていますか？素晴らしい！コーヒーを飲みに行き、すぐに戻ってきます。

まあ、コーヒー。 ☕☕️

ああ、あなたは終わった！あなたは素晴らしいです。答えを比較しましょう。私のものは次のようになります：

それ（ '入力を許可します'、（）=> {
  const {getbytestid、fireevent} = render（<app></app> ）;
  let item = 'Learn React';
  const todoinputelement = getbytestid（ 'todo-input'）;
  todoinputelement.value = item;
  fireevent.change（todoinputelement）;
  expect（todoinputelement.value）.tobe（ 'real react'）;
}）;

getByTestIdを使用して、アプリケーションでテストIDを抽出することができました。次に、変数を作成し、文字列「Rearn React」に設定し、入力フィールドの値にします。次に、テストIDを使用して入力フィールドを取得し、入力フィールドの値を設定した後に変更イベントをトリガーします。これを行った後、入力フィールドの値は実際に「反応を学ぶ」ことができると断言します。

これはあなたの答えと一致していますか？他の方法がある場合は、コメントを残してください！

次に、新しいTo Doアイテムを追加できるかどうかをテストしましょう。入力フィールド、新しいプロジェクトを追加するボタン、および順序付けられていないリストを取得する必要があります。これらは、新しいプロジェクトを作成するために必要なすべての要素であるためです。

入力フィールドの値を設定し、[ボタン]クリックをトリガーしてタスクを追加します。 getByText使用してボタンを取得することでこれを行うことができます。テキスト「追加タスク」でDOM要素のクリックイベントをトリガーすることにより、新しいTo Doアイテムを追加できるはずです。

順序付けられていないリスト要素の子要素の数（リスト項目）の数は3に等しいと主張しましょう。これは、デフォルトのタスクがまだ無傷であることを前提としています。

それ（ '新しいtodoアイテムを追加します'、（）=> {
  const {getByText、getByTestid、fireevent} = render（<app></app> ）;
  const todoinputelement = getbytestid（ 'todo-input'）;
  const todolist = getbytestid（ 'todos-ul'）;
  todoinputelement.value = '学習React';
  fireevent.change（todoinputelement）;
  fireevent.click（getByText（ 'add task'））;
  期待（todolist.children.length）.tobe（3）; 
}）;

とても良いですよね？

これは、Reactでテストする1つの方法にすぎません

次のReactアプリケーションでReact-Testing-Libraryを試すことができます。倉庫のドキュメントは非常に詳細であり、ほとんどのツールと同様に、開始するのに最適な場所です。 Kent C. Doddsはそれを構築し、Frontend Mastersでのテストに関するフルコース（サブスクリプションが必要）があります。

つまり、これはReactのテストリソースにすぎません。もちろん、他のリソースはありますが、今ではいくつかのコンテンツを見て、試してみることに興味があることを願っています。もちろん、プロジェクトに最適なリソースも使用する必要があります。

以上がReact Testingライブラリを開始しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。