fix: correctly find functional components (#1835)

* fix: correctly find functional components * test: skip test in <2.6
vuejs · Apr 30, 2021 · c14d6fd · c14d6fd
1 parent 97fdf18
commit c14d6fd
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 3 deletions.
diff --git a/packages/test-utils/src/matches.js b/packages/test-utils/src/matches.js
@@ -56,7 +56,14 @@ export function matches(node, selector) {
     return element && element.matches && element.matches(selector.value)
   }
 
-  const componentInstance = node[FUNCTIONAL_OPTIONS] || node.child
+  const isFunctionalSelector = isConstructor(selector.value)
+    ? selector.value.options.functional
+    : selector.value.functional
+
+  const componentInstance =
+    (isFunctionalSelector ? node[FUNCTIONAL_OPTIONS] : node.child) ||
+    node[FUNCTIONAL_OPTIONS] ||
+    node.child
 
   if (!componentInstance) {
     return false

diff --git a/test/specs/create-local-vue.spec.js b/test/specs/create-local-vue.spec.js
@@ -67,7 +67,7 @@ describeWithShallowAndMount('createLocalVue', mountingMethod => {
   })
 
   itDoNotRunIf(
-    mountingMethod.name === 'shallowMount',
+    mountingMethod.name === 'shallowMount' || vueVersion < 2.6,
     'Router should work properly with local Vue',
     async () => {
       const localVue = createLocalVue()

diff --git a/test/specs/wrapper/find.spec.js b/test/specs/wrapper/find.spec.js
@@ -1,6 +1,7 @@
 import { compileToFunctions } from 'vue-template-compiler'
-import { createLocalVue } from 'packages/test-utils/src'
+import { createLocalVue, shallowMount } from 'packages/test-utils/src'
 import Vue from 'vue'
+import VueRouter from 'vue-router'
 import ComponentWithChild from '~resources/components/component-with-child.vue'
 import ComponentWithoutName from '~resources/components/component-without-name.vue'
 import ComponentWithSlots from '~resources/components/component-with-slots.vue'
@@ -17,6 +18,58 @@ import {
 import { itDoNotRunIf, itSkipIf } from 'conditional-specs'
 
 describeWithShallowAndMount('find', mountingMethod => {
+  itDoNotRunIf(
+    mountingMethod.name === 'shallowMount',
+    'returns a VueWrapper using a <router-view /> component',
+    async () => {
+      const localVue = createLocalVue()
+      localVue.use(VueRouter)
+      const TestComponentToFind = {
+        render: h => h('div'),
+        name: 'test-component-to-find'
+      }
+      const routes = [
+        {
+          path: '/a/b',
+          name: 'ab',
+          component: TestComponentToFind
+        }
+      ]
+      const router = new VueRouter({ routes })
+      const wrapper = mountingMethod(
+        {
+          template: '<router-view/>'
+        },
+        {
+          localVue,
+          router
+        }
+      )
+
+      await router.push('/a/b')
+
+      expect(wrapper.findComponent(TestComponentToFind).exists()).toBe(true)
+    }
+  )
+
+  it('findComponent in functional component', () => {
+    const Comp2 = {
+      name: 'test',
+      render(h) {
+        return h('div', 'test')
+      }
+    }
+    const Comp = {
+      name: 'Comp',
+      functional: true,
+      render(h) {
+        return h(Comp2)
+      }
+    }
+    const wrapper = shallowMount(Comp)
+    wrapper.getComponent(Comp2)
+  })
+
   it('returns a Wrapper matching tag selector passed', () => {
     const compiled = compileToFunctions('<div><p></p><p></p></div>')
     const wrapper = mountingMethod(compiled)