Vue-test-utils: Provide an API to get wrapped refs

[LinusBorg]

What problem does this feature solve?

we currently have wrapper.find() which can be used to select an element by a CSS selector, or find a component instance by name/constructor. Find returns a Wrapper for the item that was found.

We don't have a similar way of using a ref. We can do:

wrapper.vm.$refs.myElement

But that will give use the plain element, not a wrapped version, so we can't use the Wrapper's helpers on this element.

The same is true for component refs, of course

What does the proposed API look like?

wrapper.ref('refName') // => Returns instance of Wrapper

// alternatively we could stay true to the Vue syntax here, if technically possible:
wrapper.$refs.refName // => Returns instance of Wrapper

[eddyerburgh]

We actually do support ref selectors:

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

It was discussed in this thread—https://github.com/vuejs/vue-test-utils/issues/67

We should probably improve the docs to improve visibility.

[LinusBorg]

Oh, great!

[dennythecoder]

I really like @LinusBorg's suggestion here:

// alternatively we could stay true to the Vue syntax here, if technically possible:
wrapper.$refs.refName // => Returns instance of Wrapper

Doesn't appear to be difficult to implement, but I think it'd be nice to pull one or more wrappers from the usage of wrapper.$refs. Curious about @matt-oconnell's thoughts

[eddyerburgh]

I think we should keep the find and findAll methods for traversing the rendered nodes. Since we already support a ref selector in find, I'm closing this issue.