用柏树测试VUE组件

Cypress是一种基于浏览器的应用程序的强大自动测试跑者，现在支持组件测试。本文探讨了将柏树组件测试集成到大规模VUE应用程序中，突出了最佳实践并应对共同的挑战。我们的团队以前使用了Jest和Vue测试液体，以基于浏览器的测试环境过渡到赛普拉斯，并与现有的端到端测试无缝集成。

注意：本文反映了柏树8功能。期望将来的更新中的潜在变化。

组件测试结构：一个实际示例

考虑具有标题，正文和确认按钮的“隐私政策”组件。单击按钮发出“确认”事件。柏树组件测试可能看起来像这样：

从'@cypress/vue'导入{mount};
从'./privacypolicynotice.vue'导入privacypolicynotice';

描述（'PrivacyPolicyNotice'，（）=> {
  它（'渲染标题'，（）=> {
    坐骑（PrivacyPolicyNotice）；
    Cy.Contains（'H1'，“隐私政策”）。应该（“ Be.visible”）；
  }）;

  它（'在按钮上发出“确认”事件，请单击'，（）=> {
    坐骑（PrivacyPolicyNotice）；
    cy.contains（'button''，'/^ok/'）
      。点击（）
      .vue（）
      。然后（（包装）=> {
        期待（wrapper.emitter（'escrence'））。to.have.length（1）;
      }）;
  }）;
}）;

此测试将验证用户界面（UI）元素和开发人员界面（API）事件，隐式测试组件结构和可访问性。例如，将按钮交换为DIV将立即突出可访问性问题。

测试策略：分层方法

我们的测试策略区分：

• 单元测试：验证个人功能行为。
• 组件测试：隔离UI组件，检查用户和开发人员交互。
• 端到端测试：从用户的角度测试整个应用程序的功能。
• 集成测试：测试多个应用程序零件（更广泛的类别）的相互作用。

尤其是组件测试的重点是验证预期事件（开发人员合同）和UI状态反射（用户合同）。它们还充当有价值的组件文档。

柏树与开玩笑/vue测试用户：比较分析

虽然Jest和Vue测试UTIL通常用于组件测试，但Cypress在实际浏览器环境中运行测试提供了优势。这提供了视觉反馈，调试功能和逼真的浏览器API交互。柏树利用VUE测试用户用于组件安装和特定于框架的断言。

实际实施和挑战

我们与Vuetify的大型VUE 2应用程序提出了一些挑战：

• VUETIFY集成：创建了一个自定义柏树命令，以使用预配置的Vuetify实例安装组件，从而确保正确的样式和行为。这涉及将必要的类和属性添加到柏树根元素（ __cy_root ）中。
• 规格文件组织： glod模式（ !(node_modules)**/*.spec.js ）在cypress.json中用于与组件一起定位测试文件，不包括无关的文件。
• 命令文件冲突：将组件测试命令与端到端测试命令分开。
• 访问VUE包装器：自定义柏树命令（ cy.vue() ）简化了对VUE测试utils包装器的访问。

经验教训和最佳实践

尽管最初遇到小打ic（例如，间歇性的衬里错误），但好处大于挑战。跨不同级别的一致测试方法以及分离视觉开发和测试组件的能力是显着的优势。建议选择简单的，较少依赖的组件进行初始测试。

结论

柏树组件测试提供了一种强大且用户友好的方法，可以补充现有的端到端测试。虽然需要熟悉多种工具（VUE测试用户，赛普拉斯，摩卡咖啡，柴等），但柏树的综合性质简化了整体测试过程。提高的测试可读性和我们团队中的测试覆盖范围的提高强调了其有效性。

以上是用柏树测试VUE组件的详细内容。更多信息请关注PHP中文网其他相关文章！