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'
+ })
+ })
})