前端测试方案

测试的好处

自动化测试能够预防无意引入的 bug，并鼓励开发者将应用分解为可测试、可维护的函数、模块、类和组件。这能够帮助你和你的团队更快速、自信地构建复杂的 Vue 应用。

何时测试

越早越好！我们建议你尽快开始编写测试。拖得越久，应用就会有越多的依赖和复杂性，想要开始添加测试也就越困难。

测试的类型

当设计你的 Vue 应用的测试策略时，你应该利用以下几种测试类型：

• 单元测试：检查给定函数、类或组合式函数的输入是否产生预期的输出或副作用。
• 组件测试：检查你的组件是否正常挂载和渲染、是否可以与之互动，以及表现是否符合预期。这些测试比单元测试导入了更多的代码，更复杂，需要更多时间来执行。
• 端到端测试：检查跨越多个页面的功能，并对生产构建的 Vue 应用进行实际的网络请求。这些测试通常涉及到建立一个数据库或其他后端。

每种测试类型在你的应用的测试策略中都发挥着作用，保护你免受不同类型的问题的影响。

编码注意点

组件分容器组件和逻辑组件，逻辑组件只消费props数据，容器组件处理副作用，用来接口交互等等

单元测试

单元测试将捕获函数的业务逻辑和逻辑正确性的问题

组件测试

• 对于 视图 的测试：根据输入 prop 和插槽断言渲染输出是否正确。
• 对于 交互 的测试：断言渲染的更新是否正确或触发的事件是否正确地响应了用户输入事件。

端到端测试

端到端测试的重点是多页面的应用表现，针对你的应用在生产环境下进行网络请求。他们通常需要建立一个数据库或其他形式的后端，甚至可能针对一个预备上线的环境运行

vue3+vite应用接入方案

vitest+cypress

具体实施

jsCopy

consol