vue options api 组件单元测试应聚焦“输入→渲染输出”，通过 mount 挂载、传入 props 或触发交互，用 text()、find().exists() 等断言 dom 结果，避免测内部实现、class 名或 setdata；依赖需通过 global 配置模拟。
用 Options API 编写的 Vue 组件，单元测试重点是验证“输入 → 渲染输出”是否符合预期，而不是检查内部 data 或 methods 实现。核心思路是：挂载组件、模拟输入（props / 用户交互）、断言 DOM 内容或结构是否正确。
验证 props 渲染内容
当组件接收 props 并直接用于模板时，测试应传入不同值，确认对应文本或元素是否出现。
- 使用 mount（非 shallowMount）确保子组件也渲染，便于检查最终 DOM
- 通过 options.props 传入测试数据，例如：
{ title: 'Welcome' } - 用 wrapper.text() 或 wrapper.find('h1').text() 断言文本内容
- 避免依赖 class 名或内部结构；优先用语义化选择器（如
h1、[data-testid="title"]）
验证条件渲染（v-if / v-show）
v-if 控制元素是否存在于 DOM 中，需分别测试 true 和 false 两种状态下的存在性。
- 用 wrapper.find(selector).exists() 判断元素是否渲染
- 对布尔型 prop，可两次 mount（不同 props），或用 wrapper.setProps({ visible: true }) 动态更新后 await nextTick
- 注意：get() 会报错如果元素不存在，适合明确断言“必须存在”；find().exists() 更安全，适合判断“可能不存在”
验证用户交互触发的渲染变化
点击按钮、输入表单等操作应改变视图，测试要模拟事件并等待响应。
- 用 wrapper.find('button').trigger('click') 触发原生事件
- Vue 3 中异步更新需 await wrapper.vm.$nextTick() 确保 DOM 同步
- 断言应基于可见结果，例如：
expect(wrapper.text()).toContain('Submitted!')，而非检查data是否变了 - 避免
wrapper.setData({ ... })—— 它绕过真实交互逻辑，属于测试实现细节
处理依赖（如 provide / inject、全局插件）
Options API 组件若依赖外部状态（如 Vuex store、router、自定义插件），需在 mount 时提供模拟环境。
- 通过 global.plugins 注入 mock 插件，例如：
{ plugins: [mockRouter] } - 用 global.config 修改 Vue 全局配置（如关闭警告）
- 对 provide/inject，可在 global.provide 中传入 mock 对象
- 不建议在每个 test 里重复配置；可用 beforeEach + config 统一设置
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
