fix(findComponent): allow finding top-level component (#1496)

* allow finding top-level component when findComponent is chained
from dom node rendered by child

Author: xanf

src/domWrapper.ts

@@ -22,7 +22,11 @@ export class DOMWrapper<NodeType extends Node> extends BaseWrapper<NodeType> {
   }
 
   getCurrentComponent() {
-    return this.element.__vueParentComponent
+    let component = this.element.__vueParentComponent
+    while (component?.parent?.vnode.el === this.element) {
+      component = component.parent
+    }
+    return component
   }
 
   find<K extends keyof HTMLElementTagNameMap>(

tests/findComponent.spec.ts

@@ -510,5 +510,34 @@ describe('findComponent', () => {
           .classes('inside')
       ).toBe(true)
     })
+
+    it('finds top component when searching from nested node', () => {
+      const DeepNestedComponent = defineComponent({
+        template: '<div class="deep-nested"></div>'
+      })
+
+      const NestedComponent = defineComponent({
+        components: { DeepNestedComponent },
+        template: '<deep-nested-component />'
+      })
+
+      const RootComponent = defineComponent({
+        components: { NestedComponent },
+        template: '<nested-component />'
+      })
+
+      const wrapper = mount(RootComponent)
+      expect(
+        wrapper.find('.deep-nested').findComponent(DeepNestedComponent).exists()
+      ).toBe(true)
+
+      expect(
+        wrapper.find('.deep-nested').findComponent(NestedComponent).exists()
+      ).toBe(true)
+
+      expect(
+        wrapper.find('.deep-nested').findComponent(RootComponent).exists()
+      ).toBe(true)
+    })
   })
 })