diff --git a/packages/create-instance/create-component-stubs.js b/packages/create-instance/create-component-stubs.js index 7185ab648..f2153ff3d 100644 --- a/packages/create-instance/create-component-stubs.js +++ b/packages/create-instance/create-component-stubs.js @@ -77,15 +77,8 @@ function getScopedSlotRenderFunctions(ctx: any): Array { // In Vue 2.6+ a new v-slot syntax was introduced // scopedSlots are now saved in parent._vnode.data.scopedSlots // We filter out _normalized, $stable and $key keys - if ( - ctx && - ctx.$options && - ctx.$options.parent && - ctx.$options.parent._vnode && - ctx.$options.parent._vnode.data && - ctx.$options.parent._vnode.data.scopedSlots - ) { - const slotKeys: Array = ctx.$options.parent._vnode.data.scopedSlots + if (ctx && ctx.$vnode && ctx.$vnode.data && ctx.$vnode.data.scopedSlots) { + const slotKeys: Array = ctx.$vnode.data.scopedSlots return keys(slotKeys).filter( x => x !== '_normalized' && x !== '$stable' && x !== '$key' ) @@ -131,7 +124,7 @@ export function createStubFromComponent( ? context.children : this.$options._renderChildren || getScopedSlotRenderFunctions(this).map(x => - this.$options.parent._vnode.data.scopedSlots[x]({}) + this.$vnode.data.scopedSlots[x]({}) ) ) } diff --git a/test/resources/components/component-with-v-slot-syntax-nested.vue b/test/resources/components/component-with-v-slot-syntax-nested.vue new file mode 100644 index 000000000..a6f22a1bd --- /dev/null +++ b/test/resources/components/component-with-v-slot-syntax-nested.vue @@ -0,0 +1,19 @@ + + + diff --git a/test/specs/shallow-mount.spec.js b/test/specs/shallow-mount.spec.js index 4e5ce3ffe..63b7a3f00 100644 --- a/test/specs/shallow-mount.spec.js +++ b/test/specs/shallow-mount.spec.js @@ -9,6 +9,7 @@ import ComponentWithLifecycleHooks from '~resources/components/component-with-li import ComponentWithoutName from '~resources/components/component-without-name.vue' import ComponentAsAClassWithChild from '~resources/components/component-as-a-class-with-child.vue' import ComponentWithVSlotSyntax from '~resources/components/component-with-v-slot-syntax.vue' +import ComponentWithVSlotSyntaxNested from '~resources/components/component-with-v-slot-syntax-nested.vue' import ComponentWithVSlot from '~resources/components/component-with-v-slot.vue' import RecursiveComponent from '~resources/components/recursive-component.vue' import { vueVersion } from '~resources/utils' @@ -128,6 +129,20 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => { ) }) + it('renders SFC with named slots with v-slot syntax nested in a div', () => { + const wrapper = shallowMount(ComponentWithVSlotSyntaxNested) + + expect(wrapper.find(ComponentWithVSlot).exists()).toEqual(true) + expect(wrapper.find('.new-example').exists()).toEqual(true) + expect(wrapper.html()).toEqual( + '
\n' + + ' \n' + + '

new slot syntax

\n' + + '
\n' + + '
' + ) + }) + it('renders SFC with named slots with v-slot syntax', () => { const wrapper = shallowMount(ComponentWithVSlotSyntax)