fix: make scoped slots rendering consistent for stubs (#2068)

Co-authored-by: Illya <iklymov@gitlab.com>
vuejs · Jun 5, 2023 · 6b73d4b · 6b73d4b
1 parent 0d4543d
commit 6b73d4b
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 13 deletions.
diff --git a/packages/create-instance/create-component-stubs.js b/packages/create-instance/create-component-stubs.js
@@ -77,16 +77,8 @@ function getScopedSlotRenderFunctions(ctx: any): Array<string> {
   // 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<string> = ctx.$options.parent._vnode.data.scopedSlots
-    return keys(slotKeys).filter(
+  if (ctx.$vnode.data.scopedSlots) {
+    return keys(ctx.$vnode.data.scopedSlots).filter(
       x => x !== '_normalized' && x !== '$stable' && x !== '$key'
     )
   }
@@ -130,9 +122,15 @@ export function createStubFromComponent(
         context
           ? context.children
           : this.$options._renderChildren ||
-              getScopedSlotRenderFunctions(this).map(x =>
-                this.$options.parent._vnode.data.scopedSlots[x]({})
-              )
+              getScopedSlotRenderFunctions(this)
+                .map(x => {
+                  let result = null
+                  try {
+                    result = this.$vnode.data.scopedSlots[x]({})
+                  } catch (e) {}
+                  return result
+                })
+                .filter(Boolean)
       )
     }
   }

diff --git a/test/specs/shallow-mount.spec.js b/test/specs/shallow-mount.spec.js
@@ -164,6 +164,38 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
     )
   })
 
+  it('renders named slots with v-slot syntax when they are wrapped', () => {
+    const localVue = createLocalVue()
+    localVue.component('Foo', {
+      template: '<div><slot name="newSyntax" /></div>'
+    })
+    const TestComponent = {
+      template: `
+        <div>
+          <Foo>
+            <template v-slot:newSyntax>
+              <p class="new-example">text</p>
+            </template>
+          </Foo>
+        </div>
+      `
+    }
+    const wrapper = shallowMount(TestComponent, {
+      localVue
+    })
+    expect(wrapper.find({ name: 'Foo' }).exists()).toEqual(true)
+    expect(wrapper.find('.new-example').exists()).toEqual(true)
+    expect(wrapper.html()).toEqual(
+      [
+        '<div>',
+        '  <foo-stub>',
+        '    <p class="new-example">text</p>',
+        '  </foo-stub>',
+        '</div>'
+      ].join('\n')
+    )
+  })
+
   it('renders named slots when they are located inside component with v-if', () => {
     const localVue = createLocalVue()
     localVue.component('Foo', {