Merge branch 'alpha' into feat/concurrent-render

.all-contributorsrc

@@ -1279,6 +1279,15 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "ImADrafter",
+      "name": "Marcos Gómez",
+      "avatar_url": "https://avatars.githubusercontent.com/u/44379989?v=4",
+      "profile": "https://github.com/ImADrafter",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -611,6 +611,9 @@ Thanks goes to these people ([emoji key][emojis]):
     <td align="center"><a href="https://github.com/anpaopao"><img src="https://avatars.githubusercontent.com/u/44686792?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Angus J. Pope</b></sub></a><br /><a href="https://github.com/testing-library/react-testing-library/commits?author=anpaopao" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/leschdom"><img src="https://avatars.githubusercontent.com/u/62334278?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Dominik Lesch</b></sub></a><br /><a href="https://github.com/testing-library/react-testing-library/commits?author=leschdom" title="Documentation">📖</a></td>
   </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>
+  </tr>
 </table>
 
 <!-- markdownlint-restore -->

jest.config.js

@@ -7,9 +7,9 @@ module.exports = Object.assign(jestConfig, {
     './src/pure': {
       // minimum coverage of jobs using React 17 and 18
       branches: 80,
-      functions: 84,
-      lines: 89,
-      statements: 89,
+      functions: 82,
+      lines: 84,
+      statements: 84,
     },
   },
 })

src/__tests__/end-to-end.js

@@ -11,22 +11,30 @@ const fetchAMessage = () =>
     }, randomTimeout)
   })
 
-class ComponentWithLoader extends React.Component {
-  state = {loading: true}
-  async componentDidMount() {
-    const data = await fetchAMessage()
-    this.setState({data, loading: false}) // eslint-disable-line
-  }
-  render() {
-    if (this.state.loading) {
-      return <div>Loading...</div>
+function ComponentWithLoader() {
+  const [state, setState] = React.useState({data: undefined, loading: true})
+  React.useEffect(() => {
+    let cancelled = false
+    fetchAMessage().then(data => {
+      if (!cancelled) {
+        setState({data, loading: false})
+      }
+    })
+
+    return () => {
+      cancelled = true
     }
-    return (
-      <div data-testid="message">
-        Loaded this message: {this.state.data.returnedMessage}!
-      </div>
-    )
+  }, [])
+
+  if (state.loading) {
+    return <div>Loading...</div>
   }
+
+  return (
+    <div data-testid="message">
+      Loaded this message: {state.data.returnedMessage}!
+    </div>
+  )
 }
 
 describe.each([

src/pure.js

@@ -5,10 +5,17 @@ import {
   prettyDOM,
   configure as configureDTL,
 } from '@testing-library/dom'
-import act from './act-compat'
+import act, {asyncAct} from './act-compat'
 import {fireEvent} from './fire-event'
 
 configureDTL({
+  asyncWrapper: async cb => {
+    let result
+    await asyncAct(async () => {
+      result = await cb()
+    })
+    return result
+  },
   eventWrapper: cb => {
     let result
     act(() => {
@@ -18,7 +25,7 @@ configureDTL({
   },
 })
 
-if (typeof React.startTransition !== undefined) {
+if (React.startTransition !== undefined) {
   configureDTL({
     unstable_advanceTimersWrapper: cb => {
       return act(cb)

types/index.d.ts

@@ -34,15 +34,47 @@ export interface RenderOptions<
   Q extends Queries = typeof queries,
   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,
+   *  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
+   *  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
+   *  rendering and use ReactDOM.hydrate to mount your components.
+   *
+   *  @see https://testing-library.com/docs/react-testing-library/api/#hydrate)
+   */
   hydrate?: boolean
   /**
    * Set to `true` if you want to force synchronous `ReactDOM.render`.
    * Otherwise `render` will default to concurrent React if available.
    */
   legacyRoot?: boolean
+  /**
+   * 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
+   *  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
 }