Bug: The wrapper methods props can't get specific prop in functional component

[edisonLzy]

Describe the bug

The wrapper methods props can't get specific prop in functional component
To Reproduce

const wrapper = mount(Component,{
props: {
title: 'title'
}
});
expect(wrapper.props('title')).toContain('title') // not pass , the wrapper.props('title') is undeinfed

Expected behavior

const wrapper = mount(Component,{
  props: {
    title: 'title'
  }
});
expect(wrapper.props('title')).toContain('title')  // pass

Related information:

• @vue/test-utils version: ^2.0.0-rc.17
• Vue version: 3.2.27
• node version: v16.0.0
• npm (or yarn) version: v8.3.0

Additional context

[cexbrayat]

Hmm, interesting. I guess not a lot of people are using functional components in Vue 3 and we never caught this. Would you like to try to fix it?

You can start by adding a test in props.spec.ts https://github.com/vuejs/test-utils/blob/main/tests/props.spec.ts to reproduce your error.

Then the relevant code is here:

test-utils/src/vueWrapper.ts

Lines 126 to 131 in 67a3e7a

	props(): { [key: string]: any }
	props(selector: string): any
	props(selector?: string): { [key: string]: any } | any {
	const props = this.componentVM.$props as { [key: string]: any }
	return selector ? props[selector] : props
	}

We probably need some special handling for functional components.

[edisonLzy]

woot 😄 . i find the problem is the functional component wrapper ignored the props options.
The code is here:

test-utils/src/mount.ts

Lines 281 to 301 in 67a3e7a

	if (
	isFunctionalComponent(originalComponent) ||
	isLegacyFunctionalComponent(originalComponent)
	) {
	component = defineComponent({
	compatConfig: {
	MODE: 3,
	INSTANCE_LISTENERS: false,
	INSTANCE_ATTRS_CLASS_STYLE: false,
	COMPONENT_FUNCTIONAL: isLegacyFunctionalComponent(originalComponent)
	? 'suppress-warning'
	: false
	},
	setup:
	(_, { attrs, slots }) =>
	() =>
	h(originalComponent, attrs, slots),
	...instanceOptions
	})
	addToDoNotStubComponents(originalComponent)
	} else if (isObjectComponent(originalComponent)) {

I have an idea is add instance methods name attrs in wrapper like this:

const wrapper = mount(xx,{
 props: {
   "title":"h1" 
 }
});
wrapper.attrs('title') === "h1"

[cexbrayat]

Fixed by #1326