fix: allow find stubbed functional component by name

vuejs · Apr 7, 2021 · ba86ef3 · ba86ef3
1 parent 62dec1c
commit ba86ef3
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 8 deletions.
diff --git a/packages/test-utils/src/matches.js b/packages/test-utils/src/matches.js
@@ -10,7 +10,7 @@ function vmMatchesName(vm, name) {
   // We want to mirror how Vue resolves component names in SFCs:
   // For example, <test-component />, <TestComponent /> and `<testComponent />
   // all resolve to the same component
-  const componentName = (vm.$options && vm.$options.name) || ''
+  const componentName = vm.name || (vm.$options && vm.$options.name) || ''
   return (
     !!name &&
     (componentName === name ||
@@ -56,13 +56,7 @@ export function matches(node, selector) {
     return element && element.matches && element.matches(selector.value)
   }
 
-  const isFunctionalSelector = isConstructor(selector.value)
-    ? selector.value.options.functional
-    : selector.value.functional
-
-  const componentInstance = isFunctionalSelector
-    ? node[FUNCTIONAL_OPTIONS]
-    : node.child
+  const componentInstance = node[FUNCTIONAL_OPTIONS] || node.child
 
   if (!componentInstance) {
     return false

diff --git a/test/specs/wrapper/find.spec.js b/test/specs/wrapper/find.spec.js
@@ -257,6 +257,28 @@ describeWithShallowAndMount('find', mountingMethod => {
     }
   })
 
+  itSkipIf(
+    vueVersion < 2.3,
+    'returns functional component with name by name',
+    () => {
+      const TestFunctionalComponent = {
+        render: h => h('div'),
+        functional: true,
+        name: 'test-functional-component'
+      }
+      const TestComponent = {
+        template: '<div><test-functional-component /></div>',
+        components: {
+          TestFunctionalComponent
+        }
+      }
+      const wrapper = mountingMethod(TestComponent)
+      expect(
+        wrapper.find({ name: 'test-functional-component' }).exists()
+      ).toEqual(true)
+    }
+  )
+
   it('returns extended functional component', () => {
     const TestFunctionalComponent = Vue.extend({
       render: h => h('div'),