How do I retrieve the button text from a found element in vue-test-utils? I am using v1.0.0-beta.10
For example, in my vue file I have a button like:
el-button(@click.native="cancel",
          size="small",
          native-type="button") Cancel
Then in my tests:
const button = wrapper.findAll({
  name: "el-button"
})
console.log('buttonAll is', button.at(2).vnode.$attrs) // {}
I get an empty object. Even better, how can I directly query that Vue component based on button text?
You can retrieve the button text from a found element like this:
 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');
  });
});
                        This is how I query buttons by text
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();
  });
});
                        If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With