Vue Options API如何编写组件的单元测试验证渲染结果

Vue Options API 组件单元测试应聚焦“输入→渲染输出”，通过 mount 挂载、传入 props 或触发交互，用 text()、find().exists() 等断言 DOM 结果，避免测内部实现、class 名或 setData；依赖需通过 global 配置模拟。

用 Options API 编写的 Vue 组件，单元测试重点是验证“输入 → 渲染输出”是否符合预期，而不是检查内部 data 或 methods 实现。核心思路是：挂载组件、模拟输入（props / 用户交互）、断言 DOM 内容或结构是否正确。

验证 props 渲染内容

当组件接收 props 并直接用于模板时，测试应传入不同值，确认对应文本或元素是否出现。

1. 使用 mount（非 shallowMount）确保子组件也渲染，便于检查最终 DOM
2. 通过 options.props 传入测试数据，例如：{ title: 'Welcome' }
3. 用 wrapper.text() 或 wrapper.find('h1').text() 断言文本内容
4. 避免依赖 class 名或内部结构；优先用语义化选择器（如 h1、[data-testid="title"]）

验证条件渲染（v-if / v-show）

v-if 控制元素是否存在于 DOM 中，需分别测试 true 和 false 两种状态下的存在性。

1. 用 wrapper.find(selector).exists() 判断元素是否渲染
2. 对布尔型 prop，可两次 mount（不同 props），或用 wrapper.setProps({ visible: true }) 动态更新后 await nextTick
3. 注意：get() 会报错如果元素不存在，适合明确断言“必须存在”；find().exists() 更安全，适合判断“可能不存在”

验证用户交互触发的渲染变化

点击按钮、输入表单等操作应改变视图，测试要模拟事件并等待响应。

1. 用 wrapper.find('button').trigger('click') 触发原生事件
2. Vue 3 中异步更新需 await wrapper.vm.$nextTick() 确保 DOM 同步
3. 断言应基于可见结果，例如：expect(wrapper.text()).toContain('Submitted!')，而非检查 data 是否变了
4. 避免 wrapper.setData({ ... }) —— 它绕过真实交互逻辑，属于测试实现细节

处理依赖（如 provide / inject、全局插件）

Options API 组件若依赖外部状态（如 Vuex store、router、自定义插件），需在 mount 时提供模拟环境。

1. 通过 global.plugins 注入 mock 插件，例如：{ plugins: [mockRouter] }
2. 用 global.config 修改 Vue 全局配置（如关闭警告）
3. 对 provide/inject，可在 global.provide 中传入 mock 对象
4. 不建议在每个 test 里重复配置；可用 beforeEach + config 统一设置