Как проверить наличие элемента HTML в дочернем компоненте Vue, используя Vue Test Utils? - PullRequest
Новая
       28

Как проверить наличие элемента HTML в дочернем компоненте Vue, используя Vue Test Utils?

0 голосов
/ 18 марта 2020

Довольно ясно, как проверить на наличие дочернего компонента с помощью Vue Test Utils через официальные документы .

Однако неясно, как проверить на существование элемента HTML внутри этого дочернего элемента.

Скажем, у меня есть следующий дочерний компонент. 

<template>
  <div>Child<span>Random</span></div>
</template>

<script>
export default {
  name: "Child"
}
</script>

И у меня есть следующий родительский компонент. 

<template>
  <div>
    <span v-show="showSpan">
      Parent Component
    </span>
    <Child v-if="showChild" />
  </div>
</template>

<script>
import Child from "./Child.vue"

export default {
  name: "Parent",

  components: { Child },

  data() {
    return {
      showSpan: false,
      showChild: false
    }
  }
}
</script>

Следующий фрагмент будет о том, как мне найти существование дочернего компонента. 

it("renders a Child component", () => {
  const wrapper = shallowMount(Parent, {
    data() {
      return { showChild: true }
    }
  })

  expect(wrapper.find({ name: "Child" }).exists()).toBe(true)
})

Однако мой вопрос заключается в том, как бы я утверждал о существовании <span>Random</span> если бы я хотел?

...