fix: support functional component props (#1326)

* feat(props): add test for functional component

* feat(props): compatible functional component props #1311

* feat(props): compatible functional component props #1311

* fix: lint code style

Co-authored-by: evanzyli <[email protected]>

package.json

@@ -92,4 +92,4 @@
       ]
     }
   }
-}
+}

src/mount.ts

@@ -274,7 +274,7 @@ export function mount(
   options?: MountingOptions<any> & Record<string, any>
 ): VueWrapper<any> {
   // normalise the incoming component
-  let originalComponent = unwrapLegacyVueExtendComponent(inputComponent)
+  const originalComponent = unwrapLegacyVueExtendComponent(inputComponent)
   let component: ConcreteComponent
   const instanceOptions = getInstanceOptions(options ?? {})
 
@@ -291,6 +291,7 @@ export function mount(
           ? 'suppress-warning'
           : false
       },
+      props: originalComponent.props || {},
       setup:
         (_, { attrs, slots }) =>
         () =>

tests/components/FunctionComponent.tsx

@@ -0,0 +1,12 @@
+import type { FunctionalComponent } from 'vue'
+
+interface Props {
+  title: string
+}
+const Title: FunctionalComponent<Props> = ({ title }) => {
+  return <h1> {title} </h1>
+}
+Title.props = {
+  title: String
+}
+export default Title

tests/props.spec.ts

@@ -3,6 +3,7 @@ import WithProps from './components/WithProps.vue'
 import PropWithSymbol from './components/PropWithSymbol.vue'
 import Hello from './components/Hello.vue'
 import { defineComponent, h } from 'vue'
+import Title from './components/FunctionComponent'
 
 describe('props', () => {
   it('returns a single prop applied to a component', () => {
@@ -179,7 +180,7 @@ describe('props', () => {
     const wrapper = mount(Component, {
       shallow: true
     })
-    let fooCmp = wrapper.findComponent({ name: 'Foo' })
+    const fooCmp = wrapper.findComponent({ name: 'Foo' })
 
     expect(fooCmp.props()).toEqual({
       foo: 'old value'
@@ -191,7 +192,6 @@ describe('props', () => {
       foo: 'new value'
     })
   })
-
   it('https://github.com/vuejs/test-utils/issues/440', async () => {
     const Foo = defineComponent({
       name: 'Foo',
@@ -275,5 +275,14 @@ describe('props', () => {
         '<prop-with-symbol-stub sym="Symbol()"></prop-with-symbol-stub>'
       )
     })
+
+    it('should get props from functional component', async () => {
+      const wrapper = mount(Title, {
+        props: {
+          title: 'nickname'
+        }
+      })
+      expect(wrapper.props('title')).toBe('nickname')
+    })
   })
 })