diff --git a/src/vnodeTransformers/stubComponentsTransformer.ts b/src/vnodeTransformers/stubComponentsTransformer.ts index 62affe12d..75e7a1012 100644 --- a/src/vnodeTransformers/stubComponentsTransformer.ts +++ b/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) } } }) diff --git a/tests/props.spec.ts b/tests/props.spec.ts index 87c5a2447..77b73c03a 100644 --- a/tests/props.spec.ts +++ b/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: `
Test
`, + props: ['fn'] + }) + + const wrapper = shallowMount({ + render() { + return h(Comp, { fn: () => {} }) + } + }) + + expect(wrapper.html()).toBe('') + }) + describe('edge case with symbol props and stubs', () => { it('works with Symbol as default', () => { const Comp = defineComponent({