如何在 vue-test-utils 中获取按钮文本答案

【问题标题】：How to get button text in vue-test-utils如何在 vue-test-utils 中获取按钮文本
【发布时间】：2018-01-17 22:17:25
【问题描述】：

如何从vue-test-utils 中找到的元素中检索按钮文本？我正在使用 v1.0.0-beta.10

例如，在我的 vue 文件中，我有一个类似的按钮：

el-button(@click.native="cancel",
          size="small",
          native-type="button") Cancel

然后在我的测试中：

const button = wrapper.findAll({
  name: "el-button"
})

console.log('buttonAll is', button.at(2).vnode.$attrs) // {}

我得到一个空对象。更好的是，如何根据按钮文本直接查询那个 Vue 组件？

【问题讨论】：

标签： vue.js vue-test-utils

【解决方案1】：

您可以像这样从找到的元素中检索按钮文本：

 describe('Button', () => {
  let wrapper;
  beforeEach(() => {
    wrapper = mount(VueComponent);
  });
  it('has a button with text mazino', () => {
    let button = wrapper.find('.mazino');
    expect(button.text()).toBe('mazino');
  });
});

【讨论】：

不就是一个类选择器吗？我收到一个错误，其中 button 等于 ErrorWrapper { selector: '.Cancel' }
我没有抛出错误，但我找不到可以使用的按钮。你可以在上面看到我提到它是一个ErrorWrapper，所以我不能用它做任何事情。理想情况下，我想触发 click 事件。
如果我打电话给text()，我会收到这个错误：Error: [vue-test-utils]: cannot call wrapper.text() on a wrapper without an element
@writofmandamus 这意味着find 不成功。在渲染树中找不到您正在使用的选择器。
让按钮 = wrapper.findAll('.mazino');为我工作

【解决方案2】：

这就是我通过文本查询按钮的方式

function findByText (wrap, selector, text) {
  return wrap.findAll(selector).filter(n => n.text().match(text));
}

describe('Button', () => {
  let wrapper;
  beforeEach(() => {
    wrapper = mount(VueComponent);
  });
  it('has a button with text foo', () => {
    const button = findByText(wrapper, 'button', /foo/).at(0);
    expect(button.exists()).toBeTruthy();
  });
});

【讨论】：