fix: Suspense single root node warning for dynamic component

[cexbrayat]

WIP: I'm looking for feedback on how to best solve this.

Currently, using:

<RouterView v-slot="{ Component }">
  <Suspense timeout="0">
    <component :is="Component" />
    <template #fallback>Loading...</template>
  </Suspense>
</RouterView>

throws the warning:

[Vue warn]: <Suspense> slots expect a single root node

This commit introduces some unit tests to reproduce the issue.

The code that needs to be updated is in componentRendererUtils.ts:

export function filterSingleRoot(children: VNodeArrayChildren): VNode | null {
  const filtered = children.filter(child => {
    return !(
      isVNode(child) &&
      child.type === Comment &&
      child.children !== 'v-if'
    )
  })
  return filtered.length === 1 && isVNode(filtered[0]) ? filtered[0] : null
}

A dynamic component is failing the test isVNode(filtered[0]) (IIUC what's going on).
What would be the proper way to fix this?

[posva]

I think that #3962 should fix this but I could have forgotten some of the test cases

[cexbrayat]

@posva nice job! I'll close this one since your PR should indeed fix it. Looking forward to get rid of this annoying warning with the next release 🙂