精读 Vue 官方文档系列 🎉
介绍
测试的目的是用于保证应用功能的 可靠 与 稳定。哪些情况会造成开发者失去对代码的信心？
- 构建新特性
- 重构代码
- 修复 BUG
尽管测试的流派有很多，但在 Web 应用领域这一块主要有三大类：
- 单元测试。
- 组件测试。
- 端对端(E2E, end-to-end)测试。
单元测试
介绍
单元测试允许你将独立单元的代码进行隔离测试。
选择框架
单元测试通常是与框架无关，但选择单元测试框架的主要指标主要有以下几种：
一流的错误报告
尽可能详细的错误信息提示，例如直接提供错误的上下文，预期结果 VS 实际得到的结果。
是否所需要单独安装断言库
例如 Jest 这样的单元测试框架会自带断言库，而 Mocha 则需要单独额外安装。
活跃的社区和团队
可以获得更好的支持与帮助。
框架
这里我个人选择
Jest。
组件测试
介绍
由于大多数的 Vue 组件需要将它们挂载到 DOM（虚拟或真实）上，才能完全断言它们是否在正常工作。因此对组件测试工具的选择，不仅要求工具具有操作 DOM 的能力，还要能够兼容 Vue 领域的一些特有的产物，例如单文件组件 (SFC)、Vuex、VueRouter 和其它的一些基于 Vue 生态的插件。
选择框架
- 与 Vue 生态系统的最佳兼容性
- 一流的错误报告
推荐
可供选择的 Vue 组件测试工具有：
其中 Vue Testing Library 是基于 Vue Test Utils 的抽象和包装，目的在于提供一些常用方法，自身定位为一款轻量级的 Vue 组件测试库。而 Vue Test Utils 则是 Vue 官方的测试工具库，它提供了一系列用 于Vue 环境下进行测试的 API，将这些 API 与“单元测试运行器”结合使用，可以很方便的对单文件组件 (SFC) 进行测试。同时它还能够兼容一些关键集成领域（Vuex、Vue Router 和应用所依赖特定于 Vue 的插件等）协同使用，可以实现对 Vue 组件整体功能上更为完整的单元测试。
Vue Test Utils支持与多种单元测试运行器结合使用，例如Jest，Mocha、Karma。
这里推荐 Vue Test Uitls + Jest 组合进行 Vue 的组件测试 ，因为像一些知名的 UI 库，例如 antv，ElementUI 等都是使用的此套组合。
个人看来所谓“组件测试”本质上依然是“单元测试”，与传统的单元测试的区别就在于包含了一些 Vue 环境特有的产物。
端到端 (E2E) 测试
介绍
相比较“单元测试”与“组件测试”，“端对端测试”可以提供覆盖范围更广，层级更多，对应用更全面的测试。
“端对端测试”是对整个应用进行测试，相当于完全模拟了用户实际交互的使用场景：
- UI界面与事件交互。
- 不同浏览器与兼容性测试。
- 前端功能的全方面覆盖。
- 后端服务接口以及基础设施。
因此“端对端测试”通常是提高应用是否正常运行的信心的关键。
Web 自动化测试，又叫 UI 自动化测试，国外叫 End-to-End Test（e2e, 端到端测试），可以让重复繁琐的手工测试（点点点测试）通过程序自动执行，可以极大地提升测试人员的效率。
选择框架
端对端测试工具的选择，主要基于以下几种指标来进行衡量：
跨浏览器测试
追求更高程度的跨浏览器覆盖测试，必然会导致更多的时间和机器消耗，降低团队的资源回报。因此，在选择应用需要的跨浏览器测试数量时，必须注意这种权衡。
更快的反馈路径
端到端测试和开发的主要问题之一是运行整个套件需要很长时间。通常，这只在持续集成和部署 (CI/CD) 管道中完成。并且现代的端到端测试工具还添加了并行化的特性进行了进一步的优化。
一流的调试经验
虽然开发者传统上依赖于在终端窗口中扫描日志来帮助确定测试中出了什么问题，但现代端到端测试框架允许开发者利用他们已经熟悉的工具，例如浏览器开发工具。
更多新的特性
例如时间旅行，测试快照生成，运行过程自动录制视频等。
推荐
针对 E2E 浏览器特定问题的一个最新进展是，针对不常用的浏览器 (如：< IE11、旧版 Safari) 等，使用应用监视和错误报告工具 (如：Sentry、LogRocket 等)。
因此个人首推的端到端测试工具是 —— “Cypress”。
而其他类似的端到端测试框架则有：
- Nightwatch.js ：可以更好的跨浏览器测试。
- Puppeteer ：与
Cypress相同跨浏览器功能都很弱，但是在测试界面和文档上不如Cypress。但对 headless 模式更为友好。 - TestCafe : 旨在提供简单的设置，以便开发者能够专注于创建易于编写和可靠的测试。
