0

It's pretty clear on how to test for the existence of a child component using Vue Test Utils through the official docs.

However, it's unclear how to test for the existence of a HTML element within that child element.

Say I have the following Child component.

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

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

And I have the following Parent component. 

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

The following snippet would be how I would find the existence of the child component.

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

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

However, my question is, how would I assert the existence of <span>Random</span> if I wanted to?

ptk
  • 6,835
  • 14
  • 45
  • 91
  • 1
    In practice: by using `mount` instead of `shallowMount`. In theory: keep in mind when testing/evaluation of subcomponent contents falls under the responsibility of the parent component tests, you have left the realm of unit testing. You're actually doing a somewhat limited e2e test. Normally you should test the child component contents inside the child component unit test, by setting props on a mocked parent/context component. – tao Mar 18 '20 at 05:12
  • @tao I just gave mount a shot and it still doesn't seem to work :( – ptk Mar 18 '20 at 05:42
  • Try logging the contents of the child component. You might have a minor error/typo somewhere. `mount` should render the child components fully. How are you testing? Are you using [`wrapper.html()`](https://vue-test-utils.vuejs.org/api/wrapper/html.html) ? – tao Mar 18 '20 at 05:44

0 Answers0