fix: return correct html depending if outer element is root Vue app

Author: lmiller1990

src/vueWrapper.ts

@@ -79,7 +79,12 @@ export class VueWrapper<T extends ComponentPublicInstance> {
   }
 
   html() {
-    return this.parentElement.innerHTML
+    // cover cases like <Suspense>, multiple root nodes.
+    if (this.parentElement['__vue_app__']) {
+      return this.parentElement.innerHTML
+    }
+
+    return this.element.outerHTML
   }
 
   text() {

tests/findComponent.spec.ts

@@ -170,4 +170,32 @@ describe('findComponent', () => {
     const wrapper = mount(compA)
     expect(wrapper.findComponent(Hello).unmount).toThrowError()
   })
+
+  it('finds nested componens', () => {
+    // https://github.com/vuejs/vue-test-utils-next/issues/173
+    const ComponentA = {
+      name: 'ComponentA',
+      template: `<div><slot></slot></div>`
+    }
+
+    const ComponentB = {
+      name: 'ComponentB',
+      template: '<div><slot></slot></div>'
+    }
+    const wrapper = mount({
+      components: {
+        ComponentA,
+        ComponentB
+      },
+      template: `
+        <ComponentA>
+          <ComponentB>1</ComponentB>
+          <ComponentB>2</ComponentB>
+          <ComponentB>3</ComponentB>
+        </ComponentA>
+      `
+    })
+    const com1 = wrapper.findComponent(ComponentB)
+    expect(com1.html()).toBe('<div>1</div>')
+  })
 })