组件的测试

如何测试

其实测试你自己的组件库很简单，直接在项目，或者组件库文档中引入即可。

直接测试

这里我们以一个典型的 vite 应用项目为例:

ui
 - src # 项目所在位置
 - lib # 组件库所在位置
 - test # 测试所在位置
 - index.html # 入口文件
 - vite.config.ts # vite 配置文件
 - vitest.config.ts # vitest 配置文件
 - package.json

这里我们把应用相关的代码放在 src 目录下，组件库放在 lib 目录下，测试代码放在 test 目录下。

这样你使用 vite 开启本地服务器，启动的依然是 src/main.ts 入口

那么你在对应的文件中，使用 lib 下的组件便是理所当然的。

vitepress

快速在项目中，初始一个 vitepress 文档网站

在组件库文档中，使用 VitePress 不仅可以生成静态文档，还能对 Markdown 示例代码进行即时校验。

storybook

借助 Storybook，你可以为每个组件创建一个可交互的（Story），并配合插件实现自动化测试。

这个比 vitepress 要更好，因为 storybook 创建了一个组件隔离环境，使得它不会收到外部的影响，

单元测试

这里只需要使用 vitest 即可，这是 vue 官方推荐的方式

同样可以分为 vue3 主线与 vue2 历史兼容两种情况。

Vue3

安装 @vue/test-utils 和 @testing-library/vue 最新版本

Vue2

Vue 2 已进入 EOL，本节仅用于维护历史项目。

安装 @vue/test-utils@legacy @testing-library/vue@^5

legacy 版本对应的是 v1 和 vue2

官方网站

什么时候应该添加单元测试，一般来说一开始做简单的单元测试，覆盖一下代码即可

后续假如有 bug，那在修复的时候，需要添加之前行为的单元测试，以及新修复的各个场景的测试用例。

e2e 测试以及视觉测试

E2E（End-to-End）测试用于模拟用户的实际操作流程，从浏览器层面验证组件是否按预期工作。它测试的不只是组件的行为，还包括它们在真实运行环境中的集成方式。

比如 playwright 就是一个强大的现代化 E2E 框架，支持多浏览器测试、并发运行、自动截图和视频录制

同样在 视觉测试 上，Playwright Snapshot 也提供了便捷的截图的视觉测试