CODEWITHSUNDEEP
javascriptvue.js
NoorJafri
NoorJafri

Reputation: 1827

Testing for Nested divs using Vue Test Utils

So I have this shallowMounted vue component:

<div class="card p-relative">
  <div class="card-header">
    <div class="card-title h4">
      a cute title
      <!---->
      <!---->
    </div>
  </div>
  <!---->
  <div class="card-body">
    <h3 class="circle" style="background-color: rgb(237, 15, 59);"></h3>
  </div>
  <div>
    <h6 class="card-body">Value: 35</h6>
  </div>
</div>

I am doing a shallowMount:

const wrapper = shallowMount(Component, { proposData: { 'shape': 'circle'}})

Later trying to find all the classes, so I can somehow find the class circle. But what I got:

const results = wrapper.classes()
console.log(results) // ['card', 'p-relative']

How to find the h3 or class 'circle' :/

Completely Noob to frontend. Please forgive for using wrong vocabulary.

Upvotes: 1

Views: 2087

Answers (1)

NoorJafri
NoorJafri

Reputation: 1827

As mentioned in https://vue-test-utils.vuejs.org/api/selectors.html to access direct descendants.

I did the following:

    const shape = wrapper.find('.card-body > h3')
    console.log(shape.classes()) //['circle']

Upvotes: 1

Related Questions