Vue+Jest单元测试按钮点击触发失败：Expected 1, Received:0

我碰到过好几次类似的问题，帮你梳理几个最可能的原因和对应的解决办法：

1. 先修正低级拼写错误 #

你的测试代码里把describe写成了describle——这个语法错误会直接导致测试逻辑没有正确执行，先把这个改过来：

describe(Search, () => { // 这里是describe，不是describle
  // ... 测试逻辑
})

2. 替换已废弃的setMethods方法 #

Vue Test Utils从v1.x版本开始就废弃了setMethods，直接操作组件实例或者在挂载时注入mock方法才是可靠的方式：

方案一：直接替换组件实例的方法 #

it('trigger button', async () => { // 记得加async，因为要等待Vue更新
  const wrapper = shallowMount(Search)
  const clickMethodStub = jest.fn()
  
  // 直接替换组件实例上的方法
  wrapper.vm.searchItem = clickMethodStub
  
  wrapper.find('#searchBtn').trigger('click')
  await wrapper.vm.$nextTick() // 等待Vue完成DOM更新和方法执行
  
  expect(clickMethodStub.mock.calls.length).toBe(1)
})

方案二：挂载时直接注入mock方法 #

这种方式更推荐，能避免后续版本兼容问题：

it('trigger button', async () => {
  const clickMethodStub = jest.fn()
  
  // 挂载组件时直接传入mock的methods
  const wrapper = shallowMount(Search, {
    methods: {
      searchItem: clickMethodStub
    }
  })
  
  wrapper.find('#searchBtn').trigger('click')
  await wrapper.vm.$nextTick()
  
  // 也可以用Jest更简洁的断言语法
  expect(clickMethodStub).toHaveBeenCalledTimes(1)
})

3. 处理Vuetify组件的查找问题 #

你用的是Vuetify的v-btn，shallowMount可能不会渲染出带id="searchBtn"的原生按钮，而是Vuetify的封装组件。可以试试这两种方式：

• 直接通过组件名称查找：

wrapper.findComponent({ name: 'v-btn' }).trigger('click')

• 确保测试环境注册了Vuetify（如果之前没做的话）：

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

4. 排查按钮是否真的被渲染 #

如果还是不行，可以在测试里打印渲染后的DOM，确认选择器是否正确：

console.log(wrapper.html()) // 查看渲染结构，确认#searchBtn是否存在

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