Can I select an element by ref using vue test utils

Question

If I have an image

<img class="pineapple" ref="pineapple" src="pineapple.jpg" />

Can I use the $ref

expect(wrapper.find($refs.pineapple).exists()).toBe(true)

instead of

expect(wrapper.find('.pineapple').exists()).toBe(true)

Answer 1

You can pass an object to the wrapper.find with the ref property.

expect(wrapper.find({ref: 'pineapple'}).exists()).toBe(true)

---

From the Vue Test util docs:

Find Option Object

Ref

Using a find option object, Vue Test Utils allows for selecting elements by $ref on wrapper components.

const buttonWrapper = wrapper.find({ ref: 'myButton' })
buttonWrapper.trigger('click')

https://vue-test-utils.vuejs.org/api/selectors.html