vue-test-utils：在子组件上使用 @click 属性时无法检测方法调用

Question

Vue-test-utils 在子组件上使用 @click 属性时无法检测到方法调用，但在原生 HTML 元素上使用 @click 属性时能够检测到它，例如一个按钮。让我演示一下：

这行得通：

// Test.vue
<template>
    <form @submit.prevent>
        <button name="button" type="button" @click="click">Test</button>
    </form>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'Test',
    setup() {
        const click = () => {
            console.log('Click')
        }

        return { click }
    }
})
</script>

// Test.spec.js
import { mount } from '@vue/test-utils'
import Test from './src/components/Test.vue'

describe('Test.vue', () => {
    const wrapper = mount(Test)

    if ('detects that method was called', () => {
        const spy = spyOn(wrapper.vm, 'click')
        wrapper.find('button').trigger('click')
        expect(wrapper.vm.click).toHaveBeenCalled() // SUCCESS. Called once
    })
})

这不起作用：

// Test.vue
<template>
    <form @submit.prevent>
        <ButtonItem @click="click" />
    </form>
</template>

<script>
import { defineComponent } from 'vue'
import ButtonItem from './src/components/ButtonItem.vue'

export default defineComponent({
    name: 'Test',
    components: { ButtonItem },
    setup() {
        const click = () => {
            console.log('Click')
        }

        return { click }
    }
})
</script>

// ButtonItem.vue
<template>
    <button type="button">Click</button>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'ButtonItem',
})
</script>

// Test.spec.js
import { mount } from '@vue/test-utils'
import Test from './src/components/Test.vue'
import ButtonItem from './src/components/ButtonItem.vue'

describe('Test.vue', () => {
    const wrapper = mount(Test)

    if ('detects that method was called', () => {
        const spy = spyOn(wrapper.vm, 'click')
        wrapper.findComponent(ButtonItem).trigger('click')
        expect(wrapper.vm.click).toHaveBeenCalled() // FAIL. Called 0 times
    })
})

这个问题让我很困惑。我不确定我做错了什么。如果有人能描述故障并向我展示解决方案，我将不胜感激。谢谢！

Answer 1

我还没有运行你的代码来测试它，但是你为什么不使用更直接的解决方案呢？

注意组件何时发出click。

describe('Test.vue', () => {
    const wrapper = mount(Test)

    it('when clicked on ButtonItem it should be called one time', () => {
        const button = wrapper.findComponent(ButtonItem)
        button.trigger('click')
        expect(wrapper.emitted().click).toBeTruthy()
        expect(wrapper.emitted().click.length).toBe(1)
    })
})