vue.js vuetify : test-utils w Jest how to match text when using icon

Question

given the following generated 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>

when I test with the .toEqual Jest matcher

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

test is failing because of the icon

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

It foes not fail if I use the .toMatch watcher

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

Is it the normal test to be written or is there anyway to use the .toEqual watcher ?

NOTE : I used 'mount' and not 'shallowMount' as I need to generate html from vuetify components

thanks for feedback

Answer 1

One technique is to wrap the <v-btn>'s text content in a <span>, and use wrapper.find(selector) to select the <span> to get its text:

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!');
});

demo