fix(stubs): Do not render function body in stub

Author: xanf

src/vnodeTransformers/stubComponentsTransformer.ts

@@ -63,13 +63,16 @@ const shouldNotStub = (type: ConcreteComponent) => doNotStubComponents.has(type)
 export const addToDoNotStubComponents = (type: ConcreteComponent) =>
   doNotStubComponents.add(type)
 
-const stringifySymbols = (props: ComponentPropsOptions) => {
+const normalizeStubProps = (props: ComponentPropsOptions) => {
   // props are always normalized to object syntax
   const $props = props as unknown as ComponentObjectPropsOptions
   return Object.keys($props).reduce((acc, key) => {
     if (typeof $props[key] === 'symbol') {
       return { ...acc, [key]: $props[key]?.toString() }
     }
+    if (typeof $props[key] === 'function') {
+      return { ...acc, [key]: '[Function]' }
+    }
     return { ...acc, [key]: $props[key] }
   }, {})
 }
@@ -100,13 +103,11 @@ export const createStub = ({
         // causes an error.
         // Only a problem when shallow mounting. For this reason we iterate of the
         // props that will be passed and stringify any that are symbols.
-        const propsWithoutSymbols = stringifySymbols(props)
+        // Also having function text as attribute is useless and annoying so
+        // we replace it with "[Function]""
+        const stubProps = normalizeStubProps(props)
 
-        return h(
-          tag,
-          propsWithoutSymbols,
-          renderStubDefaultSlot ? slots : undefined
-        )
+        return h(tag, stubProps, renderStubDefaultSlot ? slots : undefined)
       }
     }
   })

tests/props.spec.ts

@@ -274,6 +274,22 @@ describe('props', () => {
     expect(wrapper.text()).toEqual('hello')
   })
 
+  it('stub function props when shallow mounting', () => {
+    const Comp = defineComponent({
+      name: 'Comp',
+      template: `<div>Test</div>`,
+      props: ['fn']
+    })
+
+    const wrapper = shallowMount({
+      render() {
+        return h(Comp, { fn: () => {} })
+      }
+    })
+
+    expect(wrapper.html()).toBe('<comp-stub fn="[Function]"></comp-stub>')
+  })
+
   describe('edge case with symbol props and stubs', () => {
     it('works with Symbol as default', () => {
       const Comp = defineComponent({