端到端（E2E）測試可驗(yàn)證從頭到尾的應(yīng)用流量。連續(xù)集成（CI）不是手動測試，而是自動化此過程。編寫代碼，保存并讓工具確保其不會破壞現(xiàn)有功能。賽普拉斯是一個(gè)強(qiáng)大的E2E測試框架，可簡化此過程，特別是對于像React這樣的現(xiàn)代JavaScript庫。

設(shè)置測試應(yīng)用程序

本教程使用示例待辦器應(yīng)用程序。克隆存儲庫以進(jìn)行以下操作：

 git克隆[電子郵件保護(hù)]：sinsomicrote/cypress-react-tutorial.git

導(dǎo)航到目錄并安裝依賴項(xiàng)：

 CD柏樹反應(yīng)教程
紗線安裝

安裝柏樹：

紗線添加柏樹 -  dev

開放柏樹：

 node_modules/.bin/Cypress打開

要更輕松地訪問，請將此腳本添加到package.json ：

 “腳本”：{
  “柏樹”：“柏樹打開”
}

現(xiàn)在，運(yùn)行yarn cypress以打開柏樹。使用yarn start查看應(yīng)用程序。

讓我們在cypress/integration/init.spec.js中創(chuàng)建一個(gè)基本測試：

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

這證實(shí)柏樹正在起作用?，F(xiàn)在，讓我們測試訪問該應(yīng)用程序：

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

為避免重復(fù)URL，請?jiān)?code>cypress.json中設(shè)置一個(gè)基本URL。

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

現(xiàn)在可以簡化測試以：

它（'訪問app'，（）=> {
  cy.visit（'/'）;
}）;

測試表單控件和輸入

創(chuàng)建cypress/integration/form.spec.js來測試用戶交互。

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

  它（'focus the Input'，（）=> {
    cy.focused（）。應(yīng)該（'ham ham class'，'form-control'）;
  }）;

  它（'接受輸入'，（）=> {
    const Input =“關(guān)于柏樹”；
    cy.get（'。形式控制'）
      .Type（輸入）
      。
  }）;

  it（'顯示todos'，（）=> {
    cy.get（'li'）。應(yīng)該（'have.length'，2）;
  }）;

  它（'添加一個(gè)新的todo'，（）=> {
    const Input =“關(guān)于柏樹”；
    cy.get（'。形式控制'）
      .Type（輸入）
      .type（'{enter}'）
      .get（'li'）
      。
  }）;

  它（'刪除todo'，（）=> {
    cy.get（'li'）
      。第一的（）
      .find（'。btn-danger'）
      。點(diǎn)擊（）
      .get（'li'）
      。
  }）;

  它（'刪除所有todos'，（）=> {
    cy.get（'li'）
      。第一的（）
      .find（'。btn-danger'）
      。點(diǎn)擊（）
      .get（'li'）
      。第一的（）
      .find（'。btn-danger'）
      。點(diǎn)擊（）
      .get（'。否任務(wù)'）
      。
  }）;
}）;

這些測試涵蓋了輸入焦點(diǎn)，輸入接受，初始todo計(jì)數(shù)，添加了新的todo，刪除單個(gè)待辦事項(xiàng)，并刪除了所有Todos。

測試網(wǎng)絡(luò)請求

測試網(wǎng)絡(luò)請求確保數(shù)據(jù)獲取正常工作。例如，使用JSON占位符API：

描述（'請求'，（）=> {
  它（'顯示API的隨機(jī)用戶，（）=> {
    cy.request（'https://jsonplaceholder.typicode.com/users'）
      。
        期望（響應(yīng)status）.e.eq（200）;
        期望（響應(yīng)body）.have.length（10）;
        期望（響應(yīng)）.have.property（'標(biāo)題'）;
        期望（響應(yīng)）。
      }）;
  }）;
}）;

這將驗(yàn)證API響應(yīng)狀態(tài)，數(shù)據(jù)長度和響應(yīng)屬性。

從命令行運(yùn)行測試

從終端運(yùn)行柏樹測試：

 NPX柏樹運(yùn)行

進(jìn)行特定的測試：

 npx柏樹運(yùn)行 - 規(guī)格“柏樹/integration/form.spec.js”

這提供了測試結(jié)果的命令行摘要。有關(guān)更高級的命令行選項(xiàng)，請參閱柏樹文檔。

結(jié)論

賽普拉斯簡化了E2E測試，使其對開發(fā)人員易于訪問和有益。該教程展示了中間測試技術(shù)的基礎(chǔ)，鼓勵您進(jìn)一步探索其功能。請記住要查閱柏樹文檔以獲取更高級的功能和最佳實(shí)踐。

以上是使用柏樹為React應(yīng)用程序編寫測試的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！