テストは、酵素と反応フックと反応テストライブラリとのフックをテストします

フックを使用した堅牢な反応アプリケーションの構築には、厳密なテストが必要です。このチュートリアルでは、酵素と反応テストライブラリを使用して反応フックを効果的にテストする方法を示しており、To Doアプリケーションの例を活用しています。主要なテストシナリオとベストプラクティスについては、バグのないコードを確保します。

このガイドは、JestおよびReact Testingの基礎に精通していることを想定しています。酵素が初めての場合は、先に進む前に、JESTアプリケーションでのJESTとの統合を確認することを検討してください。

テストシナリオ

To Doコンポーネントは、これらのシナリオに対してテストされます。

1. コンポーネントレンダリング：コンポーネントが正常にレンダリングされることを確認します。
2. 最初のTO DISPLAIN：最初のTo Doアイテムが正しく表示されていることを確認します。
3. 新しいTo Doの追加：新しいTo Doアイテムを追加する機能をテストします。
4. ToDoの削除： To Doアイテムを削除する機能を確認します。

これがTo Doコンポーネントコードです：

 「React」からReact、{UseState、useref}をインポートします。

const todo =（）=> {
  const [todos、setodos] = uesestate（[[
    {id：1、item： "fix bugs"}、
    {id：2、item： "Take the Trash"}
  ]）;
  const todoref = useref（）;
  const removetodo = id => {
    setodos（todos.filter（todo => todo.id！== id））;
  };
  const addtodo = data => {
    id = todos.length 1;
    setodos（[
      ...トドス、
      {
        ID、
        アイテム：データ
      }
    ]）;
  };
  const handlenewtodo = e => {
    E.PreventDefault（）;
    const item = todoref.current;
    addtodo（item.value）;
    item.value = "";
  };
  戻る （
    <div classname="container"> {/ * classname to className */}
      <div classname="row"> {/ * classname to className */}
        <div classname="col-md-6"> {/ * classname to className */}
          <h2 id="todoを追加します">todoを追加します</h2>
        </div>
      </div>

      <div classname="row"> {/ * classname to className */}
        <div classname="col-md-6"> {/ * classname to className */}
          <form onsubmit="{handleNewTodo}"> {/ *フォームタグを追加 */}
            <input type="text" ref="{todoRef}" data-testid="input"> {/ * dataTestid */}が追加されました
            <button type="submit" data-testid="add-button">タスクを追加</button>{/ * dataTestid */}を追加します
          </form>
        </div>
      </div>

      <div classname="row todo-list"> {/ * classname to className */}
        <div classname="col-md-6"> {/ * classname to className */}
          <h3 id="リスト">リスト</h3>
          {！todos.length？ （
            <div classname="no-task">タスクなし！</div>
          ）：（
            <ul data-testid="todos"> {/ * dataTestid */}が追加されました
              {todos.map（todo => {
                戻る （
                  <li key="{todo.id}"> {/ *修正されたキー値 */}
                    <div>
                      {todo.item}
                      <button data-testid="delete-button" onclick="{()"> Removetodo（todo.id）}> x</button> {/ * data-testidおよびonclick */}が追加されました
                    </div>
                  </li>
                ）;
              }）}
            </ul>
          ）}
        </div>
      </div>
    </div>
  ）;
};

エクスポートデフォルトTODO;

注： classname属性は、上記のコードのclassNameに修正されています。また、Reactテストライブラリを使用したテストを容易にするために、 data-testid属性が追加されています。

酵素でのテスト

1. インストール： npm install --save-dev enzyme enzyme-adapter-react-16
2. 酵素構成（SetUptests.js）：

 「酵素」から酵素をインポートします。
「Enzyme-Adapter-React-16」からアダプターをインポートします。
enzyme.configure（{adapter：new Adapter（）}）;

3. テスト（todo.test.js）：

 「React」からのImport React;
「酵素」から{shallow、mount}をインポートします。
"../todo"からtodoをインポートします。

説明（ "todo"、（）=> {
  それ（ "renders"、（）=> {
    浅い（<todo></todo> ）;
  }）;

  それ（ "初期のto-dos"を表示、（）=> {
    const wrapper = mount（<todo></todo> ）;
    想像（wrapper.find（ "li"））。tohavelengent（2）;
  }）;

  それ（ "新しいアイテムを追加する"、（）=> {
    const wrapper = mount（<todo></todo> ）;
    wrapper.find（ "input"）。instance（）。value = "故障したテストを修正";
    wrapper.find（ '[type = "submit"]'）。シミュレーション（ "submit"）; //クリックするのではなく、送信をシミュレートします
    expect（wrapper.find（ "li"））。tohavelengent（3）;
    expect（wrapper.find（ "li"）。last（）。text（））。tocontain（ "fix failing test"）; //改善されたアサーション
  }）;

  それ（「アイテムを削除する」、（）=> {
    const wrapper = mount（<todo></todo> ）;
    wrapper.find（ '[data-testid = "delete-button"]'）。first（）。simulate（ "click"）;
    想像（wrapper.find（ "li"））。tohavelengent（1）;
  }）;
}）;

Reactテストライブラリを使用したテスト

1. インストール： npm install --save-dev @testing-library/jest-dom @testing-library/react
2. テスト（todo.test.js）：

 「React」からのImport React;
「@testing-library/race」から{render、fireevent、screen}をインポートします。
"../todo"からtodoをインポートします。
"@testing-library/jest-dom"をインポートします。

説明（ "todo"、（）=> {
  それ（ "初期のto-dos"を表示、（）=> {
    与える（<todo></todo> ）;
    expect（screen.getBytestid（ "todos"）。children.length）.tobe（2）;
  }）;

  それ（ "新しいto-doを追加します"、（）=> {
    与える（<todo></todo> ）;
    fireevent.change（screen.getBytestid（ "入力"）、{ターゲット：{value： "new Task"}}）;
    fireevent.click（screen.getBytestid（ "add-button"））;
    expect（screen.getBytestid（ "todos"）。children.length）.tobe（3）;
  }）;

  それ（ "to-do"を削除 "、（）=> {
    与える（<todo></todo> ）;
    fireevent.click（screen.getallbytestid（ "delete-button"）[0]）;
    expect（screen.getBytestid（ "todos"）。children.length）.tobe（1）;
  }）;
}）;

プロジェクト構造に必要に応じて、ファイルパスを調整することを忘れないでください。この改良されたバージョンは、より堅牢で保守可能なテストを提供します。 data-testidを使用すると、テストはコンポーネントの構造の変化により回復力が高まります。

以上がテストは、酵素と反応フックと反応テストライブラリとのフックをテストしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。