Merge branch 'main' into alpha

Author: eps1lon

.all-contributorsrc

@@ -1288,6 +1288,25 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "akashshyamdev",
+      "name": "Akash Shyam",
+      "avatar_url": "https://avatars.githubusercontent.com/u/56759828?v=4",
+      "profile": "https://www.akashshyam.online/",
+      "contributions": [
+        "bug"
+      ]
+    },
+    {
+      "login": "fmeum",
+      "name": "Fabian Meumertzheim",
+      "avatar_url": "https://avatars.githubusercontent.com/u/4312191?v=4",
+      "profile": "https://hen.ne.ke",
+      "contributions": [
+        "code",
+        "bug"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -613,6 +613,8 @@ Thanks goes to these people ([emoji key][emojis]):
   </tr>
   <tr>
     <td align="center"><a href="https://github.com/ImADrafter"><img src="https://avatars.githubusercontent.com/u/44379989?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Marcos Gómez</b></sub></a><br /><a href="https://github.com/testing-library/react-testing-library/commits?author=ImADrafter" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://www.akashshyam.online/"><img src="https://avatars.githubusercontent.com/u/56759828?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Akash Shyam</b></sub></a><br /><a href="https://github.com/testing-library/react-testing-library/issues?q=author%3Aakashshyamdev" title="Bug reports">🐛</a></td>
+    <td align="center"><a href="https://hen.ne.ke"><img src="https://avatars.githubusercontent.com/u/4312191?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Fabian Meumertzheim</b></sub></a><br /><a href="https://github.com/testing-library/react-testing-library/commits?author=fmeum" title="Code">💻</a> <a href="https://github.com/testing-library/react-testing-library/issues?q=author%3Afmeum" title="Bug reports">🐛</a></td>
   </tr>
 </table>
 

package.json

@@ -46,11 +46,11 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.12.5",
-    "@testing-library/dom": "^8.5.0"
+    "@testing-library/dom": "^8.5.0",
+    "@types/react-dom": "*"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.11.6",
-    "@types/react-dom": "^17.0.0",
     "dotenv-cli": "^4.0.0",
     "kcd-scripts": "^11.1.0",
     "npm-run-all": "^4.1.5",

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.
@@ -75,7 +77,7 @@ export interface RenderOptions<
    *
    *  @see https://testing-library.com/docs/react-testing-library/api/#wrapper
    */
-  wrapper?: React.ComponentType
+  wrapper?: React.JSXElementConstructor<{children: React.ReactElement}>
 }
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
@@ -86,10 +88,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'>,

types/test.tsx

@@ -100,6 +100,66 @@ export function testQueries() {
   )
 }
 
+export function wrappedRender(
+  ui: React.ReactElement,
+  options?: pure.RenderOptions,
+) {
+  const Wrapper = ({children}: {children: React.ReactElement}): JSX.Element => {
+    return <div>{children}</div>
+  }
+
+  return pure.render(ui, {wrapper: Wrapper, ...options})
+}
+
+export function wrappedRenderB(
+  ui: React.ReactElement,
+  options?: pure.RenderOptions,
+) {
+  const Wrapper: React.FunctionComponent<{children?: React.ReactNode}> = ({
+    children,
+  }) => {
+    return <div>{children}</div>
+  }
+
+  return pure.render(ui, {wrapper: Wrapper, ...options})
+}
+
+export function wrappedRenderC(
+  ui: React.ReactElement,
+  options?: pure.RenderOptions,
+) {
+  interface AppWrapperProps {
+    userProviderProps?: {user: string}
+  }
+  const AppWrapperProps: React.FunctionComponent<AppWrapperProps> = ({
+    children,
+    userProviderProps = {user: 'TypeScript'},
+  }) => {
+    return <div data-testid={userProviderProps.user}>{children}</div>
+  }
+
+  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",