測試用酶和反應測試庫的反應鉤子

用鉤子構建強大的反應應用需要嚴格的測試。本教程演示瞭如何使用酶和反應測試庫有效測試鉤子，並利用待辦事項應用程序示例。我們將介紹關鍵的測試方案和最佳實踐，以確保無錯誤的代碼。

本指南熟悉開玩笑和反應測試基本面。如果您不熟悉酶，請考慮在進行之前與JEST在React應用程序中的JEST集成。

測試方案

我們的待辦事項組件將在這些情況下進行測試：

1. 組件渲染：驗證組件成功渲染。
2. 初始待辦事項顯示：確認初始待辦事項項目已正確顯示。
3. 添加一個新的工作：測試添加新項目的功能。
4. 刪除待辦事項：驗證刪除待辦事項的能力。

這是待辦事項組件：

導入React，{usestate，useref}來自“ React”；

const todo =（）=> {
  const [todos，settodos] = usestate（[
    {id：1，項目：“ fix bugs”}，
    {id：2，項目：“取出垃圾”}
  ）;
  const todoref = useref（）;
  const removetodo = id => {
    settodos（todos.filter（todo => todo.id！== id））;
  };
  const addtodo = data => {
    令ID = todos.length 1;
    settodos（[[
      ... todos，
      {
        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"> {/ *添加了數據測驗 */}
            <button type="submit" data-testid="add-button">添加任務</button>{/ *添加了數據測驗 */}
          </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"> {/ *添加了數據測驗 */}
              {todos.map（todo => {
                返回 （
                  <li key="{todo.id}"> {/ *更正的鑰匙值 */}
                    <div>
                      {todo.item}
                      <button data-testid="delete-button" onclick="{()"> removetodo（todo.id）}> x</button> {/ *添加了數據測驗和onClick */}
                    </div>
                  </li>
                ）；
              }）}}
            </ul>
          ）
        </div>
      </div>
    </div>
  ）；
};

導出默認todo;

注意： classname屬性已糾正到上述代碼中的className 。同樣，已經添加了data-testid屬性，以便使用React測試庫更容易測試。

用酶進行測試

1. 安裝： npm install --save-dev enzyme enzyme-adapter-react-16
2. 酶配置（setUptests.js）：

從“酶”進口酶；
從“酶 - 適應器反應16”中進口適配器；
emzyme.configure（{Adapter：new Adapter（）}）;

3. 測試（todo.test.js）：

從“反應”中導入反應；
從“酶”導入{淺，山}；
從“ ../ todo”導入todo;

描述（“ todo”，（）=> {
  它（“ renders”，（）=> {
    淺的（<todo></todo> ）；
  }）;

  它（“顯示初始待辦事項”，（）=> {
    const包裝器=安裝（<todo></todo> ）；
    期待（wrapper.find（“ li”））。
  }）;

  它（“添加一個新項目”，（）=> {
    const包裝器=安裝（<todo></todo> ）；
    wrapper.find（“ input”）。 instance（）。 value =“修復失敗測試”;
    wrapper.find（'[type =“ submit”]'）。仿真（“ submit”）; //模擬提交，而不是點擊
    期待（wrapper.find（“ li”））。
    期待（wrapper.find（“ li”）。last（）。text（）。tocontain（“修復失敗的測試”）; //改善斷言
  }）;

  它（“刪除項目”，（）=> {
    const包裝器=安裝（<todo></todo> ）；
    wrapper.find（'[data-testid =“ delete-button”]'）。 first（）。仿真（“ click”）;
    期待（wrapper.find（“ li”））。
  }）;
}）;

用React測試庫進行測試

1. 安裝： npm install --save-dev @testing-library/jest-dom @testing-library/react
2. 測試（todo.test.js）：

從“反應”中導入反應；
從“@testing-library/react”中導入{渲染，fireevent，屏幕}；
從“ ../ todo”導入todo;
導入“@testing-library/jest-dom”；

描述（“ todo”，（）=> {
  它（“顯示初始待辦事項”，（）=> {
    使成為（<todo></todo> ）；
    期望（screet.getByTestId（“ todos”）。兒童。lengtth）.tobe（2）;
  }）;

  （“添加一個新的to-do”，（）=> {
    使成為（<todo></todo> ）；
    fireevent.change（screen.getByTestId（“ input”），{target：{value：“ new Task”}）;
    fireevent.click（screen.getByTestId（“ add-button”））;
    期待（screet.getByTestId（“ todos”）。兒童。長度）.tobe（3）;
  }）;

  它（“刪除to-do”，（）=> {
    使成為（<todo></todo> ）；
    fireevent.click（screet.getAllByTestId（“ delete-button”）[0]）;
    期待（screet.getByTestId（“ todos”）。兒童。
  }）;
}）;

請記住，根據需要調整項目結構的文件路徑。此改進的版本提供了更健壯和可維護的測試。使用data-testid使測試對組件結構的變化更具彈性。

以上是測試用酶和反應測試庫的反應鉤子的詳細內容。更多資訊請關注PHP中文網其他相關文章！