fix(selectOptions): wait after each click (#951)

Author: ph-fritsche

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`,

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}`),
   )

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'])
+  })
+})