vue.js vuetify : test-utils w Jest 如何在使用图标时匹配文本

Posted 2023-02-22

【中文标题】vue.js vuetify : test-utils w Jest 如何在使用图标时匹配文本

【英文标题】：vue.js vuetify : test-utils w Jest how to match text when using icon

【发布时间】：2019-02-01 16:11:47

【问题描述】：

给定以下生成的 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

感谢反馈

【参考方案1】：

一种技术是将<v-btn> 的文本内容包装在<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!');
);

demo