Bug: findComponent() does not return functional component's content when they are defined as arrays

[miguelrincon]

Describe the bug

The result of find(MyFunctionalComponent).text() is incorrect when finding a functional component that is defined as an array.

    const Func = () => ['abc', 'def'];
    const wrapper = mount({
      setup() {
        return () => [h('div', {}, [h(Func)])];
      },
    });

    expect(wrapper.findComponent(Func).text()).toBe('abcdef'); // FAILS! returns ""

• findComponent(Func).element doesn’t contain the innerHTML I expected, it is a whitespace Text {} node, so text() is empty.
• If the functional component has a root element this problem is not present.
• wrapper.findComponent(Func).element.parentNode.children[0].textContent contains the expected answer! Because it manages to reach the HTMLElement node when invoking children, it skips the empty whitespace Text {} node.

To Reproduce
https://stackblitz.com/edit/github-f5gb9nta?file=src%2F__tests__%2Ffunctional.spec.ts&view=editor

Expected behavior
Any text() or html() check, works as expected.

Related information:

Additional context

[cexbrayat]

Hi @miguelrincon

This does look like an issue.
Feel free to open a PR if you feel like it to improve this, all contributions are most welcomed!

[miguelrincon]

The problem is that wrapper.findComponent(...) returns a DOMWrapper instead of a VueWrapper for functional components. Those wrappers can't self-inspect using hasMultipleRoots to locate a correct root element.

I tried other shapes of functional components and they always return a DOMWrapper:

    const Func1 = () => 'foo'
    const Func2 = () => ['foo']
    const Func3 = () => h('div', {}, 'foo')

    const Parent = defineComponent({
      components: { Func1, Func2, Func3 },
      template: '<div><Func1/><Func2/><Func3/></div>'
    })
    const wrapper = mount(Parent)

    console.log(wrapper.findComponent(Func1)) // DOMWrapper
    console.log(wrapper.findComponent(Func2)) // DOMWrapper
    console.log(wrapper.findComponent(Func3)) // DOMWrapper

I see two possible ways to solve this:

1. Change find so it returns VueWrapper for functional components. Having DOMWrapper returned initially surprised me, but as VueWrapper is assumed to have a Vue instance (componentVM) perhaps a DOMWrapper return is the way to go. This seems to be an important design choice.
2. Add a new hasMultipleRoots check to DOMWrapper so it can locate and return the parentElement like VueWrapperdoes, hopefully this would be enough to get the right result when fetchingtext(), html()`, etc...

I am leaning towards 2. because 1. is probably a breaking change with a few ramifications.

@cexbrayat wdyt?