测试用酶和反应测试库的反应钩子

用钩子构建强大的反应应用需要严格的测试。本教程演示了如何使用酶和反应测试库有效测试钩子，并利用待办事项应用程序示例。我们将介绍关键的测试方案和最佳实践，以确保无错误的代码。

本指南熟悉开玩笑和反应测试基本面。如果您不熟悉酶，请考虑在进行之前与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中文网其他相关文章！