[Unit Tests] V-hover has no content

[skoenfaelt]

Hello,
I want to bring some unit tests into my nuxt vuetify app.

My unit tests are based on jest (vue test utils). After crashing in several jest parsing errors I faced that my testable element, which has data-testid="someName", does not exist in my test of that component.

Previous Issue

My HTML looks like this:

<template>
  <div>
    <div class="ml-2 text-h5">{{ $t('common.createTicket') }}</div>
    <v-row class="mt-n2">
      <v-col
        v-for="ticketType in ticketTypes"
        :key="ticketType.id"
        cols="12"
        lg="4"
      >
        <v-hover v-slot="{ hover }">
          <v-card
            :elevation="hover ? 16 : 2"
            height="100%"
            nuxt
            exact
            :data-test="`typeBasedTicketCard-${ticketType.id}`"
            :to="
              localePath(
                `/dashboard/product/${productId}/ticket/wizard?type=${ticketType.id}`
              )
            "
          >
            <v-card-title>
              <h4>{{ $t(ticketType.title) }}</h4>
            </v-card-title>
            <v-card-text>
              {{ $t(ticketType.description) }}
            </v-card-text>
          </v-card>
        </v-hover>
      </v-col>
    </v-row>
  </div>
</template>

while my snapshot looks like

<div>
  <div class=\"ml-2 text-h5\">common.createTicket</div>
  <v-row class=\"mt-n2\">
    <v-col cols=\"12\" lg=\"4\">
      <v-hover></v-hover>
    </v-col>
    <v-col cols=\"12\" lg=\"4\">
      <v-hover></v-hover>
    </v-col>
    <v-col cols=\"12\" lg=\"4\">
      <v-hover></v-hover>
    </v-col>
  </v-row>
</div>

As you see the v-hover has no content. But the Browser output and E2E tests via nightwatch work as expected.

Could you give some assistance or clarify why the v-hover don't render the content?

[skoenfaelt]

Obsolet