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>的文本内容包装在<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

vue.js vuetify：test-utils w开玩笑使用图标时如何匹配文本

1 个答案: