Test child component, which is the root element

[souphuhn]

Subject of the issue

Example:
Lets say I have the following parent component:

// ParentComponent
<template>
   <child-component :prop-a="propA" :prop-b="propB" />
</template>

When unit testing my ParentComponent I want to check the correct usage of the underlying ChildComponent as well and test its properties. Back in Vue2 I normally did:

const wrapper = shallowMount(ParentComponent);
const child = wrapper.vm.$children[0];

expect(child.$props.....).toBe(...);
expect(child.$props.....).toBe(....);
expect(child.$props.....).toBe(....);

I used the wrapper.vm.$children[0] approach, because wrapper.find(ChildComponent) would return the same wrapper again. (because it is the root)

Now my question is: How can I select the child-component in Vue3 to tests its properties?

Steps to reproduce

Tell us how to reproduce this issue. Please provide a working and simplified example.

Expected behaviour

What should happen?

Actual behaviour

What happens instead?

Possible Solution

What are the alternative solutions? Please describe what else you have considered?

[oliversanders]

Bumping this, still a issue after VTU v1 with no clear solution, despite previous issues being seemingly closed as resolved.

The old workaround of using $children[0] is no longer possible in Vue 3, with no clear route to migrate these tests.

[oliversanders]

It seems two possible workarounds for this behaviour are either:

1. adding a 1 line comment node above the root element (if using vitest), the root node get treated as a fragment and findComponent() returns child component rather than the wrapper
2. adding a ref to the root element e.g. <child-component ref="root" ... and accessing the $props and $attrs of the ref in the test, e.g.

expect(wrapper.vm.$refs['root'].$props.someProp)).toBe(...);
expect(wrapper.vm.$refs['root'].$attrs['some-other-prop'])).toBe(...);

Note: using $attrs seems to maintain the original property types unlike .attributes(...) which returns everything as strings.

[souphuhn]

Hi,
I have figured it out by now and want to share it:
Testing the child component ChildComponent, which is the root of my component under test, works perfectly via

const childWrapper = wrapper.findComponent<typeof ChildComponent>(ChildComponent)

If using

const childWrapper = wrapper.find('child-component-selector') as VueWrapper

this will return the root wrapper itself of my component under test.