From 7ecf5258d0072540092b1de7474ce9e3f040ecba Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Sat, 10 Apr 2021 09:49:59 +0200
Subject: [PATCH 1/5] test: current behavior of flushing updates from discrete
 events too late

---
 src/__tests__/events.js | 48 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/src/__tests__/events.js b/src/__tests__/events.js
index 587bfdae..7d54c8bd 100644
--- a/src/__tests__/events.js
+++ b/src/__tests__/events.js
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import * as ReactDOM from 'react-dom'
 import {render, fireEvent} from '../'
 
 const eventTypes = [
@@ -254,3 +255,50 @@ test('blur/focus bubbles in react', () => {
   expect(handleFocus).toHaveBeenCalledTimes(1)
   expect(handleBubbledFocus).toHaveBeenCalledTimes(1)
 })
+
+test('discrete events are not wrapped in act', () => {
+  function AddDocumentClickListener({onClick}) {
+    React.useEffect(() => {
+      document.addEventListener('click', onClick)
+      return () => {
+        document.removeEventListener('click', onClick)
+      }
+    }, [onClick])
+    return null
+  }
+  function Component({onDocumentClick}) {
+    const [open, setOpen] = React.useState(false)
+
+    return (
+      <React.Fragment>
+        <button onClick={() => setOpen(true)} />
+        {open &&
+          ReactDOM.createPortal(
+            <AddDocumentClickListener onClick={onDocumentClick} />,
+            document.body,
+          )}
+      </React.Fragment>
+    )
+  }
+  const onDocumentClick = jest.fn()
+  render(<Component onDocumentClick={onDocumentClick} />)
+
+  const button = document.querySelector('button')
+  fireEvent.click(button)
+
+  // We added a native click listener from an effect.
+  // There are two possible scenarios:
+  // 1. If that effect is flushed during the click the native click listener would still receive the event that caused the native listener to be added.
+  // 2. If that effect is flushed before we return from fireEvent.click the native click listener would not receive the event that caused the native listener to be added.
+  // React flushes effects scheduled from an update by a "discrete" event immediately.
+  // but not effects in a batched context (e.g. act(() => {}))
+  // So if we were in act(() => {}), we would see scenario 2 i.e. `onDocumentClick` would not be called
+  // If we were not in `act(() => {})`, we would see scenario 1 i.e. `onDocumentClick` would already be called
+  expect(onDocumentClick).toHaveBeenCalledTimes(1)
+
+  // verify we did actually flush the effect before we returned from `fireEvent.click` i.e. the native click listener is mounted.
+  document.dispatchEvent(
+    new MouseEvent('click', {bubbles: true, cancelable: true}),
+  )
+  expect(onDocumentClick).toHaveBeenCalledTimes(2)
+})

From a50c9e143a45c215d5e31863657da00d24c383b1 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Sat, 10 Apr 2021 09:50:17 +0200
Subject: [PATCH 2/5] chore(refactor): Add infra for notion of "discrete
 events"

---
 src/fire-event.js | 30 ++++++++++++++++++++++++++++--
 src/pure.js       |  7 -------
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/fire-event.js b/src/fire-event.js
index cb790c7f..5bf030da 100644
--- a/src/fire-event.js
+++ b/src/fire-event.js
@@ -1,13 +1,39 @@
 import {fireEvent as dtlFireEvent} from '@testing-library/dom'
+import act from './act-compat'
+
+const discreteEvents = new Set()
+function isDiscreteEvent(type) {
+  return discreteEvents.has(type)
+}
+
+function noAct(cb) {
+  cb()
+}
 
 // react-testing-library's version of fireEvent will call
 // dom-testing-library's version of fireEvent. The reason
 // we make this distinction however is because we have
 // a few extra events that work a bit differently
-const fireEvent = (...args) => dtlFireEvent(...args)
+function fireEvent(element, event, ...args) {
+  const eventWrapper = isDiscreteEvent(event.type) ? noAct : act
+
+  let fireEventReturnValue
+  eventWrapper(() => {
+    fireEventReturnValue = dtlFireEvent(element, event, ...args)
+  })
+  return fireEventReturnValue
+}
 
 Object.keys(dtlFireEvent).forEach(key => {
-  fireEvent[key] = (...args) => dtlFireEvent[key](...args)
+  fireEvent[key] = (element, ...args) => {
+    const eventWrapper = isDiscreteEvent(key.toLowerCase()) ? noAct : act
+
+    let fireEventReturnValue
+    eventWrapper(() => {
+      fireEventReturnValue = dtlFireEvent[key](element, ...args)
+    })
+    return fireEventReturnValue
+  }
 })
 
 // React event system tracks native mouseOver/mouseOut events for
diff --git a/src/pure.js b/src/pure.js
index 75098f78..ecc3e49f 100644
--- a/src/pure.js
+++ b/src/pure.js
@@ -16,13 +16,6 @@ configureDTL({
     })
     return result
   },
-  eventWrapper: cb => {
-    let result
-    act(() => {
-      result = cb()
-    })
-    return result
-  },
 })
 
 const mountedContainers = new Set()

