@vue/test-utils how to capture custom emit from child component

Question

I'm trying to unit test a component that has a child component called <ButtonStandard> which captures a click event and emits a custom event called pressed.

The parent component captures the pressed event and runs a method methods.toggleArchive.

I am trying to test that the correct method is run when a specific <ButtonStandard> is clicked.

The component I'm trying to test:

<script setup>
   ///
       const methods = {
            //toggle archive for this chat
            toggleArchive(){
                router.visit(route('conversation.toggleArchive',props.conversation.id));
            }
       }
</script>
<template>
    ///
            <ButtonStandard
                @pressed="methods.toggleArchive"
                dusk="inbox_toggle_archive"
            >
                Archive
            </ButtonStandard>
</template>

And my test:

 it("should call toggle_archive route when clicked", () => {

    //ARRANGE
    const methods = {
        toggleArchive : vi.fn(() => console.log('success'))
    };


    //ACT
    const wrapper = mount(ConversationStatus, {
        propsData: {
            conversation :  testConversation,
            showButtons : true
        }
    });

    //ASSERT

    expect(wrapper.find('[dusk="inbox_toggle_archive"]').exists()).toBe(true);
    wrapper.find('[dusk="inbox_toggle_archive"]').trigger('click');
    expect(methods.toggleArchive).toHaveBeenCalled();

  })

Answer 1

Just in case you land here with a similar problem, it turns out my issue with calling trigger('click') on my child component was because my @click listener was not on the root element in the child component

<template >

    <ToolTip :tooltip="tooltip message">
        <div ref="button" @click="clicked">
            <slot />
        </div>
    </ToolTip>

</template>

Moving it to the root element resolved it

<template >

    <ToolTip :tooltip="tooltip message" @click="clicked">
        <div ref="button">
            <slot />
        </div>
    </ToolTip>

</template>