# Vue3 测试

自动化测试的好处：

* 能预防无意引入的 bug
* 鼓励开发者将应用分解为可测试、可维护的函数、模块、类和组件

几种测试类型：

1. 单元测试：侧重于逻辑上的正确性
   * 通常覆盖一个单个函数、类、组合式函数或模块
   * 以下两种情况，必须对 Vue 的特定功能进行单元测试
     * 组合式函数
     * 组件：白盒测试 + 黑盒测试
   * 推荐：由 Vue 核心团队成员创建
     * [Vitest](https://vitest.dev/)，单元测试框架 （\~ Jest 一个广受欢迎的单元测试框架）
     * Peeky，并提供了基于图形用户界面的测试界面
2. 组件测试：检查组件是否正常挂载和渲染、是否可以与之互动，以及表现是否符合预期
   * 从粒度的角度来看，组件测试位于单元测试之上，可以被认为是集成测试的一种形式
   * 组件测试主要需要关心组件的公开接口而不是内部实现细节
   * 推荐做法：
     * 对于视图的测试：根据输入 prop 和插槽断言渲染输出是否正确
     * 对于交互的测试：断言渲染的更新是否正确或触发的事件是否正确地响应了用户输入事件
   * 推荐方案：
     * [Vitest](https://vitest.dev/) 对于组件和组合式函数都采用无头渲染的方式。组件和 DOM 都可以通过 [`@testing-library/vue`](https://testing-library.com/docs/vue-testing-library/intro) 来测试
     * [Cypress 组件测试](https://on.cypress.io/component)：会预期其准确地渲染样式或者触发原生 DOM 事件。可以搭配 [`@testing-library/cypress`](https://testing-library.com/docs/cypress-testing-library/intro) 这个库一同进行测试
3. 端到端测试：检查跨越多个页面的功能，并对生产构建的 Vue 应用进行实际的网络请求
   * 这些测试通常涉及到建立一个数据库或其他后端
   * 推荐 Cypress

详见[应用规模化-测试](https://cn.vuejs.org/guide/scaling-up/testing.html)。