From 2b3d71e7d218018f85f30c270212c270a2bd06b1 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Sat, 10 Apr 2021 10:03:40 +0200
Subject: [PATCH 3/5] fix(fireEvent): Flush effects from discrete events
 immediately

BREAKING CHANGE:
Importing from `@testing-library/react` will no longer wrap event
dispatches of `@testing-library/dom` in `act(() => {})`
---
 src/__tests__/events.js | 92 ++++++++++++++++++++++-------------------
 src/fire-event.js       | 60 ++++++++++++++++++++++++++-
 2 files changed, 108 insertions(+), 44 deletions(-)

diff --git a/src/__tests__/events.js b/src/__tests__/events.js
index 7d54c8bd..bcbf8ff3 100644
--- a/src/__tests__/events.js
+++ b/src/__tests__/events.js
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
-import {render, fireEvent} from '../'
+import {render, createEvent, fireEvent} from '../'
 
 const eventTypes = [
   {
@@ -256,49 +256,55 @@ test('blur/focus bubbles in react', () => {
   expect(handleBubbledFocus).toHaveBeenCalledTimes(1)
 })
 
-test('discrete events are not wrapped in act', () => {
-  function AddDocumentClickListener({onClick}) {
-    React.useEffect(() => {
-      document.addEventListener('click', onClick)
-      return () => {
-        document.removeEventListener('click', onClick)
-      }
-    }, [onClick])
-    return null
-  }
-  function Component({onDocumentClick}) {
-    const [open, setOpen] = React.useState(false)
+test.each([
+  ['fireEvent.click', element => fireEvent.click(element)],
+  ['fireEvent()', element => fireEvent(element, createEvent.click(element))],
+])(
+  'discrete events are not wrapped in act when using %s',
+  (_, dispatchClick) => {
+    function AddDocumentClickListener({onClick}) {
+      React.useEffect(() => {
+        document.addEventListener('click', onClick)
+        return () => {
+          document.removeEventListener('click', onClick)
+        }
+      }, [onClick])
+      return null
+    }
+    function Component({onDocumentClick}) {
+      const [open, setOpen] = React.useState(false)
 
-    return (
-      <React.Fragment>
-        <button onClick={() => setOpen(true)} />
-        {open &&
-          ReactDOM.createPortal(
-            <AddDocumentClickListener onClick={onDocumentClick} />,
-            document.body,
-          )}
-      </React.Fragment>
-    )
-  }
-  const onDocumentClick = jest.fn()
-  render(<Component onDocumentClick={onDocumentClick} />)
+      return (
+        <React.Fragment>
+          <button onClick={() => setOpen(true)} />
+          {open &&
+            ReactDOM.createPortal(
+              <AddDocumentClickListener onClick={onDocumentClick} />,
+              document.body,
+            )}
+        </React.Fragment>
+      )
+    }
+    const onDocumentClick = jest.fn()
+    render(<Component onDocumentClick={onDocumentClick} />)
 
-  const button = document.querySelector('button')
-  fireEvent.click(button)
+    const button = document.querySelector('button')
+    dispatchClick(button)
 
-  // We added a native click listener from an effect.
-  // There are two possible scenarios:
-  // 1. If that effect is flushed during the click the native click listener would still receive the event that caused the native listener to be added.
-  // 2. If that effect is flushed before we return from fireEvent.click the native click listener would not receive the event that caused the native listener to be added.
-  // React flushes effects scheduled from an update by a "discrete" event immediately.
-  // but not effects in a batched context (e.g. act(() => {}))
-  // So if we were in act(() => {}), we would see scenario 2 i.e. `onDocumentClick` would not be called
-  // If we were not in `act(() => {})`, we would see scenario 1 i.e. `onDocumentClick` would already be called
-  expect(onDocumentClick).toHaveBeenCalledTimes(1)
+    // We added a native click listener from an effect.
+    // There are two possible scenarios:
+    // 1. If that effect is flushed during the click the native click listener would still receive the event that caused the native listener to be added.
+    // 2. If that effect is flushed before we return from fireEvent.click the native click listener would not receive the event that caused the native listener to be added.
+    // React flushes effects scheduled from an update by a "discrete" event immediately.
+    // but not effects in a batched context (e.g. act(() => {}))
+    // So if we were in act(() => {}), we would see scenario 2 i.e. `onDocumentClick` would not be called
+    // If we were not in `act(() => {})`, we would see scenario 1 i.e. `onDocumentClick` would already be called
+    expect(onDocumentClick).toHaveBeenCalledTimes(1)
 
-  // verify we did actually flush the effect before we returned from `fireEvent.click` i.e. the native click listener is mounted.
-  document.dispatchEvent(
-    new MouseEvent('click', {bubbles: true, cancelable: true}),
-  )
-  expect(onDocumentClick).toHaveBeenCalledTimes(2)
-})
+    // verify we did actually flush the effect before we returned from `fireEvent.click` i.e. the native click listener is mounted.
+    document.dispatchEvent(
+      new MouseEvent('click', {bubbles: true, cancelable: true}),
+    )
+    expect(onDocumentClick).toHaveBeenCalledTimes(2)
+  },
+)
diff --git a/src/fire-event.js b/src/fire-event.js
index 5bf030da..fb790030 100644
--- a/src/fire-event.js
+++ b/src/fire-event.js
@@ -1,7 +1,59 @@
 import {fireEvent as dtlFireEvent} from '@testing-library/dom'
 import act from './act-compat'
 
-const discreteEvents = new Set()
+// https://github.com/facebook/react/blob/b48b38af68c27fd401fe4b923a8fa0b229693cd4/packages/react-dom/src/events/ReactDOMEventListener.js#L310-L366
+const discreteEvents = new Set([
+  'cancel',
+  'click',
+  'close',
+  'contextmenu',
+  'copy',
+  'cut',
+  'auxclick',
+  'dblclick',
+  'dragend',
+  'dragstart',
+  'drop',
+  'focusin',
+  'focusout',
+  'input',
+  'invalid',
+  'keydown',
+  'keypress',
+  'keyup',
+  'mousedown',
+  'mouseup',
+  'paste',
+  'pause',
+  'play',
+  'pointercancel',
+  'pointerdown',
+  'pointerup',
+  'ratechange',
+  'reset',
+  'seeked',
+  'submit',
+  'touchcancel',
+  'touchend',
+  'touchstart',
+  'volumechange',
+  'change',
+  'selectionchange',
+  'textInput',
+  'compositionstart',
+  'compositionend',
+  'compositionupdate',
+  'beforeblur',
+  'afterblur',
+  'beforeinput',
+  'blur',
+  'fullscreenchange',
+  'focus',
+  'hashchange',
+  'popstate',
+  'select',
+  'selectstart',
+])
 function isDiscreteEvent(type) {
   return discreteEvents.has(type)
 }
@@ -15,6 +67,9 @@ function noAct(cb) {
 // we make this distinction however is because we have
 // a few extra events that work a bit differently
 function fireEvent(element, event, ...args) {
+  // `act` would simulate how this event would behave if dispatched from a React event listener.
+  // In almost all cases we want to simulate how this event behaves in response to a user interaction.
+  // See discussion in https://github.com/facebook/react/pull/21202
   const eventWrapper = isDiscreteEvent(event.type) ? noAct : act
 
   let fireEventReturnValue
@@ -26,6 +81,9 @@ function fireEvent(element, event, ...args) {
 
 Object.keys(dtlFireEvent).forEach(key => {
   fireEvent[key] = (element, ...args) => {
+    // `act` would simulate how this event would behave if dispatched from a React event listener.
+    // In almost all cases we want to simulate how this event behaves in response to a user interaction.
+    // See discussion in https://github.com/facebook/react/pull/21202
     const eventWrapper = isDiscreteEvent(key.toLowerCase()) ? noAct : act
 
     let fireEventReturnValue

From 5f7338176a6716035d9d2ae7571143ee6ecf7983 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Sat, 10 Apr 2021 10:25:51 +0200
Subject: [PATCH 4/5] just portals

---
 src/__tests__/events.js | 2 +-
 src/fire-event.js       | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/__tests__/events.js b/src/__tests__/events.js
index bcbf8ff3..7bb67475 100644
--- a/src/__tests__/events.js
+++ b/src/__tests__/events.js
@@ -295,7 +295,7 @@ test.each([
     // There are two possible scenarios:
     // 1. If that effect is flushed during the click the native click listener would still receive the event that caused the native listener to be added.
     // 2. If that effect is flushed before we return from fireEvent.click the native click listener would not receive the event that caused the native listener to be added.
-    // React flushes effects scheduled from an update by a "discrete" event immediately.
+    // React flushes effects scheduled from an update by a "discrete" event immediately if that effect was scheduled from a portaled component.
     // but not effects in a batched context (e.g. act(() => {}))
     // So if we were in act(() => {}), we would see scenario 2 i.e. `onDocumentClick` would not be called
     // If we were not in `act(() => {})`, we would see scenario 1 i.e. `onDocumentClick` would already be called
diff --git a/src/fire-event.js b/src/fire-event.js
index fb790030..fb0e9d11 100644
--- a/src/fire-event.js
+++ b/src/fire-event.js
@@ -59,7 +59,10 @@ function isDiscreteEvent(type) {
 }
 
 function noAct(cb) {
+  // Don't alter semantics of `cb`.
   cb()
+  // But make sure updates are flushed before returning.
+  act(() => {})
 }
 
 // react-testing-library's version of fireEvent will call

From 29da123809d661e40c883407b7d120ee35b7920a Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Sat, 10 Apr 2021 10:45:36 +0200
Subject: [PATCH 5/5] cb -> callback

---
 src/fire-event.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/fire-event.js b/src/fire-event.js
index fb0e9d11..a36fbd07 100644
--- a/src/fire-event.js
+++ b/src/fire-event.js
@@ -58,9 +58,9 @@ function isDiscreteEvent(type) {
   return discreteEvents.has(type)
 }
 
-function noAct(cb) {
-  // Don't alter semantics of `cb`.
-  cb()
+function noAct(callback) {
+  // Don't alter semantics of `callback`.
+  callback()
   // But make sure updates are flushed before returning.
   act(() => {})
 }