diff --git a/src/stubs.ts b/src/stubs.ts index eade6a397..f50ca084d 100644 --- a/src/stubs.ts +++ b/src/stubs.ts @@ -169,13 +169,9 @@ export function stubComponents( // case 1: default stub if (stub === true || shallow) { const propsDeclaration = type?.props || {} - return [ - createStub({ name, propsDeclaration, props }), - props, - children, - patchFlag, - dynamicProps - ] + const newStub = createStub({ name, propsDeclaration, props }) + stubs[name] = newStub + return [newStub, props, children, patchFlag, dynamicProps] } } diff --git a/tests/props.spec.ts b/tests/props.spec.ts index cff91719f..e8cb14dfd 100644 --- a/tests/props.spec.ts +++ b/tests/props.spec.ts @@ -111,4 +111,78 @@ describe('props', () => { await wrapper.trigger('click') expect(wrapper.props('modelValue')).toBe(2) }) + + it('returns reactive props on a stubbed component', async () => { + const Foo = { + name: 'Foo', + template: 'Foo', + props: { + foo: String + } + } + const Component = defineComponent({ + data: () => ({ foo: 'old value' }), + template: + '
', + methods: { + buttonClick() { + this.foo = 'new value' + } + }, + components: { Foo } + }) + + const wrapper = mount(Component, { + global: { + stubs: ['Foo'] + } + }) + let fooCmp = wrapper.findComponent({ name: 'Foo' }) + + expect(fooCmp.props()).toEqual({ + foo: 'old value' + }) + + await wrapper.find('button').trigger('click') + + expect(fooCmp.props()).toEqual({ + foo: 'new value' + }) + }) + + it('returns reactive props on a stubbed component shallow case', async () => { + const Foo = { + name: 'Foo', + template: 'Foo', + props: { + foo: String + } + } + const Component = defineComponent({ + data: () => ({ foo: 'old value' }), + template: + '
', + methods: { + buttonClick() { + this.foo = 'new value' + } + }, + components: { Foo } + }) + + const wrapper = mount(Component, { + shallow: true + }) + let fooCmp = wrapper.findComponent({ name: 'Foo' }) + + expect(fooCmp.props()).toEqual({ + foo: 'old value' + }) + + await wrapper.find('button').trigger('click') + + expect(fooCmp.props()).toEqual({ + foo: 'new value' + }) + }) })