vue-test-utils finding button does not work with find option object

Question

According to the docs an element of a wrapper can be found by name.

Using a find option object, Vue Test Utils allows for selecting elements by a name of component on wrapper components.

and the example given is

const buttonWrapper = wrapper.find({ name: 'my-button' })
buttonWrapper.trigger('click')

In my vue component I have three buttons. I want to test function of all three buttons, but I don't want to use wrapper.findAll("button").at(1) to select the second button, because when the order of the buttons is changed, the test fails. So I decided to name each button and find them by name using the option object.

In my component I have:

<button class="button is-success" name="save-button">Opslaan</button>

In my test I have:

const button = wrappedAddSubject.find({name:"save-button"})

This returns undefined instead of the button. What am I doing wrong?

Answer 1

I think "name" refers to the name of the component, not the attribute "name" of html element.

For ex, if you have a component:

Vue.component('save-button', {
  template: "<button>Click</button>
})

you can find this component by its name using your syntax.