fix: Gracefully handle empty root node for nested component (#660)

* fix: handle find(All) on components with comment root node in edge case
Squashed commits:
[00c8592] fix: apply same fix for findAll
[acbc848] fix: handle find() when root node is placeholder comment

* chore: formatting

* chore: fix typecasting

src/vueWrapper.ts

@@ -123,7 +123,7 @@ export class VueWrapper<T extends ComponentPublicInstance>
     const result = this.parentElement['__vue_app__']
       ? // force using the parentElement to allow finding the root element
         this.parentElement.querySelector(selector)
-      : this.element.querySelector(selector)
+      : this.element.querySelector && this.element.querySelector(selector)
 
     if (result) {
       return new DOMWrapper(result)
@@ -223,7 +223,9 @@ export class VueWrapper<T extends ComponentPublicInstance>
   findAll(selector: string): DOMWrapper<Element>[] {
     const results = this.parentElement['__vue_app__']
       ? this.parentElement.querySelectorAll(selector)
-      : this.element.querySelectorAll(selector)
+      : this.element.querySelectorAll
+      ? this.element.querySelectorAll(selector)
+      : ([] as unknown as NodeListOf<Element>)
 
     return Array.from(results).map((element) => new DOMWrapper(element))
   }

tests/find.spec.ts

@@ -99,6 +99,22 @@ describe('find', () => {
     )
     expect(foundElement.exists()).toBeFalsy()
   })
+
+  test('handle empty root node', () => {
+    const EmptyTestComponent = {
+      name: 'EmptyTestComponent',
+      render: () => null
+    }
+    const Component = defineComponent({
+      render() {
+        return h('div', [h(EmptyTestComponent)])
+      }
+    })
+
+    const wrapper = mount(Component)
+    const etc = wrapper.findComponent({ name: 'EmptyTestComponent' })
+    expect(etc.find('p').exists()).toBe(false)
+  })
 })
 
 describe('findAll', () => {
@@ -178,4 +194,20 @@ describe('findAll', () => {
 
     expect(wrapper.find('#foo').find('#bar').exists()).toBe(true)
   })
+
+  test('handle empty/comment root node', () => {
+    const EmptyTestComponent = {
+      name: 'EmptyTestComponent',
+      render: () => null
+    }
+    const Component = defineComponent({
+      render() {
+        return h('div', [h(EmptyTestComponent)])
+      }
+    })
+
+    const wrapper = mount(Component)
+    const etc = wrapper.findComponent({ name: 'EmptyTestComponent' })
+    expect(etc.findAll('p')).toHaveLength(0)
+  })
 })