From d64698c82b168f677106ff226fd446b67e92be0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= <t.luenborg@googlemail.com>
Date: Sat, 12 Jun 2021 10:16:35 +0200
Subject: [PATCH] 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  |  6 ++++--
 tests/find.spec.ts | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/vueWrapper.ts b/src/vueWrapper.ts
index a147b7b60..b2c6976db 100644
--- a/src/vueWrapper.ts
+++ b/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))
   }
diff --git a/tests/find.spec.ts b/tests/find.spec.ts
index 8cddc0d81..aa54bb1f3 100644
--- a/tests/find.spec.ts
+++ b/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)
+  })
 })