Child components <!----> - render child components

[Hoffmano]

Subject of the issue

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: <!---->

STACK OVERFLOW

Steps to reproduce

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>

Expected behaviour

I wanna that vue-test-utils render my child components

Actual behaviour

vue-test-utils is putting in place of my child components

[standbyoneself]

<!-- --> comes when you render a block using v-if and the condition is falsy. Why don't you provide the script section, only the template?