fix: wrapper.element with nested multiple roots

src/vueWrapper.ts

@@ -70,7 +70,7 @@ export class VueWrapper<
     // Recursive check subtree for nested root elements
     // <template>
     //   <WithMultipleRoots />
-    // </template
+    // </template>
     const checkTree = (subTree: VNode): boolean => {
       // if the subtree is an array of children, we have multiple root nodes
       if (subTree.shapeFlag === ShapeFlags.ARRAY_CHILDREN) return true

tests/element.spec.ts

@@ -2,6 +2,15 @@ import { defineComponent, h } from 'vue'
 
 import { mount } from '../src'
 
+const MultiRootText = defineComponent({
+  render: () => [h('div', {}, 'foo'), h('div', {}, 'bar'), h('div', {}, 'baz')]
+})
+const ReturnSlot = defineComponent({
+  render() {
+    return this.$slots.default!({})
+  }
+})
+
 describe('element', () => {
   it('returns element when mounting single root node', () => {
     const Component = defineComponent({
@@ -16,14 +25,66 @@ describe('element', () => {
   })
 
   it('returns the VTU root element when mounting multiple root nodes', () => {
-    const Component = defineComponent({
-      render() {
-        return [h('div', {}, 'foo'), h('div', {}, 'bar'), h('div', {}, 'baz')]
-      }
+    const wrapper = mount(MultiRootText)
+
+    expect(wrapper.element.innerHTML).toBe(
+      '<div>foo</div><div>bar</div><div>baz</div>'
+    )
+  })
+
+  it('returns correct element for root component with multiple roots', () => {
+    const Parent = defineComponent({
+      components: { MultiRootText },
+      template: '<MultiRootText/>'
     })
 
-    const wrapper = mount(Component)
+    const wrapper = mount(Parent)
+
+    expect(wrapper.findComponent(MultiRootText).text()).toBe('foobarbaz')
+    expect(wrapper.text()).toBe('foobarbaz')
+  })
+
+  it('returns correct element for root slot', () => {
+    const Parent = defineComponent({
+      components: { ReturnSlot },
+      template: `
+    <ReturnSlot>
+      <div>foo</div>
+      <div>bar</div>
+      <div>baz</div>
+    </ReturnSlot>`
+    })
+
+    const wrapper = mount(Parent)
+    expect(wrapper.element.innerHTML).toBe(
+      '<div>foo</div><div>bar</div><div>baz</div>'
+    )
+  })
+
+  it('should return element for multi root functional component', () => {
+    const Foo = () => h(MultiRootText)
+    const wrapper = mount(Foo)
+
+    expect(wrapper.element.innerHTML).toBe(
+      '<div>foo</div><div>bar</div><div>baz</div>'
+    )
+  })
+
+  it('returns correct element for root slot with functional component', () => {
+    const wrapper = mount(() =>
+      h(ReturnSlot, {}, () => [
+        h('div', {}, 'foo'),
+        h('div', {}, 'bar'),
+        h('div', {}, 'baz')
+      ])
+    )
+    expect(wrapper.element.innerHTML).toBe(
+      '<div>foo</div><div>bar</div><div>baz</div>'
+    )
+  })
 
+  it('returns correct element for root slot with nested component', () => {
+    const wrapper = mount(() => h(ReturnSlot, {}, () => h(MultiRootText)))
     expect(wrapper.element.innerHTML).toBe(
       '<div>foo</div><div>bar</div><div>baz</div>'
     )