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'),