使用 Vue Test Utils 测试嵌套的 div

Question

所以我有这个shallowMounted vue 组件：

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

我正在做一个shallowMount：

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

后来试图找到所有的班级，所以我可以以某种方式找到班级圈。 但我得到的是：

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

如何找到 h3 或类“圆圈”：/

完全菜鸟到前端。 请原谅使用错误的词汇。

Answer 1

正如在https://vue-test-utils.vuejs.org/api/selectors.html 中提到的访问直接后代。

我做了以下事情：

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