From 96ed8dafa5d02add2168a3da65d1cc0ffe6d6d1f Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Wed, 9 Mar 2022 15:32:49 +0100
Subject: [PATCH] fix: Match runtime type of baseElement in TypeScript types
 (#1023)

---
 types/index.d.ts | 11 +++++++----
 types/test.tsx   | 19 +++++++++++++++++++
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/types/index.d.ts b/types/index.d.ts
index 92eb2d7b..604b3966 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -14,9 +14,10 @@ export * from '@testing-library/dom'
 export type RenderResult<
   Q extends Queries = typeof queries,
   Container extends Element | DocumentFragment = HTMLElement,
+  BaseElement extends Element | DocumentFragment = Container,
 > = {
   container: Container
-  baseElement: Element
+  baseElement: BaseElement
   debug: (
     baseElement?:
       | Element
@@ -33,6 +34,7 @@ export type RenderResult<
 export interface RenderOptions<
   Q extends Queries = typeof queries,
   Container extends Element | DocumentFragment = HTMLElement,
+  BaseElement extends Element | DocumentFragment = Container,
 > {
   /**
    * By default, React Testing Library will create a div and append that div to the document.body. Your React component will be rendered in the created div. If you provide your own HTMLElement container via this option,
@@ -50,7 +52,7 @@ export interface RenderOptions<
    *
    *  @see https://testing-library.com/docs/react-testing-library/api/#baseelement
    */
-  baseElement?: Element
+  baseElement?: BaseElement
   /**
    * If `hydrate` is set to `true`, then it will render with `ReactDOM.hydrate`. This may be useful if you are using server-side
    *  rendering and use ReactDOM.hydrate to mount your components.
@@ -81,10 +83,11 @@ type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
 export function render<
   Q extends Queries = typeof queries,
   Container extends Element | DocumentFragment = HTMLElement,
+  BaseElement extends Element | DocumentFragment = Container,
 >(
   ui: React.ReactElement,
-  options: RenderOptions<Q, Container>,
-): RenderResult<Q, Container>
+  options: RenderOptions<Q, Container, BaseElement>,
+): RenderResult<Q, Container, BaseElement>
 export function render(
   ui: React.ReactElement,
   options?: Omit<RenderOptions, 'queries'>,
diff --git a/types/test.tsx b/types/test.tsx
index 71ea30a9..eae6e81f 100644
--- a/types/test.tsx
+++ b/types/test.tsx
@@ -141,6 +141,25 @@ export function wrappedRenderC(
   return pure.render(ui, {wrapper: AppWrapperProps, ...options})
 }
 
+export function testBaseElement() {
+  const {baseElement: baseDefaultElement} = render(<div />)
+  expectType<HTMLElement, typeof baseDefaultElement>(baseDefaultElement)
+
+  const container = document.createElement('input')
+  const {baseElement: baseElementFromContainer} = render(<div />, {container})
+  expectType<typeof container, typeof baseElementFromContainer>(
+    baseElementFromContainer,
+  )
+
+  const baseElementOption = document.createElement('input')
+  const {baseElement: baseElementFromOption} = render(<div />, {
+    baseElement: baseElementOption,
+  })
+  expectType<typeof baseElementOption, typeof baseElementFromOption>(
+    baseElementFromOption,
+  )
+}
+
 /*
 eslint
   testing-library/prefer-explicit-assert: "off",