Question: How can you reference native UI elements in vue 3 and vue test utils without adding extra attributes to that UI element?
When testing vue components with vue 3 and vue test utils, I noticed that there wasn't really an elegant way to find UI elements. Since Vue 3, Vue Test Utils do not provide a way to use the ref attribute anymore on a native UI element like a button for example.
I know about these solutions:
<button data-test="button" ></button> or <button class="button"> </button>
But adding extra attributes or classes to the component just for the sake of testing the component doesn't feel like a solution. Also the error that the test throws is not very descriptive. For example when testing events Error: Cannot call trigger on an empty DOMWrapper.