Merge branch 'main' into improve-render-options-jsdocs

Author: eps1lon

.github/workflows/validate.yml

@@ -17,7 +17,8 @@ jobs:
     if: ${{ !contains(github.head_ref, 'all-contributors') }}
     strategy:
       matrix:
-        node: [12, 14, 16]
+        # TODO: relax `'16.9.1'` to `16` once GitHub has 16.9.1 cached. 16.9.0 is broken due to https://github.com/nodejs/node/issues/40030
+        node: [12, 14, '16.9.1']
         react: [latest, next, experimental]
     runs-on: ubuntu-latest
     steps:
@@ -37,6 +38,10 @@ jobs:
         with:
           useLockFile: false
 
+      # TODO: Can be removed if https://github.com/kentcdodds/kcd-scripts/pull/146 is released
+      - name: Verify format (`npm run format` committed?)
+        run: npm run format -- --check --no-write
+
       # as requested by the React team :)
       # https://reactjs.org/blog/2019/10/22/react-release-channels.html#using-the-next-channel-for-integration-testing
       - name: ⚛️ Setup react

package.json

@@ -14,6 +14,7 @@
     "build:bundle:main": "dotenv -e .bundle.main.env kcd-scripts build -- --bundle --no-clean",
     "build:bundle:pure": "dotenv -e .bundle.main.env -e .bundle.pure.env kcd-scripts build -- --bundle --no-clean",
     "build:main": "kcd-scripts build --no-clean",
+    "format": "kcd-scripts format",
     "lint": "kcd-scripts lint",
     "setup": "npm install && npm run validate -s",
     "test": "kcd-scripts test",

src/index.js

@@ -5,7 +5,7 @@ import {cleanup} from './pure'
 // this ensures that tests run in isolation from each other
 // if you don't like this then either import the `pure` module
 // or set the RTL_SKIP_AUTO_CLEANUP env variable to 'true'.
-if (typeof process === "undefined" || !process.env?.RTL_SKIP_AUTO_CLEANUP) {
+if (typeof process === 'undefined' || !process.env?.RTL_SKIP_AUTO_CLEANUP) {
   // ignore teardown() in code coverage because Jest does not support it
   /* istanbul ignore else */
   if (typeof afterEach === 'function') {

types/index.d.ts

@@ -13,7 +13,7 @@ export * from '@testing-library/dom'
 
 export type RenderResult<
   Q extends Queries = typeof queries,
-  Container extends Element | DocumentFragment = HTMLElement
+  Container extends Element | DocumentFragment = HTMLElement,
 > = {
   container: Container
   baseElement: Element
@@ -32,37 +32,42 @@ export type RenderResult<
 
 export interface RenderOptions<
   Q extends Queries = typeof queries,
-  Container extends Element | DocumentFragment = HTMLElement
+  Container extends Element | DocumentFragment = HTMLElement,
 > {
-  /** 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,
+  /**
+   * 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,
    *  it will not be appended to the document.body automatically.
    *
    *  For example: If you are unit testing a `<tbody>` element, it cannot be a child of a div. In this case, you can
    *  specify a table as the render container.
-   * 
+   *
    *  @see https://testing-library.com/docs/react-testing-library/api/#container
    */
   container?: Container
-  /** Defaults to the container if the container is specified. Otherwise `document.body` is used for the default. This is used as 
+  /**
+   * Defaults to the container if the container is specified. Otherwise `document.body` is used for the default. This is used as
    *  the base element for the queries as well as what is printed when you use `debug()`.
-   *  
+   *
    *  @see https://testing-library.com/docs/react-testing-library/api/#baseelement
    */
   baseElement?: Element
-  /** If `hydrate` is set to `true`, then it will render with `ReactDOM.hydrate`. This may be useful if you are using server-side
+  /**
+   * 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.
-   * 
+   *
    *  @see https://testing-library.com/docs/react-testing-library/api/#hydrate)
    */
   hydrate?: boolean
-  /** Queries to bind. Overrides the default set from DOM Testing Library unless merged. 
-   * 
+  /**
+   * Queries to bind. Overrides the default set from DOM Testing Library unless merged.
+   *
    *  @see https://testing-library.com/docs/react-testing-library/api/#queries
    */
   queries?: Q
-  /** Pass a React Component as the wrapper option to have it rendered around the inner element. This is most useful for creating
+  /**
+   * Pass a React Component as the wrapper option to have it rendered around the inner element. This is most useful for creating
    *  reusable custom render functions for common data providers. See setup for examples.
-   * 
+   *
    *  @see https://testing-library.com/docs/react-testing-library/api/#wrapper
    */
   wrapper?: React.ComponentType
@@ -75,7 +80,7 @@ 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
+  Container extends Element | DocumentFragment = HTMLElement,
 >(
   ui: React.ReactElement,
   options: RenderOptions<Q, Container>,