unit-testing - 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 匹配器进行测试时

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”，因为我需要从 vuetify 组件生成 html

感谢您的反馈

Answer 1

一种技术是将<v-btn>的文本内容包装在 a 中<span>，并用于wrapper.find(selector)选择<span>以获取其文本：

foo.vue 模板：

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

演示