diff --git a/packages/test-utils/src/matches.js b/packages/test-utils/src/matches.js
index 82991d888..8f11a2d33 100644
--- a/packages/test-utils/src/matches.js
+++ b/packages/test-utils/src/matches.js
@@ -4,10 +4,22 @@ import {
FUNCTIONAL_OPTIONS
} from 'shared/consts'
import { isConstructor } from 'shared/validators'
+import { capitalize, camelize } from 'shared/util'
-export function vmMatchesName(vm, name) {
+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.$options && vm.$options.name) || ''
return (
- !!name && (vm.name === name || (vm.$options && vm.$options.name === name))
+ !!name &&
+ (componentName === name ||
+ // testComponent -> TestComponent
+ componentName === capitalize(name) ||
+ // test-component -> TestComponent
+ componentName === capitalize(camelize(name)) ||
+ // same match as above, but the component name vs query
+ capitalize(camelize(componentName)) === name)
)
}
diff --git a/test/specs/wrapper/find.spec.js b/test/specs/wrapper/find.spec.js
index 809eca23b..d457d0e32 100644
--- a/test/specs/wrapper/find.spec.js
+++ b/test/specs/wrapper/find.spec.js
@@ -431,6 +431,33 @@ describeWithShallowAndMount('find', mountingMethod => {
)
})
+ it('returns a Wrapper matching a camelCase name option and a Pascal Case component name ', () => {
+ const component = {
+ name: 'CamelCase',
+ render: h => h('div')
+ }
+ const wrapper = mountingMethod(component)
+ expect(wrapper.find({ name: 'camelCase' }).name()).to.equal('CamelCase')
+ })
+
+ it('returns a Wrapper matching a kebab-case name option and a Pascal Case component name ', () => {
+ const component = {
+ name: 'CamelCase',
+ render: h => h('div')
+ }
+ const wrapper = mountingMethod(component)
+ expect(wrapper.find({ name: 'camel-case' }).name()).to.equal('CamelCase')
+ })
+
+ it('returns a Wrapper matching a Pascal Case name option and a kebab-casecomponent name ', () => {
+ const component = {
+ name: 'camel-case',
+ render: h => h('div')
+ }
+ const wrapper = mountingMethod(component)
+ expect(wrapper.find({ name: 'CamelCase' }).name()).to.equal('camel-case')
+ })
+
it('returns Wrapper of Vue Component matching the ref in options object', () => {
const wrapper = mountingMethod(ComponentWithChild)
expect(wrapper.find({ ref: 'child' }).isVueInstance()).to.equal(true)