POC - Render all stub slots via config

src/config.ts

@@ -6,6 +6,7 @@ interface GlobalConfigOptions {
     VueWrapper: Pluggable
     DOMWrapper: Pluggable
   }
+  renderStubDefaultSlot: boolean
 }
 
 class Pluggable {
@@ -47,5 +48,6 @@ export const config: GlobalConfigOptions = {
   plugins: {
     VueWrapper: new Pluggable(),
     DOMWrapper: new Pluggable()
-  }
+  },
+  renderStubDefaultSlot: false
 }

src/stubs.ts

@@ -1,6 +1,7 @@
 import { transformVNodeArgs, h, createVNode } from 'vue'
 import { hyphenate } from '@vue/shared'
 import { MOUNT_COMPONENT_REF, MOUNT_PARENT_NAME } from './constants'
+import { config } from './index'
 import { matchName } from './utils/matchName'
 
 interface IStubOptions {
@@ -10,10 +11,17 @@ interface IStubOptions {
 
 type VNodeArgs = Parameters<typeof createVNode>
 
+function getSlots(ctx) {
+  return !config.renderStubDefaultSlot ? undefined : ctx.$slots
+}
+
 const createStub = ({ name, props }: IStubOptions) => {
   const anonName = 'anonymous-stub'
   const tag = name ? `${hyphenate(name)}-stub` : anonName
-  const render = () => h(tag)
+
+  const render = (ctx) => {
+    return h(tag, {}, getSlots(ctx))
+  }
 
   return { name: name || anonName, render, props }
 }
@@ -94,7 +102,7 @@ export function stubComponents(
         return [
           createStub({ name, props: propsDeclaration }),
           props,
-          {},
+          children,
           patchFlag,
           dynamicProps
         ]

tests/components/ComponentWithSlots.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="ComponentWithSlots">
+    <slot />
+    <slot name="named" />
+    <slot name="withDefault">With Default Content</slot>
+    <slot name="scoped" v-bind="{ boolean, string, object }" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ComponentWithSlots',
+  data () {
+    return {
+      boolean: true,
+      string: 'string',
+      object: { foo: 'foo' }
+    }
+  }
+}
+</script>

tests/mountingOptions/stubs.global.spec.ts

@@ -1,8 +1,9 @@
 import { h, ComponentOptions } from 'vue'
 
-import { mount } from '../../src'
+import { config, mount } from '../../src'
 import Hello from '../components/Hello.vue'
 import ComponentWithoutName from '../components/ComponentWithoutName.vue'
+import ComponentWithSlots from '../components/ComponentWithSlots.vue'
 
 describe('mounting options: stubs', () => {
   it('handles Array syntax', () => {
@@ -298,4 +299,86 @@ describe('mounting options: stubs', () => {
 
     expect(wrapper.html()).toBe('<foo-bar-stub></foo-bar-stub>')
   })
+
+  describe('stub slots', () => {
+    const Component = {
+      name: 'Parent',
+      template: `
+        <div>
+          <component-with-slots>
+            <template #default>Default</template>
+            <template #named>A named</template>
+            <template #noop>A not existing one</template>
+            <template #scoped="{ boolean, string }">{{ boolean }} {{ string }}</template>
+          </component-with-slots>
+        </div>`,
+      components: { ComponentWithSlots }
+    }
+
+    afterEach(() => {
+      config.renderStubDefaultSlot = false
+    })
+
+    it('renders only the default stub slot only behind flag', () => {
+      config.renderStubDefaultSlot = true
+
+      const wrapper = mount(Component, {
+        global: {
+          stubs: ['ComponentWithSlots']
+        }
+      })
+      expect(wrapper.html()).toBe(
+        `<div><component-with-slots-stub>Default</component-with-slots-stub></div>`
+      )
+    })
+
+    it('renders none of the slots on a stub', () => {
+      config.renderStubDefaultSlot = false
+      const wrapper = mount(Component, {
+        global: {
+          stubs: ['ComponentWithSlots']
+        }
+      })
+      expect(wrapper.html()).toBe(
+        '<div><component-with-slots-stub></component-with-slots-stub></div>'
+      )
+    })
+
+    it('renders the default slot of deeply nested stubs when renderStubDefaultSlot=true', () => {
+      config.renderStubDefaultSlot = true
+
+      const SimpleSlot = {
+        name: 'SimpleSlot',
+        template: '<div class="simpleSlot"><slot/></div>'
+      }
+      const WrappingComponent = {
+        template: `
+          <component-with-slots>
+            <component-with-slots>
+              <simple-slot>
+                <template #default>nested content</template>
+                <template #not-existing>not rendered</template>
+              </simple-slot>
+            </component-with-slots>
+          </component-with-slots>`,
+        components: {
+          ComponentWithSlots,
+          SimpleSlot
+        }
+      }
+      const wrapper = mount(WrappingComponent, {
+        global: {
+          stubs: ['component-with-slots', 'simple-slot']
+        }
+      })
+
+      expect(wrapper.html()).toEqual(
+        '<component-with-slots-stub>' +
+          '<component-with-slots-stub>' +
+          '<simple-slot-stub>nested content</simple-slot-stub>' +
+          '</component-with-slots-stub>' +
+          '</component-with-slots-stub>'
+      )
+    })
+  })
 })