用鉤子構(gòu)建強(qiáng)大的反應(yīng)應(yīng)用需要嚴(yán)格的測(cè)試。本教程演示了如何使用酶和反應(yīng)測(cè)試庫(kù)有效測(cè)試鉤子，并利用待辦事項(xiàng)應(yīng)用程序示例。我們將介紹關(guān)鍵的測(cè)試方案和最佳實(shí)踐，以確保無(wú)錯(cuò)誤的代碼。

本指南熟悉開玩笑和反應(yīng)測(cè)試基本面。如果您不熟悉酶，請(qǐng)考慮在進(jìn)行之前與JEST在React應(yīng)用程序中的JEST集成。

測(cè)試方案

我們的待辦事項(xiàng)組件將在這些情況下進(jìn)行測(cè)試：

1. 組件渲染：驗(yàn)證組件成功渲染。
2. 初始待辦事項(xiàng)顯示：確認(rèn)初始待辦事項(xiàng)項(xiàng)目已正確顯示。
3. 添加一個(gè)新的工作：測(cè)試添加新項(xiàng)目的功能。
4. 刪除待辦事項(xiàng)：驗(yàn)證刪除待辦事項(xiàng)的能力。

這是待辦事項(xiàng)組件：

導(dǎo)入React，{usestate，useref}來(lái)自“ React”；

const todo =（）=> {
  const [todos，settodos] = usestate（[
    {id：1，項(xiàng)目：“ fix bugs”}，
    {id：2，項(xiàng)目：“取出垃圾”}
  ）;
  const todoref = useref（）;
  const removetodo = id => {
    settodos（todos.filter（todo => todo.id！== id））;
  };
  const addtodo = data => {
    令I(lǐng)D = todos.length 1;
    settodos（[[
      ... todos，
      {
        ID，
        項(xiàng)目：數(shù)據(jù)
      }
    ）;
  };
  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>添加todo</h2>
        </div>
      </div>

      <div classname="row"> {/ *校正的className to className */}
        <div classname="col-md-6"> {/ *校正的className to className */}
          <form onsubmit="{handleNewTodo}"> {/ *添加了表格標(biāo)簽 */}
            <input type="text" ref="{todoRef}" data-testid="input"> {/ *添加了數(shù)據(jù)測(cè)驗(yàn) */}
            <button type="submit" data-testid="add-button">添加任務(wù)</button>{/ *添加了數(shù)據(jù)測(cè)驗(yàn) */}
          </form>
        </div>
      </div>

      <div classname="row todo-list"> {/ *校正的className to className */}
        <div classname="col-md-6"> {/ *校正的className to className */}
          <h3>列表</h3>
          {！todos.length？ （（
            <div classname="no-task">沒(méi)有任務(wù)！</div>
          ）：（（
            <ul data-testid="todos"> {/ *添加了數(shù)據(jù)測(cè)驗(yàn) */}
              {todos.map（todo => {
                返回 （
                  <li key="{todo.id}"> {/ *更正的鑰匙值 */}
                    <div>
                      {todo.item}
                      <button data-testid="delete-button" onclick="{()"> removetodo（todo.id）}> x</button> {/ *添加了數(shù)據(jù)測(cè)驗(yàn)和onClick */}
                    </div>
                  </li>
                ）；
              }）}}
            </ul>
          ）
        </div>
      </div>
    </div>
  ）；
};

導(dǎo)出默認(rèn)todo;

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

用酶進(jìn)行測(cè)試

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

從“酶”進(jìn)口酶；
從“酶 - 適應(yīng)器反應(yīng)16”中進(jìn)口適配器；
emzyme.configure（{Adapter：new Adapter（）}）;

3. 測(cè)試（todo.test.js）：

從“反應(yīng)”中導(dǎo)入反應(yīng)；
從“酶”導(dǎo)入{淺，山}；
從“ ../ todo”導(dǎo)入todo;

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

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

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

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

用React測(cè)試庫(kù)進(jìn)行測(cè)試

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

從“反應(yīng)”中導(dǎo)入反應(yīng)；
從“@testing-library/react”中導(dǎo)入{渲染，fireevent，屏幕}；
從“ ../ todo”導(dǎo)入todo;
導(dǎo)入“@testing-library/jest-dom”；

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

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

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

請(qǐng)記住，根據(jù)需要調(diào)整項(xiàng)目結(jié)構(gòu)的文件路徑。此改進(jìn)的版本提供了更健壯和可維護(hù)的測(cè)試。使用data-testid使測(cè)試對(duì)組件結(jié)構(gòu)的變化更具彈性。

以上是測(cè)試用酶和反應(yīng)測(cè)試庫(kù)的反應(yīng)鉤子的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！