vue.js vuetify: test-utils w Jest, как сопоставить текст при использовании значка

Question

при следующем сгенерированном html

<a href="#" class="primaryInversed v-btn v-btn--large v-btn--round"
   <div class="v-btn__content">STOP!
      <i aria-hidden="true" class="v-icon v-icon--right material-icons">pause_circle_outline</i>
   </div>
</a>

при тестировании с помощью .toEqual Jest matcher

console.log(playLink.text())
expect(playLink.text()).toEqual("STOP!");

тест не пройден из-за значка

  console.log tests/unit/Heading.spec.js:46
    STOP!
          pause_circle_outline

Это не сбой, если я использую наблюдатель .toMatch

expect(playLink.text()).toMatch(/STOP!/);

Это нормальный тест, который нужно написать, или в любом случае использовать наблюдатель .toEqual? ​​

ПРИМЕЧАНИЕ: я использовал'mount', а не 'shallowMount', поскольку мне нужно генерировать html из компонентов vuetify

спасибо за отзыв

Answer 1

Один из методов - обернуть текстовое содержимое <v-btn> в <span> и использовать wrapper.find(selector), чтобы выбрать <span>, чтобы получить его текст:

foo.vue template:

<v-btn>
  <span class="text">STOP!</span>
  <v-icon>pause_circle_outline</v-icon>
</v-btn>

foo.spec.js

it('contains the expected text', () => {
  expect(wrapper.find('.text').text()).toEqual('STOP!');
});

демо