POC - Render all stub slots via config

src/config.ts

@@ -1,5 +1,8 @@
 import { GlobalMountOptions } from './types'
 
-export const config: { global: GlobalMountOptions } = {
-  global: {}
+type Config = { global: GlobalMountOptions; renderAllStubSlots: boolean }
+
+export const config: Config = {
+  global: {},
+  renderAllStubSlots: false
 }

src/stubs.ts

@@ -1,5 +1,6 @@
 import { transformVNodeArgs, h } from 'vue'
 import { hyphenate } from '@vue/shared'
+import { config } from './index'
 import { matchName } from './utils/matchName'
 
 interface IStubOptions {
@@ -10,10 +11,23 @@ interface IStubOptions {
 // TODO: figure out how to type this
 type VNodeArgs = any[]
 
+function getSlots(ctx) {
+  return config.renderAllStubSlots
+    ? Object.entries(ctx.$slots)
+        .filter(([name]) => name !== '_')
+        // @ts-ignore
+        .map(([name, slot]) => slot.call(ctx, {}))
+    : ctx.$slots
+}
+
 export const createStub = ({ name, props }: IStubOptions) => {
   const anonName = 'anonymous-stub'
   const tag = name ? `${hyphenate(name)}-stub` : anonName
-  const render = () => h(tag)
+
+  const render = (ctx) => {
+    const slots = getSlots(ctx)
+    return h(tag, {}, slots)
+  }
 
   return { name: name || anonName, render, props }
 }
@@ -77,7 +91,7 @@ export function stubComponents(stubs: Record<any, any>) {
         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', () => {
@@ -300,4 +301,47 @@ 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.renderAllStubSlots = false
+    })
+
+    it('renders only the default stub slot by default', () => {
+      const wrapper = mount(Component, {
+        global: {
+          stubs: ['ComponentWithSlots']
+        }
+      })
+      expect(wrapper.html()).toBe(
+        `<div><component-with-slots-stub>Default</component-with-slots-stub></div>`
+      )
+    })
+
+    it('renders all provided stub slots', () => {
+      config.renderAllStubSlots = true
+      const wrapper = mount(Component, {
+        global: {
+          stubs: ['ComponentWithSlots']
+        }
+      })
+      expect(wrapper.html()).toBe(
+        '<div><component-with-slots-stub>DefaultA namedA not existing one </component-with-slots-stub></div>'
+      )
+    })
+  })
 })