组件的测试

如何测试

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

直接测试

这里我们以一个典型的 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 官方推荐的方式

同样要分为 vue2 和 vue3 两种情况

Vue3

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

Vue2

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

legacy 版本对应的是 v1 和 vue2

官方网站

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

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

e2e 测试以及视觉测试

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

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

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