jestjsvuejs3stub

Vue3 stubbed component trigger event with params and get return value


I'm testing my component with jest. Inside it I have a custom component I stub:

function mountComponent(propsData, data) {
    const wrapper = mount(Upload, {
        props: propsData,
        global: {
            stubs: {
                myCustomComponent: true,
            },
            plugins: [router],
        },
        data,
    });

    return wrapper;
}

my usage of the custom componenet is:

<my-custom-component
    @upload="uploadMethod"
></my-custom-component>

I saw I can trigger the method uploadMethod by:

    const upload = wrapper.find('component-stub');
    upload.trigger('uploadMethod');

but my method - uploadmethod has both parameters and return value my question is how can I set the parameters and how can I get the return value?


Solution

  • my question is how can I set the parameters...

    Exactly like calling uploadMethod(...args) directly, except you add the event name as first parameter:

    const args = [param1, param2, param3];
    const upload = wrapper.find('component-stub');
    upload.trigger('uploadMethod', ...args);
    

    ... and how can I get the return value?

    You don't, because the subcomponent doesn't, either. You expect() that whatever should have happened in the parent component when uploadMethod is called actually happened.