How to test drop zone component in Cypress?

[DavidGheorghe]

I have this Vue3 component and I'm trying to test if the dropped files are emitted, but it does not work.

import { WEIcon } from '@/components/primary';
import { computed, ref } from 'vue';
import { GlyphIcon } from 'webui-base';
import { MimeType, isFileTypeValid } from './ImageUploaderUtils';

const props = withDefaults(defineProps<{
    uuid:              string,
    acceptedFileTypes: MimeType[],
    defaultLabel?:     string,
    draggingLabel?:    string,
    icon?:             GlyphIcon,
    uploadingLabel?:   string,
    uploading?:        boolean,
    multipleFilesAllowed?: boolean
}>(), {
    defaultText:   '',
    draggingText:  '',
    icon:          GlyphIcon.ICON_UPLOAD,
    uploadingText: '',
    uploading:     false,
    multipleFilesAllowed: false
});

const emits = defineEmits<{
    (event: 'updateFile', file: File): void
}>();

function handleDropFile(event: DragEvent) {
    draggedOver.value = false;
    if (event.dataTransfer) {
        for (let i = 0; i < event.dataTransfer.files.length; i++) {
            const currentFile = event.dataTransfer.files[i];
            /** Send the file if attaching multiple files is allowed, otherwise check if the index is the first one. */
            const shouldSendFile: boolean = (props.multipleFilesAllowed === false && i < 1) || (props.multipleFilesAllowed);
            if (isFileTypeValid(currentFile.type, props.acceptedFileTypes) && shouldSendFile) {
                emits('updateFile', currentFile);
            }
        }
    }
}
</script>

<template>
    <div
        :id="`${uuid}-dropzone-container`"
        class="drop-zone-container"
        :class="{'dragging': draggedOver}"
        dropzone="copy"
        :for="`${uuid}-input`"
        @dragenter.prevent="draggedOver = true"
        @dragstart.prevent="draggedOver = true"
        @dragover.prevent="draggedOver = true"
        @dragleave.prevent="draggedOver = false"
        @dragend.prevent="draggedOver = false"
        @drop.prevent="handleDropFile"
        data-test="we-drop-zone"
    >
        <div 
            v-if="uploading"
            data-test="we-drop-zone-animation"
        >
            &#127762;
        </div>
        <WEIcon
            v-else
            class="icon"
            :icon="icon"
        />
        <span class="text">{{ dropzoneText }}</span>
    </div>
</template>

And this is the Cypress test:

it('selects a file', () => {
        const onUpdateFile = cy.spy().as('onUpdateFile');
        cy.mount(() => (
            <WEDropZone
                uuid='001'
                acceptedFileTypes={imageMimeTypes}
                defaultLabel={defaultLabel}
                draggingLabel={draggingLabel}
                uploadingLabel={uploadingLabel}
                uploading={true}
                onUpdateFile={onUpdateFile}
            />
        ));
        cy.get(dropZoneSelector).selectFile({
            contents: imagePath,
            fileName: imageName 
        }, {action: 'drag-drop'}).then($el => {

        });
    });

In the example, I know it is impossible to get the files from the yielded element of cy.get(dropZoneSelector) because I am handling the files on drop event.
So, my question is how to get the files from the drop event?

I am using Cypress version ^12.7.0.