Merge pull request #238 from vuejs/issue-187

fix: findComponent with functional components

Author: lmiller1990

src/utils/find.ts

@@ -20,6 +20,10 @@ export function matches(
   // do not return none Vue components
   if (!node.component) return false
 
+  if (node.type === selector) {
+    return true
+  }
+
   if (typeof selector === 'string') {
     return node.el?.matches?.(selector)
   }

src/vueWrapper.ts

@@ -23,7 +23,8 @@ export class VueWrapper<T extends ComponentPublicInstance> {
     functionalEmits?: Record<string, unknown[]>
   ) {
     this.__app = app
-    this.rootVM = vm.$root!
+    // root is null on functional components
+    this.rootVM = vm?.$root
     this.componentVM = vm as T
     this.__setProps = setProps
     this.__functionalEmits = functionalEmits

tests/findComponent.spec.ts

@@ -1,4 +1,4 @@
-import { defineComponent, nextTick } from 'vue'
+import { defineComponent, h, nextTick } from 'vue'
 import { mount } from '../src'
 import Hello from './components/Hello.vue'
 import ComponentWithoutName from './components/ComponentWithoutName.vue'
@@ -269,4 +269,24 @@ describe('findComponent', () => {
     expect(wrapper.findComponent(compC).exists()).toBe(true)
     expect(wrapper.findComponent(SlotMain).exists()).toBe(true)
   })
+
+  it('finds a functional component', () => {
+    const Func = () => h('h2')
+    const wrapper = mount({
+      setup() {
+        return () => h('span', {}, h(Func))
+      }
+    })
+    expect(wrapper.findComponent(Func).exists()).toBe(true)
+  })
+
+  it('finds a functional component in a fragment', () => {
+    const Func = () => h('h2')
+    const wrapper = mount({
+      setup() {
+        return () => [h('span'), h('span', {}, h(Func))]
+      }
+    })
+    expect(wrapper.findComponent(Func).exists()).toBe(true)
+  })
 })