fix: do not stub slots content when using shallow mount

vuejs · Jun 27, 2021 · c22df8f · c22df8f
1 parent 015c765
commit c22df8f
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 24 deletions.
diff --git a/src/stubs.ts b/src/stubs.ts
@@ -22,6 +22,12 @@ interface StubOptions {
   renderStubDefaultSlot?: boolean
 }
 
+const doNotStubComponents: WeakSet<ComponentOptions> = new WeakSet()
+
+const shouldNotStub = (type: ComponentOptions) => doNotStubComponents.has(type)
+export const addToDoNotStubComponents = (type: ComponentOptions) =>
+  doNotStubComponents.add(type)
+
 export const createStub = ({
   name,
   propsDeclaration,
@@ -154,6 +160,10 @@ export function stubComponents(
     }
 
     if (isComponent(type) || isFunctionalComponent(type)) {
+      if (shouldNotStub(type)) {
+        return args
+      }
+
       const registeredName = getComponentRegisteredName(instance, type)
       const componentName = type['name'] || type['displayName']
 

diff --git a/src/utils/compileSlots.ts b/src/utils/compileSlots.ts
@@ -1,6 +1,23 @@
 import { compile } from '@vue/compiler-dom'
 import * as vue from 'vue'
 import type { SetupContext } from 'vue'
+import { addToDoNotStubComponents } from '../stubs'
+
+const SlotWrapper = {
+  inheritAttrs: false,
+  setup(_: Record<string, any>, ctx: SetupContext) {
+    return () => {
+      const names = Object.keys(ctx.slots)
+      if (names.length === 0) {
+        return []
+      } else {
+        const slotName = names[0]
+        return ctx.slots[slotName]!(ctx.attrs)
+      }
+    }
+  }
+}
+addToDoNotStubComponents(SlotWrapper)
 
 export function processSlot(source = '', Vue = vue) {
   let template = source.trim()
@@ -23,24 +40,13 @@ export function processSlot(source = '', Vue = vue) {
     __BROWSER__ ? `'use strict';\n${code}` : code
   )
 
-  return {
+  const Component = {
     inheritAttrs: false,
     render: createRenderFunction(Vue),
     components: {
-      SlotWrapper: {
-        inheritAttrs: false,
-        setup(_: Record<string, any>, ctx: SetupContext) {
-          return () => {
-            const names = Object.keys(ctx.slots)
-            if (names.length === 0) {
-              return []
-            } else {
-              const slotName = names[0]
-              return ctx.slots[slotName]!(ctx.attrs)
-            }
-          }
-        }
-      }
+      SlotWrapper
     }
   }
+  addToDoNotStubComponents(Component)
+  return Component
 }
diff --git a/tests/config.spec.ts b/tests/config.spec.ts
@@ -1,4 +1,4 @@
-import { ComponentPublicInstance, h, inject } from 'vue'
+import { defineComponent, ComponentPublicInstance, h, inject } from 'vue'
 import { config, mount } from '../src'
 import Hello from './components/Hello.vue'
 import ComponentWithSlots from './components/ComponentWithSlots.vue'
@@ -67,11 +67,13 @@ describe('config', () => {
     })
 
     it('should evaluate given option as boolean', () => {
+      const Child = defineComponent({ template: '<div><slot></slot></div>' })
+      const Component = defineComponent({
+        components: { Child },
+        template: '<child><div id="default-slot" /></child>'
+      })
       // @ts-expect-error
-      let comp = mount(ComponentWithSlots, {
-        slots: {
-          default: '<div id="default-slot" />'
-        },
+      let comp = mount(Component, {
         shallow: true,
         global: {
           renderStubDefaultSlot: 'truthy'
@@ -81,10 +83,7 @@ describe('config', () => {
       expect(comp.find('#default-slot').exists()).toBe(true)
 
       // @ts-expect-error
-      let comp = mount(ComponentWithSlots, {
-        slots: {
-          default: '<div id="default-slot" />'
-        },
+      let comp = mount(Component, {
         shallow: true,
         global: {
           renderStubDefaultSlot: 0

diff --git a/tests/shallowMount.spec.ts b/tests/shallowMount.spec.ts
@@ -71,6 +71,19 @@ describe('shallowMount', () => {
     )
   })
 
+  it('correctly renders slot content', () => {
+    const ComponentWithSlot = defineComponent({
+      template: '<div><slot></slot></div>'
+    })
+
+    const wrapper = shallowMount(ComponentWithSlot, {
+      slots: {
+        default: '<span class="slot-content">test</span>'
+      }
+    })
+    expect(wrapper.find('.slot-content').exists()).toBe(true)
+  })
+
   it('stubs all components, but allows providing custom stub', () => {
     const wrapper = mount(ComponentWithChildren, {
       shallow: true,