Vue测试中如何Mock组件方法返回值以实现目标方法的隔离测试

你直接对wrapper.vm.testCondition赋值不生效，是因为Vue组件实例的方法在挂载完成后已经被内部绑定了上下文，直接覆盖实例属性不会替换方法实际调用的逻辑。

方案1：挂载组件时提前mock方法 #

你可以在调用mount/shallowMount创建组件实例时，通过配置项直接覆盖待mock的方法，这种方式兼容性最好，Vue2/Vue Test Utils v1版本都支持：

// MyComponent.spec.js
import { shallowMount } from '@vue/test-utils'
import MyComponent from './MyComponent.vue'

it('should return "condition_failed"', () => {
  const wrapper = shallowMount(MyComponent, {
    // 直接在methods配置里传入mock方法
    methods: {
      testCondition: jest.fn().mockReturnValue(false)
    }
  })

  const received = wrapper.vm.methodIWantToTest();
  expect(received).toBe('condition_failed');
  // 额外验证testCondition确实被调用
  expect(wrapper.vm.testCondition).toHaveBeenCalledTimes(1);
})

方案2：已挂载组件动态mock方法 #

如果组件已经完成挂载，需要动态修改方法返回值，可以用jest.spyOn包裹实例方法再设置返回值，比直接赋值更可靠：

it('should return "condition_failed"', () => {
  const wrapper = shallowMount(MyComponent)
  // 用spyOn劫持实例的testCondition方法
  const mockTestCondition = jest.spyOn(wrapper.vm, 'testCondition').mockReturnValue(false)

  const received = wrapper.vm.methodIWantToTest();
  expect(received).toBe('condition_failed');

  // 测试结束后恢复原方法，避免影响其他测试用例
  mockTestCondition.mockRestore()
})

如果你使用的是Vue3 + <script setup>语法，组件内的方法默认是私有属性，需要通过defineExpose将testCondition方法暴露出来，才能被外部劫持mock。

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