From b482c3e428aa5930329b3e4c282b9b916e877e32 Mon Sep 17 00:00:00 2001
From: nandi95 <41805560+nandi95@users.noreply.github.com>
Date: Tue, 9 Apr 2024 17:14:59 +0100
Subject: [PATCH] feat: improve returned type for element getter (#2406)

---
 src/vueWrapper.ts          |  2 +-
 test-dts/wrapper.d-test.ts | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/vueWrapper.ts b/src/vueWrapper.ts
index b69bc85da..67c1f4864 100644
--- a/src/vueWrapper.ts
+++ b/src/vueWrapper.ts
@@ -213,7 +213,7 @@ export class VueWrapper<
     }
   }
 
-  get element(): Element {
+  get element(): T['$el'] {
     // if the component has multiple root elements, we use the parent's element
     return this.hasMultipleRoots ? this.parentElement : this.vm.$el
   }
diff --git a/test-dts/wrapper.d-test.ts b/test-dts/wrapper.d-test.ts
index 1582f3d95..4c25fabf0 100644
--- a/test-dts/wrapper.d-test.ts
+++ b/test-dts/wrapper.d-test.ts
@@ -14,6 +14,16 @@ const domWrapper = wrapper.find('#other')
 let inputMaybe = wrapper.find('input')
 expectType<HTMLInputElement | undefined>(inputMaybe.element)
 
+let buttonComp = mount(
+  defineComponent({ template: '<button>Click me</button>' })
+)
+expectType<HTMLButtonElement>(buttonComp.element)
+
+let multiRootComp = mount(defineComponent({ template: '<span /><span />' }))
+// this will be a wrapper div element like so: <div data-v-app="">
+expectType<HTMLDivElement>(multiRootComp.element)
+expectType<HTMLSpanElement>(multiRootComp.element.firstElementChild)
+
 // SVG element selector
 let lineMaybe = wrapper.find('line')
 expectType<SVGLineElement | undefined>(lineMaybe.element)