diff --git a/packages/test-utils/src/matches.js b/packages/test-utils/src/matches.js
index 477d66cd1..6acba7661 100644
--- a/packages/test-utils/src/matches.js
+++ b/packages/test-utils/src/matches.js
@@ -3,16 +3,20 @@ import {
COMPONENT_SELECTOR,
FUNCTIONAL_OPTIONS
} from 'shared/consts'
-import { isConstructor } from 'shared/validators'
+import { isConstructor, isFunctionalComponent } from 'shared/validators'
import { capitalize, camelize } from 'shared/util'
function vmMatchesName(vm, name) {
// We want to mirror how Vue resolves component names in SFCs:
// For example, , and `
// all resolve to the same component
- const componentName = vm.name || (vm.$options && vm.$options.name) || ''
+ const componentName = isFunctionalComponent(vm)
+ ? vm.name
+ : vm.$options && vm.$options.name
+
return (
!!name &&
+ !!componentName &&
(componentName === name ||
// testComponent -> TestComponent
componentName === capitalize(name) ||
diff --git a/test/resources/components/component-with-name-prop.vue b/test/resources/components/component-with-name-prop.vue
new file mode 100644
index 000000000..394222356
--- /dev/null
+++ b/test/resources/components/component-with-name-prop.vue
@@ -0,0 +1,12 @@
+
+
+
+
+
diff --git a/test/specs/wrapper/find.spec.js b/test/specs/wrapper/find.spec.js
index 5c7c34483..2e53577ee 100644
--- a/test/specs/wrapper/find.spec.js
+++ b/test/specs/wrapper/find.spec.js
@@ -3,6 +3,7 @@ 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 ComponentWithNameProp from '~resources/components/component-with-name-prop.vue'
import ComponentWithoutName from '~resources/components/component-without-name.vue'
import ComponentWithSlots from '~resources/components/component-with-slots.vue'
import ComponentWithVFor from '~resources/components/component-with-v-for.vue'
@@ -556,6 +557,15 @@ describeWithShallowAndMount('find', mountingMethod => {
expect(wrapper.find({ name: 'CamelCase' }).name()).toEqual('camel-case')
})
+ it('returns a Wrapper matching a component name if Component has a name prop', () => {
+ const wrapper = mountingMethod(ComponentWithNameProp, {
+ propsData: { name: 'prop1' }
+ })
+ expect(
+ wrapper.findComponent({ name: 'component-with-name-prop' }).vnode
+ ).toBeTruthy()
+ })
+
it('returns Wrapper of Vue Component matching the ref in options object', () => {
const wrapper = mountingMethod(ComponentWithChild)
expect(wrapper.find({ ref: 'child' }).isVueInstance()).toEqual(true)