From 0410a059a9bc6fd32d40d4f663717d3d0782faa2 Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Wed, 11 May 2022 11:41:30 +0000
Subject: [PATCH 1/2] fix(selectOptions): wait after each click

---
 src/utility/selectOptions.ts | 12 +++++++++++-
 tests/react/index.tsx        | 35 ++++++++++++++++++++++++++++++++++-
 2 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/src/utility/selectOptions.ts b/src/utility/selectOptions.ts
index 04e44ef2..520c62d2 100644
--- a/src/utility/selectOptions.ts
+++ b/src/utility/selectOptions.ts
@@ -1,5 +1,11 @@
 import {getConfig} from '@testing-library/dom'
-import {focus, hasPointerEvents, isDisabled, isElementType} from '../utils'
+import {
+  focus,
+  hasPointerEvents,
+  isDisabled,
+  isElementType,
+  wait,
+} from '../utils'
 import {Config, Instance} from '../setup'
 
 export async function selectOptions(
@@ -100,6 +106,8 @@ async function selectOptionsBase(
         if (withPointerEvents) {
           this.dispatchUIEvent(option, 'click')
         }
+
+        await wait(this[Config])
       }
     } else if (selectedOptions.length === 1) {
       const withPointerEvents =
@@ -124,6 +132,8 @@ async function selectOptionsBase(
         this.dispatchUIEvent(select, 'mouseup')
         this.dispatchUIEvent(select, 'click')
       }
+
+      await wait(this[Config])
     } else {
       throw getConfig().getElementError(
         `Cannot select multiple options on a non-multiple select`,
diff --git a/tests/react/index.tsx b/tests/react/index.tsx
index 1f87e886..60cab9c0 100644
--- a/tests/react/index.tsx
+++ b/tests/react/index.tsx
@@ -1,5 +1,5 @@
 import React, {useState} from 'react'
-import {render, screen} from '@testing-library/react'
+import {render, screen, waitFor} from '@testing-library/react'
 import userEvent from '#src'
 import {getUIValue} from '#src/document'
 import {addListeners} from '#testHelpers'
@@ -173,3 +173,36 @@ describe('typing in a formatted input', () => {
     expect(element).toHaveValue('$234')
   })
 })
+
+test('change select with delayed state update', async () => {
+  function Select() {
+    const [selected, setSelected] = useState<string[]>([])
+
+    return (
+      <select
+        multiple
+        value={selected}
+        onChange={e => {
+          const values = Array.from(e.target.selectedOptions).map(o => o.value)
+          setTimeout(() => setSelected(values))
+        }}
+      >
+        <option>Chrome</option>
+        <option>Firefox</option>
+        <option>Opera</option>
+      </select>
+    )
+  }
+
+  render(<Select />)
+
+  await userEvent.selectOptions(
+    screen.getByRole('listbox'),
+    ['Chrome', 'Firefox'],
+    {delay: 10},
+  )
+
+  await waitFor(() => {
+    expect(screen.getByRole('listbox')).toHaveValue(['Chrome', 'Firefox'])
+  })
+})

From b05724038686272a8e8167faf8aaba0c14b162f3 Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Wed, 11 May 2022 13:28:44 +0000
Subject: [PATCH 2/2] fix react17 environment

---
 tests/react/_env/setup-env.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/tests/react/_env/setup-env.js b/tests/react/_env/setup-env.js
index 2f4625df..308baa70 100644
--- a/tests/react/_env/setup-env.js
+++ b/tests/react/_env/setup-env.js
@@ -6,6 +6,9 @@ if (global.REACT_VERSION) {
   jest.mock('react-dom', () =>
     jest.requireActual(`reactDom${global.REACT_VERSION}`),
   )
+  jest.mock('react-dom/test-utils', () =>
+    jest.requireActual(`reactDom${global.REACT_VERSION}/test-utils`),
+  )
   jest.mock('react-is', () =>
     jest.requireActual(`reactIs${global.REACT_VERSION}`),
   )