fix: async act detection (#407)

The previous version of async act detection left an open hanging act scope, which broke tests and expectations. This PR delays the detection until it's been called at least once.

Author: Sunil Pai

src/__tests__/new-act.js

@@ -0,0 +1,76 @@
+let asyncAct
+
+jest.mock('react-dom/test-utils', () => ({
+  act: cb => {
+    return cb()
+  },
+}))
+
+beforeEach(() => {
+  jest.resetModules()
+  asyncAct = require('../act-compat').asyncAct
+  jest.spyOn(console, 'error').mockImplementation(() => {})
+})
+
+afterEach(() => {
+  console.error.mockRestore()
+})
+
+test('async act works when it does not exist (older versions of react)', async () => {
+  const callback = jest.fn()
+  await asyncAct(async () => {
+    await Promise.resolve()
+    await callback()
+  })
+  expect(console.error).toHaveBeenCalledTimes(0)
+  expect(callback).toHaveBeenCalledTimes(1)
+
+  callback.mockClear()
+  console.error.mockClear()
+
+  await asyncAct(async () => {
+    await Promise.resolve()
+    await callback()
+  })
+  expect(console.error).toHaveBeenCalledTimes(0)
+  expect(callback).toHaveBeenCalledTimes(1)
+})
+
+test('async act recovers from errors', async () => {
+  try {
+    await asyncAct(async () => {
+      await null
+      throw new Error('test error')
+    })
+  } catch (err) {
+    console.error('call console.error')
+  }
+  expect(console.error).toHaveBeenCalledTimes(1)
+  expect(console.error.mock.calls).toMatchInlineSnapshot(`
+    Array [
+      Array [
+        "call console.error",
+      ],
+    ]
+  `)
+})
+
+test('async act recovers from sync errors', async () => {
+  try {
+    await asyncAct(() => {
+      throw new Error('test error')
+    })
+  } catch (err) {
+    console.error('call console.error')
+  }
+  expect(console.error).toHaveBeenCalledTimes(1)
+  expect(console.error.mock.calls).toMatchInlineSnapshot(`
+    Array [
+      Array [
+        "call console.error",
+      ],
+    ]
+  `)
+})
+
+/* eslint no-console:0 */

src/__tests__/no-act.js

@@ -1,9 +1,80 @@
-import {act} from '..'
+let act, asyncAct
+
+beforeEach(() => {
+  jest.resetModules()
+  act = require('..').act
+  asyncAct = require('../act-compat').asyncAct
+  jest.spyOn(console, 'error').mockImplementation(() => {})
+})
+
+afterEach(() => {
+  console.error.mockRestore()
+})
 
 jest.mock('react-dom/test-utils', () => ({}))
 
 test('act works even when there is no act from test utils', () => {
   const callback = jest.fn()
   act(callback)
   expect(callback).toHaveBeenCalledTimes(1)
+  expect(console.error).toHaveBeenCalledTimes(0)
+})
+
+test('async act works when it does not exist (older versions of react)', async () => {
+  const callback = jest.fn()
+  await asyncAct(async () => {
+    await Promise.resolve()
+    await callback()
+  })
+  expect(console.error).toHaveBeenCalledTimes(0)
+  expect(callback).toHaveBeenCalledTimes(1)
+
+  callback.mockClear()
+  console.error.mockClear()
+
+  await asyncAct(async () => {
+    await Promise.resolve()
+    await callback()
+  })
+  expect(console.error).toHaveBeenCalledTimes(0)
+  expect(callback).toHaveBeenCalledTimes(1)
+})
+
+test('async act recovers from errors', async () => {
+  try {
+    await asyncAct(async () => {
+      await null
+      throw new Error('test error')
+    })
+  } catch (err) {
+    console.error('call console.error')
+  }
+  expect(console.error).toHaveBeenCalledTimes(1)
+  expect(console.error.mock.calls).toMatchInlineSnapshot(`
+    Array [
+      Array [
+        "call console.error",
+      ],
+    ]
+  `)
+})
+
+test('async act recovers from sync errors', async () => {
+  try {
+    await asyncAct(() => {
+      throw new Error('test error')
+    })
+  } catch (err) {
+    console.error('call console.error')
+  }
+  expect(console.error).toHaveBeenCalledTimes(1)
+  expect(console.error.mock.calls).toMatchInlineSnapshot(`
+    Array [
+      Array [
+        "call console.error",
+      ],
+    ]
+  `)
 })
+
+/* eslint no-console:0 */

src/__tests__/old-act.js

@@ -1,35 +1,55 @@
-import {asyncAct} from '../act-compat'
+let asyncAct
+
+beforeEach(() => {
+  jest.resetModules()
+  asyncAct = require('../act-compat').asyncAct
+  jest.spyOn(console, 'error').mockImplementation(() => {})
+})
+
+afterEach(() => {
+  console.error.mockRestore()
+})
 
 jest.mock('../react-dom-16.9.0-is-released', () => ({
   reactDomSixteenPointNineIsReleased: true,
 }))
 
 jest.mock('react-dom/test-utils', () => ({
   act: cb => {
-    const promise = cb()
+    cb()
     return {
       then() {
-        console.error('blah, do not do this')
-        return promise
+        console.error(
+          'Warning: Do not await the result of calling ReactTestUtils.act(...), it is not a Promise.',
+        )
       },
     }
   },
 }))
 
 test('async act works even when the act is an old one', async () => {
-  jest.spyOn(console, 'error').mockImplementation(() => {})
   const callback = jest.fn()
   await asyncAct(async () => {
+    console.error('sigil')
     await Promise.resolve()
     await callback()
+    console.error('sigil')
   })
   expect(console.error.mock.calls).toMatchInlineSnapshot(`
-Array [
-  Array [
-    "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.",
-  ],
-]
-`)
+        Array [
+          Array [
+            Array [
+              "sigil",
+            ],
+          ],
+          Array [
+            "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.",
+          ],
+          Array [
+            "sigil",
+          ],
+        ]
+    `)
   expect(callback).toHaveBeenCalledTimes(1)
 
   // and it doesn't warn you twice
@@ -42,8 +62,46 @@ Array [
   })
   expect(console.error).toHaveBeenCalledTimes(0)
   expect(callback).toHaveBeenCalledTimes(1)
+})
 
-  console.error.mockRestore()
+test('async act recovers from async errors', async () => {
+  try {
+    await asyncAct(async () => {
+      await null
+      throw new Error('test error')
+    })
+  } catch (err) {
+    console.error('call console.error')
+  }
+  expect(console.error).toHaveBeenCalledTimes(2)
+  expect(console.error.mock.calls).toMatchInlineSnapshot(`
+    Array [
+      Array [
+        "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.",
+      ],
+      Array [
+        "call console.error",
+      ],
+    ]
+  `)
+})
+
+test('async act recovers from sync errors', async () => {
+  try {
+    await asyncAct(() => {
+      throw new Error('test error')
+    })
+  } catch (err) {
+    console.error('call console.error')
+  }
+  expect(console.error).toHaveBeenCalledTimes(1)
+  expect(console.error.mock.calls).toMatchInlineSnapshot(`
+    Array [
+      Array [
+        "call console.error",
+      ],
+    ]
+  `)
 })
 
 /* eslint no-console:0 */