Vue3 Vitest中使用shallowMount为何不渲染元素属性？

核心原因 #

shallowMount() 是浅渲染，只会渲染当前组件的模板，所有子组件都会被替换成默认占位符（Stub），占位符不会保留原组件的任何属性（包括data-test）。而mount()是全渲染，会完整渲染所有子组件，因此能正常找到属性。

针对性解决方案 #

根据data-test属性的所在位置，选择对应处理方式：

1. 属性在当前组件的根元素上

如果data-test写在当前组件的根节点（非子组件）上却仍找不到，检查两点：

• 确保组件只有一个根元素（Vue 2 要求单根结构，Vue 3 支持多根但浅渲染处理多根时可能存在异常）；
• 确认根元素的data-test属性没有被条件渲染逻辑移除（比如v-if控制）。

示例验证：

// 假设YourComponent的模板为：
<template>
  <div data-test="my-attribute">{{ title }}</div>
</template>

// 测试代码无需修改，shallowMount可正常找到属性
const wrapper = shallowMount(YourComponent, {
  props: { title: 'Hello world' }
});
expect(wrapper.get('[data-test="my-attribute"]').exists()).toBe(true);

2. 属性在子组件上

如果data-test属于子组件，浅渲染时子组件被占位符替换导致属性消失，可选择以下方案：

• 方案一：改用mount()：若不需要严格隔离子组件，直接用全渲染即可保留子组件的所有属性；
• 方案二：自定义子组件存根：手动编写存根模板，保留需要测试的data-test属性：

  const wrapper = shallowMount(YourComponent, {
    props: { title: 'Hello world' },
    stubs: {
      // 替换为你的子组件名称
      ChildComponent: {
        template: '<div data-test="my-attribute"></div>'
      }
    }
  });
  expect(wrapper.get('[data-test="my-attribute"]').exists()).toBe(true);
  

• 方案三：调整测试逻辑：浅渲染的核心是隔离子组件，更合理的测试应该验证子组件是否被正确渲染、是否接收了正确的props，而非依赖子组件的属性：

  // 验证子组件存在并接收了预期props
  expect(wrapper.findComponent(ChildComponent).exists()).toBe(true);
  expect(wrapper.findComponent(ChildComponent).props('title')).toBe('Hello world');
  

3. 检查Vue Test Utils版本

旧版本的@vue/test-utils对浅渲染的属性处理存在bug，升级到最新版本可能直接解决问题。

内容的提问来源于stack exchange，提问作者imqqmi