Блог

Я пытаюсь модульно протестировать свою домашнюю страницу Vue Test Utils , но мои дочерние компоненты не отображаются

Я использую крепление, поэтому мои дочерние компоненты не должны быть заглушены, но я не знаю, что это такое: <!---->

тест

 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')
})
 

обертка.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>
  <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>
 

Это было вызвано моим импортом

Импорт таким образом работает неправильно

Но импорт таким образом работает