Vue & Jest使用vue/test-utils（非jest-dom）测试带参组件方法

你仅用@vue/test-utils原生API即可完成带参方法调用、data修改结果校验，无需引入jest-dom，以下是分场景的具体实现：

场景1：测试模板交互触发的带参方法 #

如果你的方法是通过模板事件绑定触发（比如@click="myFunction(666)"这类固定传参、或事件对象传参的写法），可以沿用你已有的挂载、触发交互逻辑，直接通过组件实例访问data做断言即可：

it('点击按钮触发带参方法时，正确将参数加入myOptions数组', async () => {
  // 如果你需要校验方法入参是否正确，保留spy即可；只校验data结果的话可以省略spy
  const mockMethod = jest.spyOn(myComponent.methods, 'myFunction')
  const wrapper = shallowMount(
    myComponent,
    {
      store,
      localVue,
      propsData,
      stubs,
    },
  )

  // 触发元素交互，和你原有逻辑一致
  await wrapper.findAll('.container button-stub').at(0).trigger('click')

  // 1. 校验方法收到了正确的传入参数
  expect(mockMethod).toHaveBeenCalledWith(666) // 替换为你实际绑定的传参值
  // 2. 校验data中的myOptions被正确修改
  expect(wrapper.vm.myOptions).toContain(666)
  expect(wrapper.vm.myOptions).toHaveLength(1)

  // 用完还原spy，避免污染其他测试用例
  mockMethod.mockRestore()
})

场景2：直接调用方法传入自定义参数测试 #

如果你想跳过交互触发逻辑，直接给方法传入自定义测试参数验证逻辑，可以直接通过挂载返回的wrapper.vm访问组件实例上的方法，传入参数后等待更新再断言：

it('调用方法传入数字参数时，参数会被正确追加到myOptions数组', async () => {
  const wrapper = shallowMount(
    myComponent,
    {
      store,
      localVue,
      propsData,
      stubs,
    },
  )

  // 自定义测试入参
  const firstTestNum = 123
  // 直接调用组件实例方法传参
  await wrapper.vm.myFunction(firstTestNum)
  // 校验第一次传参后的结果
  expect(wrapper.vm.myOptions).toEqual([123])

  // 测试追加传参逻辑
  const secondTestNum = 456
  await wrapper.vm.myFunction(secondTestNum)
  expect(wrapper.vm.myOptions).toEqual([123, 456])
})

注意事项 #

• 所有触发交互、调用实例方法的操作前加await，等待Vue响应式更新完成后再做断言，避免拿到旧的状态值
• 若使用jest.spyOn监听方法，用例执行完必须调用mockRestore()还原mock，避免多个用例之间状态互相干扰
• wrapper.vm可以直接访问组件实例上的所有data、计算属性、方法，原生Jest的基础匹配器（toBe/toEqual/toContain）完全可以覆盖断言需求，不需要额外扩展匹配器

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