vue.js - 如何在 vue-test-utils 中获取按钮文本

Question

如何从找到的元素中检索按钮文本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 组件？

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

Answer 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();
  });
});