Vue单元测试：如何用vue-test-utils设置祖父组件Mock数据？

针对你需要Mock组件依赖的this.$parent.$parent.someData场景，在vue-test-utils下有两种可行方案，无需修改原组件代码：

方案一：直接Mock $parent链 #

通过mocks选项直接模拟嵌套的$parent对象，快速注入Mock数据：

const wrapper = shallowMount(MyComponent, {
  mocks: {
    $parent: {
      $parent: {
        someData: '这里填你的Mock数据'
      }
    }
  }
})

这种方式最简洁，适合仅需验证组件对someData的使用逻辑，无需模拟完整组件层级的场景。

方案二：嵌套挂载组件层级 #

模拟真实的组件嵌套关系，依次挂载祖父组件、父组件和目标组件：

// 定义Mock祖父组件
const GrandparentComponent = {
  data() {
    return {
      someData: '这里填你的Mock数据'
    }
  },
  template: '<div><parent-component></parent-component></div>',
  components: { ParentComponent }
}

// 挂载层级组件，替换父组件的模板以包含目标组件
const grandparentWrapper = shallowMount(GrandparentComponent, {
  components: {
    ParentComponent: {
      template: '<div><my-component></my-component></div>',
      components: { MyComponent }
    }
  }
})

// 获取目标组件的测试wrapper
const myComponentWrapper = grandparentWrapper.findComponent(MyComponent)

这种方式更贴近真实渲染场景，适合需要验证组件在完整层级下交互逻辑的测试。

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