• Vue2 测试解决方案


    Vue2测试解决方案

    介绍

    当构建可靠的应用时,测试在个人和团队构建新特征,重构代码,修复bug等工作中扮演了关键的角色。尽管测试的流派有很多,它们在web应用这个领域里主要有3大类:

    • 单元测试
    • 组件测试
    • 端到端(E2E,end-to-end)测试
      本章节致力于引导大家了解测试的生态系统并为Vue应用或组件库选择适合的工具。

    单元测试

    介绍

    单元测试允许你将独立单元的代码进行隔离测试,其目的是为开发者提供对代码的信心。通过编写细致且有意义的测试,你能够有信心在构建新特性或重构已有代码的同时,保持应用的功能和稳定。

    为一个Vue应用做单元测试并没有和为其它类型的应用做测试有什么明显的区别。

    选择框架

    因为单元测试的建议通常是框架无关的,所以下面只是当你在评估应用的单页测试工具时需要的一些基本指引。

    一流的错误报告

    当测试失败时,提供有用的错误信息对于单元测试框架来说至关重要。这是断言库应尽的职责。一个具有高质量错误信息的断言能够最小化调试问题所需的时间。除了简单地告诉你什么测试失败了,单元库还应额外提供上下文以及测试失败的原因,例如预期结果vs实际结果。

    一些诸如Jest这样的单元测试框架会包含断言库。另一些诸如Mocha需要你单独安装断言库(通常会用Chai)。

    活跃的社区和团队

    因为主流的单元测试框架都是开源的,所以对于一些旨在长期维护其测试且项目本身保持活跃的团队来说,拥有一个活跃的社区是至关重要的。额外的好处是,在任何时候遇到问题时,一个活跃的社区会为你提供更多的支持。

    框架

    尽管生态系统里有很多工具,这里我们列出一些在Vue生态系统中常用的单元测试工具。

    Jest

    Jest是一个关注于简易型的JavaScript测试框架。一个独特的功能是可以为测试生成快照(snapshot),以提供另一种验证应用单元的方法。

    资料
    Mocha

    Mocha是一个专注于灵活性的JavaScript测试框架。因为其灵活性,它允许你选择不同的库来满足诸如侦听(如Sinon)和断言(如Chai)等其它常见的功能。另一个Mocha独特的功能是它不止可以在Node.js里运行测试,还可以在浏览器里运行测试。

    资料

    组件测试

    介绍

    测试大多数Vue组件时都必须将它们挂载到DOM(虚拟或真实)上,才能完全断言它们正在工作。这是另一个与框架无关的概念。因此组件测试框架的诞生,是为了让用户能够以可靠的方式完成这项工作,同时还提供了Vue特有的诸如对Vuex,Vue Router和其他Vue插件的集成的便利性。

    选择框架

    以下章节提供了在评估最适合你的应用的组件测试框架时需要记住的事项。

    与Vue生态系统的最佳兼容性

    毋庸置疑,最重要的标准之一就是组件测试库应该尽可能与Vue生态系统兼容。虽然这看起来很全面,但需要记住的一些关键集成领域包括单文件组件(SFC),Vuex,Vue Router以及应用所依赖的任何其他特定于Vue的插件。

    一流的错误报告

    当测试失败时,提供有用的错误日志以最小化调试问题所需的时间对于组件测试框架来说至关重要。除了简单地告诉你什么测试失败了,它们还应额外提供上下文以及测试失败的原因,例如预期结果vs实际结果。

    推荐

    Vue Testing Library(@testing-library/vue)

    Vue Testing Library是一组专注于测试组件而不依赖实现细节的工具。由于在设计时就充分考虑了可访问性,它采用的方案也使重构变得轻而易举。

    它的指导原则是,与软件使用方式相似的测试越多,它们提供的可信度就越高。

    资料
    Vue Test Utils

    Vue Test Utils是官方的偏底层的组件测试库,它是为用户提供对Vue特定API的访问而编写的。如果你对测试Vue应用不熟悉,我们建议你使用Vue Testing Library,它是Vue Test Utils的抽象。

    资源

    端到端(E2E)测试

    介绍

    虽然单元测试为开发者提供了一定程度的信心,但是单元测试和组件测试在部署到生产环境时提供应用整体覆盖的能力是有限的。因此,端到端测试可以说从应用最重要的方面进行测试覆盖:当用户实际使用应用时会发生什么。

    换句话说,端到端测试验证应用中的所有层。这不仅包括你的前端代码,还包括所有相关的后端服务和基础设施,它们更能代表你的用户所处的环境。通过测试用户操作如何影响应用,端到端测试通常是提高应用是否正常运行的信心的关键。

    选择框架

    虽然web上的端到端测试因不可信赖(片面的)测试和减慢开发过程而得到负面的声誉,但现代端到端工具在创建更可靠的,交互的和实用的测试方面取得了长足进步。在选择端到端测试框架时,以下章节在你为应用选择测试框架时提供了一些指导。

    跨浏览器测试

    端到端测试的一个主要优点是它能够跨多个浏览器进行测试应用。尽管100%的跨浏览器覆盖看上去很诱人,但需要注意的是,因为持续运行这些跨浏览器测试需要额外的时间和机器消耗,它会降低团队的资源回报。因此,在选择应用需要的跨浏览器测试数量时,必须注意这种权衡。

    更快的反馈路径

    端到端测试和开发的主要问题之一是运行整个套件需要很长时间。通常,这只在持续集成和部署(CI/CD)管道中完成。现代的端到端测试框架通过添加类似并行化的特性来帮助解决这个问题,这使得CI/CD管道的运行速度通常比以前快。此外,在本地开发时,有选择地为正在处理的页面运行单个测试的能力,同时还提供测试的热重载,将有助于提高开发者的工作流程和工作效率。

    一流的调试经验

    虽然开发者传统上依赖于在终端窗口中扫描日志来帮助确定测试中出了什么问题,但现代端到端测试框架允许开发者利用它们已经熟悉的工具,例如浏览器开发工具。

    推荐

    虽然生态系统中有很多工具,但以下是一些Vue.js生态系统中常用的端到端测试框架。

    Cypress.io

    Cypress.io是一个测试框架,旨在通过使开发者能够可靠地测试他们的应用,同时提供一流的开发者体验,来提高开发者打的生产率。

    资料
    Nightwatch.js

    Nightwatch.js是一个端到端测试框架,可用于测试web应用和网站,以及Node.js单元测试和集成测试。

    资料
    Puppeteer

    Puppeteer是一个Node.js库,它提供高阶API来控制浏览器,并可以与其他测试运行程序(例如Jest)配对来测试应用。

    资料
    TestCafe

    TestCafe是一个基于端到端的Node.js框架,旨在提供简单的设置,以便开发者能够专注于创建易于编写和可靠的测试。

    资料
  • 相关阅读:
    【Leetcode】单链表oj(下),难度提升,快来做做.
    Rollup:zkSync v2.0和ZK-Rollup的未来
    Scala第十章
    神经网络用于控制的优越性,神经网络稳定性理论
    springboot基于Javaweb的超市管理系统毕业设计源码281024
    元宇宙是一个美丽神话还是下一代互联网的终极形态?
    Houdini 19.5更新Karma渲染器新功能,来了解一下
    Java中的Queue接口和Deque的使用[82]
    【牛客网-前端笔试题】——Javascript专项练习2
    Java long类型转换易犯的错误
  • 原文地址:https://blog.csdn.net/qq_33437985/article/details/126929238