fix: do not crash findComponent if ref is pointing to html element (#817

)

* fix: do not crash if ref is pointing to html element

* docs: add warning about findComponent behaviour with ref

* chore: remove extra console.log

Co-authored-by: Adrià Fontcuberta <[email protected]>

Co-authored-by: Adrià Fontcuberta <[email protected]>

docs/api/index.md

@@ -1162,6 +1162,10 @@ test('findComponent', () => {
 })
 ```
 
+:::warning
+If `ref` in component points to HTML element, `findComponent` will return empty wrapper. This is intended behaviour
+:::
+
 **NOTE** `getComponent` and `findComponent` will not work on functional components, because they do not have an internal Vue instance (this is what makes functional components more performant). That means the following will **not** work:
 
 ```js

src/vueWrapper.ts

@@ -153,7 +153,7 @@ export class VueWrapper<T extends ComponentPublicInstance>
   ): VueWrapper<T> {
     if (typeof selector === 'object' && 'ref' in selector) {
       const result = this.vm.$refs[selector.ref]
-      if (result) {
+      if (result && !(result instanceof HTMLElement)) {
         return createWrapper(null, result as T)
       } else {
         return createWrapperError('VueWrapper')

tests/findComponent.spec.ts

@@ -47,7 +47,16 @@ describe('findComponent', () => {
   it('finds component by ref', () => {
     const wrapper = mount(compA)
     // find by ref
-    expect(wrapper.findComponent({ ref: 'hello' })).toBeTruthy()
+    expect(wrapper.findComponent({ ref: 'hello' }).exists()).toBe(true)
+  })
+
+  it('does not find plain dom element by ref', () => {
+    const ComponentWithRefOnDomElement = defineComponent({
+      template: '<div ref="hello">Hello!</div>'
+    })
+    const wrapper = mount(ComponentWithRefOnDomElement)
+
+    expect(wrapper.findComponent({ ref: 'hello' }).exists()).toBe(false)
   })
 
   it('finds component by dom selector', () => {