fix: reactive props for stubs (#453)

* Add tests to reproduce bug

* Add created stub to stubs mapping

* chore: lint

Co-authored-by: Lachlan Miller <[email protected]>

Author: UrsMetz

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]
       }
     }
 

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:
+        '<div><foo :foo="foo" /><button @click="buttonClick">Click me</button></div>',
+      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:
+        '<div><foo :foo="foo" /><button @click="buttonClick">Click me</button></div>',
+      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'
+    })
+  })
 })