使用柏树为React应用程序编写测试

端到端（E2E）测试可验证从头到尾的应用流量。连续集成（CI）不是手动测试，而是自动化此过程。编写代码，保存并让工具确保其不会破坏现有功能。赛普拉斯是一个强大的E2E测试框架，可简化此过程，特别是对于像React这样的现代JavaScript库。

设置测试应用程序

本教程使用示例待办器应用程序。克隆存储库以进行以下操作：

 git克隆[电子邮件保护]：sinsomicrote/cypress-react-tutorial.git

导航到目录并安装依赖项：

 CD柏树反应教程
纱线安装

安装柏树：

纱线添加柏树 -  dev

开放柏树：

 node_modules/.bin/Cypress打开

要更轻松地访问，请将此脚本添加到package.json ：

 “脚本”：{
  “柏树”：“柏树打开”
}

现在，运行yarn cypress以打开柏树。使用yarn start查看应用程序。

让我们在cypress/integration/init.spec.js中创建一个基本测试：

描述（'Cypress'，（）=> {
  它（'正在工作'，（）=> {
    期望（true）.to.equal（true）;
  }）;
}）;

这证实柏树正在起作用。现在，让我们测试访问该应用程序：

它（'访问app'，（）=> {
  cy.visit（'http：// localhost：3000'）;
}）;

为避免重复URL，请在cypress.json中设置一个基本URL。

 {
  “ baseurl”：“ http：// localhost：3000”
}

现在可以简化测试以：

它（'访问app'，（）=> {
  cy.visit（'/'）;
}）;

测试表单控件和输入

创建cypress/integration/form.spec.js来测试用户交互。

描述（'form'，（）=> {
  each（（）=> {
    cy.visit（'/'）;
  }）;

  它（'focus the Input'，（）=> {
    cy.focused（）。应该（'ham ham class'，'form-control'）;
  }）;

  它（'接受输入'，（）=> {
    const Input =“关于柏树”；
    cy.get（'。形式控制'）
      .Type（输入）
      。
  }）;

  it（'显示todos'，（）=> {
    cy.get（'li'）。应该（'have.length'，2）;
  }）;

  它（'添加一个新的todo'，（）=> {
    const Input =“关于柏树”；
    cy.get（'。形式控制'）
      .Type（输入）
      .type（'{enter}'）
      .get（'li'）
      。
  }）;

  它（'删除todo'，（）=> {
    cy.get（'li'）
      。第一的（）
      .find（'。btn-danger'）
      。点击（）
      .get（'li'）
      。
  }）;

  它（'删除所有todos'，（）=> {
    cy.get（'li'）
      。第一的（）
      .find（'。btn-danger'）
      。点击（）
      .get（'li'）
      。第一的（）
      .find（'。btn-danger'）
      。点击（）
      .get（'。否任务'）
      。
  }）;
}）;

这些测试涵盖了输入焦点，输入接受，初始todo计数，添加了新的todo，删除单个待办事项，并删除了所有Todos。

测试网络请求

测试网络请求确保数据获取正常工作。例如，使用JSON占位符API：

描述（'请求'，（）=> {
  它（'显示API的随机用户，（）=> {
    cy.request（'https://jsonplaceholder.typicode.com/users'）
      。
        期望（响应status）.e.eq（200）;
        期望（响应body）.have.length（10）;
        期望（响应）.have.property（'标题'）;
        期望（响应）。
      }）;
  }）;
}）;

这将验证API响应状态，数据长度和响应属性。

从命令行运行测试

从终端运行柏树测试：

 NPX柏树运行

进行特定的测试：

 npx柏树运行 - 规格“柏树/integration/form.spec.js”

这提供了测试结果的命令行摘要。有关更高级的命令行选项，请参阅柏树文档。

结论

赛普拉斯简化了E2E测试，使其对开发人员易于访问和有益。该教程展示了中间测试技术的基础，鼓励您进一步探索其功能。请记住要查阅柏树文档以获取更高级的功能和最佳实践。

以上是使用柏树为React应用程序编写测试的详细内容。更多信息请关注PHP中文网其他相关文章！