使用柏樹為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中文網其他相關文章！