diff --git a/packages/test-utils/src/matches.js b/packages/test-utils/src/matches.js
index 959613472..d26980dd1 100644
--- a/packages/test-utils/src/matches.js
+++ b/packages/test-utils/src/matches.js
@@ -56,7 +56,12 @@ export function matches(node, selector) {
return element && element.matches && element.matches(selector.value)
}
- const componentInstance = node[FUNCTIONAL_OPTIONS] || node.child
+ // ignore the functional component if its a RouterView
+ // Find a good explanation comment why tahts the case, please help!
+ const componentInstance =
+ node[FUNCTIONAL_OPTIONS] && node[FUNCTIONAL_OPTIONS].name === 'RouterView'
+ ? node.child
+ : 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
index d8412ba8a..055779872 100644
--- a/test/specs/wrapper/find.spec.js
+++ b/test/specs/wrapper/find.spec.js
@@ -15,6 +15,7 @@ import {
isRunningChrome
} from '~resources/utils'
import { itDoNotRunIf, itSkipIf } from 'conditional-specs'
+import VueRouter from 'vue-router'
describeWithShallowAndMount('find', mountingMethod => {
it('returns a Wrapper matching tag selector passed', () => {
@@ -279,6 +280,40 @@ describeWithShallowAndMount('find', mountingMethod => {
}
)
+ itDoNotRunIf(
+ mountingMethod.name === 'shallowMount',
+ 'returns a VueWrapper using a 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: ''
+ },
+ {
+ localVue,
+ router
+ }
+ )
+
+ await router.push('/a/b')
+
+ expect(wrapper.findComponent(TestComponentToFind).exists()).toBe(true)
+ }
+ )
+
it('returns extended functional component', () => {
const TestFunctionalComponent = Vue.extend({
render: h => h('div'),