子组件  - 渲染子组件 - vue 测试工具

Question

我正在尝试使用 Vue Test Utils 对我的主页进行单元测试，但我的子组件没有被渲染

我正在使用 mount，所以我的子组件不应该被存根，但我不知道这是什么：

测试

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

这是我导入造成的

以这种方式导入无法正常工作

但以这种方式导入有效

子组件  - 渲染子组件 - vue 测试工具

Child components  - render child components - vue test utils

javascript

unit-testing

nuxt.js

vue-test-utils

测试

wrapper.hmtl()

Home.vue 模板