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

Posted 2023-02-22

【中文标题】Jest Vue，测试触发点击按钮，预期 1，收到：0

【英文标题】：Jest Vue, test trigger click button, Expected 1, received: 0

【发布时间】：2020-02-07 00:07:00

【问题描述】：

我对触发点击的单元测试有问题。错误：预期：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

【问题讨论】：

能否请您发布您的 wrapper.html()？

【参考方案1】：

因为是vuetify按钮，所以需要用到shallowMount到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) 
        )
    )