Cypress是一種基於瀏覽器的應(yīng)用程序的強(qiáng)大自動(dòng)測(cè)試跑者，現(xiàn)在支持組件測(cè)試。本文探討了將柏樹組件測(cè)試集成到大規(guī)模VUE應(yīng)用程序中，突出了最佳實(shí)踐並應(yīng)對(duì)共同的挑戰(zhàn)。我們的團(tuán)隊(duì)以前使用了Jest和Vue測(cè)試液體，以基於瀏覽器的測(cè)試環(huán)境過渡到賽普拉斯，並與現(xiàn)有的端到端測(cè)試無縫集成。

注意：本文反映了柏樹8功能。期望將來的更新中的潛在變化。

組件測(cè)試結(jié)構(gòu)：一個(gè)實(shí)際示例

考慮具有標(biāo)題，正文和確認(rèn)按鈕的“隱私政策”組件。單擊按鈕發(fā)出“確認(rèn)”事件。柏樹組件測(cè)試可能看起來像這樣：

從'@cypress/vue'導(dǎo)入{mount};
從'./privacypolicynotice.vue'導(dǎo)入privacypolicynotice';

描述（'PrivacyPolicyNotice'，（）=> {
  它（'渲染標(biāo)題'，（）=> {
    坐騎（PrivacyPolicyNotice）；
    Cy.Contains（'H1'，“隱私政策”）。應(yīng)該（“ Be.visible”）；
  }）;

  它（'在按鈕上發(fā)出“確認(rèn)”事件，請(qǐng)單擊'，（）=> {
    坐騎（PrivacyPolicyNotice）；
    cy.contains（'button''，'/^ok/'）
      。點(diǎn)擊（）
      .vue（）
      。然後（（包裝）=> {
        期待（wrapper.emitter（'escrence'））。to.have.length（1）;
      }）;
  }）;
}）;

此測(cè)試將驗(yàn)證用戶界面（UI）元素和開發(fā)人員界面（API）事件，隱式測(cè)試組件結(jié)構(gòu)和可訪問性。例如，將按鈕交換為DIV將立即突出可訪問性問題。

測(cè)試策略：分層方法

我們的測(cè)試策略區(qū)分：

• 單元測(cè)試：驗(yàn)證個(gè)人功能行為。
• 組件測(cè)試：隔離UI組件，檢查用戶和開發(fā)人員交互。
• 端到端測(cè)試：從用戶的角度測(cè)試整個(gè)應(yīng)用程序的功能。
• 集成測(cè)試：測(cè)試多個(gè)應(yīng)用程序零件（更廣泛的類別）的相互作用。

尤其是組件測(cè)試的重點(diǎn)是驗(yàn)證預(yù)期事件（開發(fā)人員合同）和UI狀態(tài)反射（用戶合同）。它們還充當(dāng)有價(jià)值的組件文檔。

柏樹與開玩笑/vue測(cè)試用戶：比較分析

雖然Jest和Vue測(cè)試UTIL通常用於組件測(cè)試，但Cypress在實(shí)際瀏覽器環(huán)境中運(yùn)行測(cè)試提供了優(yōu)勢(shì)。這提供了視覺反饋，調(diào)試功能和逼真的瀏覽器API交互。柏樹利用VUE測(cè)試用戶用於組件安裝和特定於框架的斷言。

實(shí)際實(shí)施和挑戰(zhàn)

我們與Vuetify的大型VUE 2應(yīng)用程序提出了一些挑戰(zhàn)：

• VUETIFY集成：創(chuàng)建了一個(gè)自定義柏樹命令，以使用預(yù)配置的Vuetify實(shí)例安裝組件，從而確保正確的樣式和行為。這涉及將必要的類和屬性添加到柏樹根元素（ __cy_root ）中。
• 規(guī)格文件組織： glod模式（ !(node_modules)**/*.spec.js ）在cypress.json中用於與組件一起定位測(cè)試文件，不包括無關(guān)的文件。
• 命令文件衝突：將組件測(cè)試命令與端到端測(cè)試命令分開。
• 訪問VUE包裝器：自定義柏樹命令（ cy.vue() ）簡(jiǎn)化了對(duì)VUE測(cè)試utils包裝器的訪問。

經(jīng)驗(yàn)教訓(xùn)和最佳實(shí)踐

儘管最初遇到小打ic（例如，間歇性的襯裡錯(cuò)誤），但好處大於挑戰(zhàn)?？绮煌?jí)別的一致測(cè)試方法以及分離視覺開發(fā)和測(cè)試組件的能力是顯著的優(yōu)勢(shì)。建議選擇簡(jiǎn)單的，較少依賴的組件進(jìn)行初始測(cè)試。

結(jié)論

柏樹組件測(cè)試提供了一種強(qiáng)大且用戶友好的方法，可以補(bǔ)充現(xiàn)有的端到端測(cè)試。雖然需要熟悉多種工具（VUE測(cè)試用戶，賽普拉斯，摩卡咖啡，柴等），但柏樹的綜合性質(zhì)簡(jiǎn)化了整體測(cè)試過程。提高的測(cè)試可讀性和我們團(tuán)隊(duì)中的測(cè)試覆蓋範(fàn)圍的提高強(qiáng)調(diào)了其有效性。

以上是用柏樹測(cè)試VUE組件的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！