Child components <!----> - render child components - vue test utils

Question

I'm trying to unit test my home page with Vue Test Utils, but my child components aren't being rendered

I'm using mount, so my child components shouldn't being stubed, but I don't know what is this: <!---->

test

it('should be rendered properly', () => {
  const wrapper = mount(Home, { store })

  const html = wrapper.html()

  console.log(wrapper.html())

  expect(html).toMatch('Selecione a opção desejada')
})

wrapper.hmtl()

 <div>
    <!---->
    <div class="container container--fluid">
      <!---->
      <div class="mb-8">
        <h2 class="text-subtitle-1 text-md-h2 pb-3">
          Selecione a opção desejada:
        </h2>
        <div class="row"></div>
      </div>
      <div class="text-subtitle-1 text-md-h2 mb-3">
        Próximos Agendamentos
      </div>
      <div class="row">
        <div class="col-md-4 col-12">
          <!---->
        </div>
      </div>
    </div>
  </div>

Home.vue template

<template>
  <div>
    <page-header
      :subtitle="subtitleHeader"
    >
      <template #bottom-element>
        <v-col class="py-0">
          <need-update-alert
            v-if="needUpdate"
          />
        </v-col>
      </template>
    </page-header>
    <v-container fluid>
      <div
        v-if="hasImmediateCareAccess"
        class="mb-8"
      >
        <h2 class="text-subtitle-1 text-md-h2 pb-3">
          <b>Amparo Agora</b>
        </h2>
        <v-row>
          <v-col>
            <option-card v-bind="immediateCare"/>
          </v-col>
        </v-row>
      </div>
      <div class="mb-8">
        <h2 class="text-subtitle-1 text-md-h2 pb-3">
          Selecione a opção desejada:
        </h2>
        <v-row>
          <v-col
            v-for="(card, key) in showableCards"
            :key="key"
            cols="12"
            :md="card.md"
            lg="4"
          >
            <option-card v-bind="card" />
          </v-col>
        </v-row>
      </div>
      <div class="text-subtitle-1 text-md-h2 mb-3">
        Próximos Agendamentos
      </div>
      <v-row v-if="loadingAppointments">
        <v-col
          cols="12"
          md="4"
        >
          <loading-appointments />
        </v-col>
      </v-row>
      <v-row
        v-else-if="hasAppointments"
      >
        <v-col
          class="d-flex align-items-stretch align-content-stretch"
          v-for="item in validAppointments"
          :key="item.id"
          cols="12"
          md="6"
          lg="4"
        >
          <next-appointment-card
            :appointment="item"
          />
        </v-col>
        <v-col
          cols="12"
          md="4"
        >
        </v-col>
      </v-row>
      <v-row
        v-else
      >
        <v-col
          cols="12"
          md="4"
        >
          <no-appointment-card />
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

Answer 1

This was caused by my import

Importing this way does not work correctly

But importing this way works