feat(act): Support async act 🎉

Closes #281

Author: Kent C. Dodds

.github/PULL_REQUEST_TEMPLATE.md

@@ -34,12 +34,11 @@ merge of your pull request!
 
 <!-- to check an item, place an "x" in the box like so: "- [x] Documentation" -->
 
-- [ ] Documentation added to the [docs site](https://github.com/alexkrolick/testing-library-docs)
+- [ ] Documentation added to the
+      [docs site](https://github.com/alexkrolick/testing-library-docs)
 - [ ] Tests
 - [ ] Typescript definitions updated
 - [ ] Ready to be merged
       <!-- In your opinion, is this ready to be merged as soon as it's reviewed? -->
-- [ ] Added myself to contributors table
-      <!-- this is optional, see the contributing guidelines for instructions -->
 
 <!-- feel free to add additional comments -->

jest.config.js

@@ -2,4 +2,8 @@ const jestConfig = require('kcd-scripts/jest')
 
 module.exports = Object.assign(jestConfig, {
   displayName: 'library',
+  // We're not going to bother testing everything in act-compat.js with
+  // different versions of React. Enzyme does and it's crazy-complicated.
+  // Totally not worth the effort. So we wont bother tracking coverage either.
+  coveragePathIgnorePatterns: ['/node_modules/', 'act-compat.js'],
 })

package.json

@@ -9,7 +9,6 @@
     "node": ">=8"
   },
   "scripts": {
-    "add-contributor": "kcd-scripts contributors add",
     "build": "kcd-scripts build && kcd-scripts build --bundle --no-clean",
     "lint": "kcd-scripts lint",
     "test": "kcd-scripts test --config=other/jest.config.js",
@@ -56,8 +55,8 @@
     "jest-dom": "3.1.3",
     "jest-in-case": "^1.0.2",
     "kcd-scripts": "1.1.2",
-    "react": "^16.8.5",
-    "react-dom": "^16.8.5",
+    "react": "16.9.0-alpha.0",
+    "react-dom": "16.9.0-alpha.0",
     "react-intl": "^2.8.0",
     "react-redux": "6.0.1",
     "react-router": "^5.0.0",

src/act-compat.js

@@ -2,8 +2,23 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 
 let reactAct
+let actSupported = false
+let asyncActSupported = false
 try {
   reactAct = require('react-dom/test-utils').act
+  actSupported = reactAct !== undefined
+
+  const originalError = console.error
+  let errorCalled = false
+  console.error = () => {
+    errorCalled = true
+  }
+  console.error.calls = []
+  reactAct(() => ({then: () => {}})).then(() => {})
+  if (!errorCalled) {
+    asyncActSupported = true
+  }
+  console.error = originalError
 } catch (error) {
   // ignore, this is to support old versions of react
 }
@@ -19,8 +34,28 @@ function actPolyfill(cb) {
 
 const act = reactAct || actPolyfill
 
-function rtlAct(...args) {
-  return act(...args)
+// this will not avoid warnings that react-dom 16.8.0 logs for triggering
+// state updates asynchronously, but at least we can tell people they need
+// to upgrade to avoid the warnings.
+async function asyncActPolyfill(cb) {
+  if (actSupported) {
+    // if act is supported and async act isn't and they're trying to use async
+    // act, then they need to upgrade from 16.8 to 16.9.
+    // This is a seemless upgrade, so we'll add a warning
+    console.error(
+      `It looks like you're using a version of react-dom that supports the "act" function, but not an awaitable version of "act" which you will need. Please upgrade to at least [email protected] to remove this warning.`,
+    )
+  }
+  // make all effects resolve before
+  act(() => {})
+  await cb()
+  // make all effects resolve after
+  act(() => {})
 }
 
-export default rtlAct
+const asyncAct = asyncActSupported ? reactAct : asyncActPolyfill
+
+export default act
+export {asyncAct}
+
+/* eslint no-console:0 */

src/index.js

@@ -4,8 +4,13 @@ import {
   getQueriesForElement,
   prettyDOM,
   fireEvent as dtlFireEvent,
+  configure as configureDTL,
 } from 'dom-testing-library'
-import act from './act-compat'
+import act, {asyncAct} from './act-compat'
+
+configureDTL({
+  asyncWrapper: asyncAct,
+})
 
 const mountedContainers = new Set()
 
@@ -133,4 +138,8 @@ fireEvent.select = (node, init) => {
 export * from 'dom-testing-library'
 export {render, cleanup, fireEvent, act}
 
+// NOTE: we're not going to export asyncAct because that's our own compatibility
+// thing for people using [email protected]. Anyone else doesn't need it and
+// people should just upgrade anyway.
+
 /* eslint func-name-matching:0 */