VueJs 3 TDD a component which depend on external library component

I'm trying to develop a VueJs 3 component (and composition API) with TDD approach.

The UI : It's a Pop Up that contain a file uploader. The user have to select a file, then a validation button should appears. If the file is a .csv, the button should be active, otherwise the button is disabled and and error message will be displayed above.

The issue is : The popup component and the file uploader component are in an third part library (its components are prefixed by m-).

The component emit the event "file-added", I work with this event in order to configure the state in the checkFileValidity method that set the isCsvFileStaged variable that determine the visibility and availability of the button.

My first approach was : "Hm, I will try to stub the m-file-uploader and emit the event with a fake file" but, I failed. Then I tried to set the isCsvFileStaged variable to true before the test but :

1. I failed (Can we use wrapper.setData with composition API ? If yes, how ?)
2. But, above all, I think this way is like "testing the implementation" and I think it's a bad idea. So I really want to follow the Art's Rules and that's why I wrote here.

There is the code :

<template>
<!-- This is the modal in the third-part library -->
  <m-modal v-if="isOpen" data-test="modal">
    <div data-test="modal-content">
        <!-- This is the file picker in the third-part library  -->
      <m-file-uploader
        data-test="file-uploader"
        :label="'Pick a file'"
        :allowedExtensions="['csv']"
        @file-added="checkFileValidity($event)"
      />
      <!-- This button should appear when a file is staged and be enable when the file staged is a .csv -->
      <button
        type="button"
        data-test="upload-button"
        v-if="isCsvFileStaged"
        :disabled="!isCsvFileStaged"
        <span>Import the file</span>
      </button>
    </div>
  </m-modal>
</template>

<script lang="ts">
import { defineComponent, ref, Ref } from 'vue'

export default defineComponent({
  name: 'TddCsvImportModal',
  props: {
    isOpen: {
      type: Boolean,
      required: true
    }
  },
  emits: ['confirm', 'close-modal'],
  setup () {
    const isCsvFileStaged: Ref<boolean> = ref(false)
    const isCsvFile = (file: File): boolean => file.type === 'text/csv'

    const checkFileValidity = (fileList: FileList): void => {
      isCsvFileStaged.value = (isCsvFile(fileList[0])) ? true : false
    }

    return {
      isCsvFileStaged,
      checkFileValidity
    }
  }
})
</script>

And the test file :

import { mount } from '@vue/test-utils'
import CsvImportModal from '@/modules/group/components/TddCsvImportModal.vue'

describe('TddCsvImportModal.vue', () => {
  const wrapper = mount(CsvImportModal, {
    props: {
      isOpen: true
    }
  })

  it('should display an active upload button if a .csv file is uploaded', async () => {
    const uploadButton = wrapper.find('[data-test=upload-button]')
    
    expect(uploadButton.exists()).toBeTruthy()
    expect(uploadButton).not.toHaveProperty('disabled')
  })
})

How to deal with those elements ?

Moreover, I have some warnings in the console when I run test, I don't know how to fix this :

Thank you very much for reading me and I am grateful in advance for your help !