Description
Subject of the issue
Trying to find an Element
by its ref
gives a deprecation warning.
Steps to reproduce
Consider this component:
<template>
<div>
<div ref="child" />
</div>
</template>
If I want to find the "child" element, I'd like to be able to write:
wrapper.find({ref: 'child'})
However, if I do this, then I get a deprecation warning, because my selector isn't a DOM_SELECTOR
(it's a REF_SELECTOR
).
On the other hand, if I do what the deprecation warning suggests and use findComponent()
, then the test fails, because findAllComponents()
filters for isVueWrapper
, which fails for an Element
.
Expected behaviour
I should be able to use find({ref: ''})
to target an Element
without a deprecation warning, or use findComponent({ref: ''})
, as suggested.
Actual behaviour
I get deprecation errors in my tests.
Possible Solution
The obvious workaround is to not use a ref
to target the Element
, but it's not ideal, since a ref
is a nice, syntactic non-style-based way of targeting an element for testing, which aligns with Vue's own syntax (as opposed to adding eg a data-test
attribute or similar).