Question

关于如何通过官方docs使用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>的存在？

如何使用Vue Test Utils测试Vue子组件中是否存在HTML元素？

0 个答案: