fix: handle shallowMount on components with v-if and scoped slots (#1663)

Author: xanf

packages/create-instance/create-component-stubs.js

@@ -95,7 +95,7 @@ function resolveOptions(component, _Vue) {
 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 the _normalized and $stable key
+  // We filter out _normalized, $stable and $key keys
   if (
     ctx &&
     ctx.$options &&
@@ -105,7 +105,9 @@ function getScopedSlotRenderFunctions(ctx: any): Array<string> {
     ctx.$options.parent._vnode.data.scopedSlots
   ) {
     const slotKeys: Array<string> = ctx.$options.parent._vnode.data.scopedSlots
-    return keys(slotKeys).filter(x => x !== '_normalized' && x !== '$stable')
+    return keys(slotKeys).filter(
+      x => x !== '_normalized' && x !== '$stable' && x !== '$key'
+    )
   }
 
   return []

test/specs/shallow-mount.spec.js

@@ -150,6 +150,30 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
     )
   })
 
+  it('renders named slots when they are located inside component with v-if', () => {
+    const localVue = createLocalVue()
+    localVue.component('Foo', {
+      template: '<div><slot name="newSyntax" /></div>'
+    })
+    const TestComponent = {
+      template: `
+        <Foo v-if="true">
+          <template v-slot:newSyntax>
+            <p class="new-example">text</p>
+          </template>
+        </Foo>
+      `
+    }
+    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(
+      '<foo-stub>\n' + '  <p class="new-example">text</p>\n' + '</foo-stub>'
+    )
+  })
+
   it('renders no children if none supplied', () => {
     const TestComponent = {
       template: '<child />',