如何使用vue-test-utils与Jest模拟组件的$root？

嘿，我来帮你解决Vue组件测试中模拟$root的问题！你的计算属性依赖this.$root.feature.name，其实用Vue Test Utils就能轻松搞定，分两种常见场景给你具体代码示例：

Vue 2 + @vue/test-utils（旧版） #

直接在挂载组件时通过mocks选项传入模拟的$root对象就行，这样组件里的this.$root就会指向你定义的mock：

import { shallowMount } from '@vue/test-utils'
import YourTargetComponent from '@/components/YourTargetComponent.vue'

describe('YourTargetComponent', () => {
  it('生成正确的textButton文本', () => {
    // 自定义模拟的$root结构，匹配你组件里用到的feature.name
    const wrapper = shallowMount(YourTargetComponent, {
      mocks: {
        $root: {
          feature: {
            name: 'cart-feature'
          }
        }
      }
    })

    // 根据你的计算逻辑断言结果，比如假设name是cart-feature时返回"查看购物车"
    expect(wrapper.vm.textButton).toBe('查看购物车')
  })
})

Vue 3 + @vue/test-utils v2+ #

Vue3的测试工具把全局模拟放在global选项下，写法稍微调整一下：

import { mount } from '@vue/test-utils'
import YourTargetComponent from './YourTargetComponent.vue'

describe('YourTargetComponent', () => {
  it('根据$root的feature.name计算正确的按钮文本', () => {
    const wrapper = mount(YourTargetComponent, {
      global: {
        mocks: {
          $root: {
            feature: {
              name: 'checkout-feature'
            }
          }
        }
      }
    })

    expect(wrapper.vm.textButton).toEqual('去结算')
  })
})

进阶技巧：复用mock并覆盖场景 #

如果多个测试用例需要用到不同的feature.name，可以提前定义基础mock，再在单个用例里修改：

describe('YourTargetComponent', () => {
  // 定义基础的mock $root
  const mockRoot = {
    feature: {
      name: 'default-feature'
    }
  }

  // 每个测试前重置默认值
  beforeEach(() => {
    mockRoot.feature.name = 'default-feature'
  })

  it('处理默认feature场景', () => {
    const wrapper = mount(YourTargetComponent, {
      global: {
        mocks: { $root: mockRoot }
      }
    })
    expect(wrapper.vm.textButton).toBe('默认按钮文本')
  })

  it('处理特殊feature场景', () => {
    // 覆盖mock值
    mockRoot.feature.name = 'promotion-feature'
    const wrapper = mount(YourTargetComponent, {
      global: {
        mocks: { $root: mockRoot }
      }
    })
    expect(wrapper.vm.textButton).toBe('限时特惠')
  })
})

另外要注意：如果你的测试框架是Jest而不是Vitest，语法上会有小差异（比如用jest.mock代替vi.mock），但核心的模拟思路是完全一致的。记得根据你的计算属性逻辑，多写几个测试用例覆盖不同的feature.name场景，确保测试的全面性~

内容的提问来源于stack exchange，提问作者Vanessa Böhner