如何用vue-test-utils与Vue测试作为Prop传递的回调方法？

首先明确说：完全不需要用wrapper.setMethods，这个方法早就被Vue Test Utils废弃了，而且你的onBilling是父组件传递的Prop回调，根本不是组件自身的methods，用它完全不对症。

下面给你一步步拆解问题和解决方案：

核心思路：用Mock函数测试回调Prop #

测试回调Prop是否被正确调用的关键，是创建一个可追踪的mock函数，把它作为Prop传给组件，然后断言这个mock函数是否被触发（以及触发时的参数）。

具体测试示例（以Jest为例） #

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

describe('AddressForm', () => {
  it('正确触发onBilling回调当表单验证通过时', () => {
    // 1. 创建一个mock回调函数，用来追踪调用情况
    const mockOnBilling = jest.fn()

    // 2. 挂载组件时，把mock函数作为onBilling Prop传入
    const wrapper = shallowMount(AddressForm, {
      propsData: {
        billingAddress: {}, // 传入符合要求的默认对象
        onBilling: mockOnBilling // 这里传入你的回调Prop
      }
    })

    // 3. 触发组件内部会调用onBilling的逻辑
    // 比如如果是表单验证通过后调用，你可以：
    // - 模拟用户输入正确的表单数据
    // - 直接调用组件内部触发验证的方法，比如wrapper.vm.validateAndSubmit()
    // 这里假设你的组件有一个触发验证完成的方法，替换成实际的触发逻辑
    wrapper.vm.triggerBillingValidation()

    // 4. 断言mock函数被调用
    expect(mockOnBilling).toHaveBeenCalled()
    // 如果回调有参数，还可以断言参数：
    // expect(mockOnBilling).toHaveBeenCalledWith(expect.objectContaining({ isValid: true }))
  })
})

为什么你的断言不生效？ #

结合你提到的控制台日志触发但断言失败，大概率是这几个原因：

1. 异步逻辑没处理：你用了vee-validate，表单验证是异步操作，测试时必须等待异步完成再断言。比如用async/await：

it('正确触发onBilling回调（异步场景）', async () => {
  const mockOnBilling = jest.fn()
  const wrapper = shallowMount(AddressForm, {
    propsData: { billingAddress: {}, onBilling: mockOnBilling }
  })

  // 模拟表单提交（异步操作）
  await wrapper.find('form').trigger('submit')

  // 等待异步验证完成后再断言
  expect(mockOnBilling).toHaveBeenCalled()
})

2. 回调Prop的名字不匹配：你提到的是onBillingValid函数，但组件接收的Prop是onBilling？要确认组件内部调用的是this.onBilling还是this.onBillingValid，名字不匹配的话断言肯定失败。
3. 触发逻辑没到位：可能你的测试没有真正触发到调用回调的分支，比如表单验证没通过，所以代码没走到调用onBilling的步骤。可以在测试里手动设置表单为有效状态，或者直接调用触发回调的内部方法。

关于setMethods的补充 #

wrapper.setMethods是Vue Test Utils的废弃API，早在Vue 2的测试工具版本里就不推荐使用了。如果要模拟组件自身的methods，现在推荐直接修改wrapper.vm上的方法，比如：

// 模拟组件自身的某个方法
wrapper.vm.validateForm = jest.fn().mockReturnValue(true)

但这和你的回调Prop问题无关，所以完全不需要用到它。

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