unit-testing - Jest Vue，测试触发点击按钮，预期 1，收到：0

Question

我对触发点击的单元测试有问题。错误：预期：1，接收：0 我正在使用 Vue、Jest 和 Vue 测试工具。我想测试按钮是否被触发

搜索.vue

<v-btn id="searchBtn" @click="searchItem"></v-btn>

methods: {
    searchItem() {}
        ...
    }

test.spec.js

import Search from '...'

describle(Search, () => {
    it('trigger button', () => {
       const wrapper = shallowMount(Search)

        const clickMethodStub = jest.fn()

        wrapper.setMethods({ searchItem: clickMethodStub })
        wrapper.find('#searchBtn').trigger('click') 

        expect(clickMethodStub.mock.calls.length).toBe(1) 
        })
    })
}

错误：预期：1 收到：0

标签： unit-testingvue.jstriggersjestjsvuetify.js

Answer 1

因为是 vuetify 按钮，所以需要使用 to shallowMountto mount。

import Search from '...'

describle(Search, () => {
    it('trigger button', () => {
       const wrapper = mount(Search)

        const clickMethodStub = jest.fn()

        wrapper.setMethods({ searchItem: clickMethodStub })
        wrapper.find('#searchBtn').trigger('click') 

        expect(clickMethodStub.mock.calls.length).toBe(1) 
        })
    })
}