feat: return ComponentPublicInstance from findComponent

Author: dobromir-hristov

src/utils/find.ts

@@ -1,4 +1,4 @@
-import { VNode } from 'vue/dist/vue'
+import { VNode, ComponentPublicInstance } from 'vue'
 
 function matches(node: VNode, selector): boolean {
   if (typeof selector === 'string') {
@@ -21,7 +21,7 @@ function aggregateChildren(nodes, children) {
   }
 }
 
-function findAllVNodes(vnode: VNode, selector: any) {
+function findAllVNodes(vnode: VNode, selector: any): VNode[] {
   const matchingNodes = []
   const nodes = [vnode]
   while (nodes.length) {
@@ -36,6 +36,8 @@ function findAllVNodes(vnode: VNode, selector: any) {
   return matchingNodes
 }
 
-export function find(root: VNode, selector: any) {
-  return findAllVNodes(root, selector)
+export function find(root: VNode, selector: any): ComponentPublicInstance[] {
+  return findAllVNodes(root, selector).map(
+    (vnode: VNode) => vnode.component.proxy
+  )
 }

src/vue-wrapper.ts

@@ -76,7 +76,7 @@ export class VueWrapper implements WrapperAPI {
   }
 
   html() {
-    return this.appRootNode.innerHTML
+    return this.parentElement.innerHTML
   }
 
   text() {
@@ -102,20 +102,22 @@ export class VueWrapper implements WrapperAPI {
     return result
   }
 
-  findComponent(selector: FindComponentSelector): any {
+  findComponent(selector: FindComponentSelector): ComponentPublicInstance {
     if (typeof selector === 'object' && 'ref' in selector) {
-      return this.componentVM.$refs[selector.ref]
+      return this.componentVM.$refs[selector.ref] as ComponentPublicInstance
     }
     const result = find(this.componentVM.$.subTree, selector)
-    return result.length ? result[0] : result
+    return result.length ? result[0] : undefined
   }
 
-  findAllComponents(selector: FindAllComponentsSelector): any[] {
+  findAllComponents(
+    selector: FindAllComponentsSelector
+  ): ComponentPublicInstance[] {
     return find(this.componentVM.$.subTree, selector)
   }
 
   findAll<T extends Element>(selector: string): DOMWrapper<T>[] {
-    const results = this.appRootNode.querySelectorAll<T>(selector)
+    const results = this.parentElement.querySelectorAll<T>(selector)
     return Array.from(results).map((x) => new DOMWrapper(x))
   }
 

tests/findComponent.spec.ts

@@ -19,10 +19,10 @@ describe('findComponent', () => {
     // find by ref
     expect(wrapper.findComponent({ ref: 'b' })).toBeTruthy()
     // find by DOM selector
-    expect(wrapper.findComponent('.C').type.name).toEqual('ComponentC')
-    expect(wrapper.findComponent({ name: 'Hello' }).el.textContent).toBe(
+    expect(wrapper.findComponent('.C').$options.name).toEqual('ComponentC')
+    expect(wrapper.findComponent({ name: 'Hello' }).$el.textContent).toBe(
       'Hello world'
     )
-    expect(wrapper.findComponent(Hello).el.textContent).toBe('Hello world')
+    expect(wrapper.findComponent(Hello).$el.textContent).toBe('Hello world')
   })
 })