Vue Testlng Library and Child Components

Question

I'm struggling to understand how I should be testing my parent/child components using the [Vue Testing Library][1].

I have a parent component called SavedCards which displays a child component (called SavedCard) for every saved card in an array i.e something like:

<script>
async function deleteCard(token: string) {
    applicationStore.deleteCard(token);
}
</script>

<template>
        <saved-card v-for="savedCard in getSavedCards" 
        @delete-card="deleteCard" 
        :savedCard="savedCard">
        </saved-card>
</template>

The child component displays a Delete button which when clicked emits the delete-card event which (in the Parent component) calls the deleteCard function - this then results in the card being delete and removed from the list.

I would like to write a test for this but I cannot workout how!

When the test (on the parent component) runs the DOM elements of the child aren't there i.e I get something like this:

<card
  class="saved-card"
  data-v-2778b5d8=""
  style="cursor: pointer;"
/>

So how do I get to that delete-card event in my test of the parent and make sure that after it is clicked the card disappears from view?

Can anyone offer up any advice as to how (using the Vue Testing Library) I should be writing this test?
[1]: https://testing-library.com/docs/