Upgrade user event (#4426)

* Upgrade testing tools

Author: snowystinger

package.json

@@ -94,7 +94,7 @@
     "@testing-library/dom": "^9.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^12.1.3",
+    "@testing-library/user-event": "^14.4.3",
     "@types/react": "^18.2.7",
     "@types/storybook__react": "^5.2.1",
     "@typescript-eslint/eslint-plugin": "^5.40.0",

packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx

@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, render} from '@react-spectrum/test-utils';
 import {AriaCheckboxGroupItemProps, AriaCheckboxGroupProps} from '@react-types/checkbox';
 import {CheckboxGroupState, useCheckboxGroupState} from '@react-stately/checkbox';
+import {pointerMap, render} from '@react-spectrum/test-utils';
 import React, {useRef} from 'react';
 import {useCheckboxGroup, useCheckboxGroupItem} from '../';
 import userEvent from '@testing-library/user-event';
@@ -38,7 +38,12 @@ function CheckboxGroup({groupProps, checkboxProps}: {groupProps: AriaCheckboxGro
 }
 
 describe('useCheckboxGroup', () => {
-  it('handles defaults', () => {
+  let user;
+  beforeAll(() => {
+    user = userEvent.setup({delay: null, pointerMap});
+  });
+
+  it('handles defaults', async () => {
     let onChangeSpy = jest.fn();
     let {getByRole, getAllByRole, getByLabelText} = render(
       <CheckboxGroup
@@ -68,7 +73,7 @@ describe('useCheckboxGroup', () => {
     expect(checkboxes[2].checked).toBeFalsy();
 
     let dragons = getByLabelText('Dragons');
-    userEvent.click(dragons);
+    await user.click(dragons);
     expect(onChangeSpy).toHaveBeenCalledTimes(1);
     expect(onChangeSpy).toHaveBeenCalledWith(['dragons']);
 
@@ -158,7 +163,7 @@ describe('useCheckboxGroup', () => {
     expect(checkboxGroup).toHaveAttribute('data-testid', 'favorite-pet');
   });
 
-  it('sets aria-disabled and makes checkboxes disabled when isDisabled is true', () => {
+  it('sets aria-disabled and makes checkboxes disabled when isDisabled is true', async () => {
     let groupOnChangeSpy = jest.fn();
     let checkboxOnChangeSpy = jest.fn();
     let {getAllByRole, getByRole, getByLabelText} = render(
@@ -180,7 +185,7 @@ describe('useCheckboxGroup', () => {
     expect(checkboxes[2]).toHaveAttribute('disabled');
     let dragons = getByLabelText('Dragons');
 
-    act(() => {userEvent.click(dragons);});
+    await user.click(dragons);
 
     expect(groupOnChangeSpy).toHaveBeenCalledTimes(0);
     expect(checkboxOnChangeSpy).toHaveBeenCalledTimes(0);
@@ -227,7 +232,7 @@ describe('useCheckboxGroup', () => {
     expect(checkboxes[2]).not.toHaveAttribute('disabled');
   });
 
-  it('sets aria-readonly="true" on each checkbox', () => {
+  it('sets aria-readonly="true" on each checkbox', async () => {
     let groupOnChangeSpy = jest.fn();
     let checkboxOnChangeSpy = jest.fn();
     let {getAllByRole, getByLabelText} = render(
@@ -247,14 +252,14 @@ describe('useCheckboxGroup', () => {
     expect(checkboxes[2].checked).toBeFalsy();
     let dragons = getByLabelText('Dragons');
 
-    act(() => {userEvent.click(dragons);});
+    await user.click(dragons);
 
     expect(groupOnChangeSpy).toHaveBeenCalledTimes(0);
     expect(checkboxOnChangeSpy).toHaveBeenCalledTimes(0);
     expect(checkboxes[2].checked).toBeFalsy();
   });
 
-  it('should not update state for readonly checkbox', () => {
+  it('should not update state for readonly checkbox', async () => {
     let groupOnChangeSpy = jest.fn();
     let checkboxOnChangeSpy = jest.fn();
     let {getAllByRole, getByLabelText} = render(
@@ -270,7 +275,7 @@ describe('useCheckboxGroup', () => {
     let checkboxes = getAllByRole('checkbox') as HTMLInputElement[];
     let dragons = getByLabelText('Dragons');
 
-    userEvent.click(dragons);
+    await user.click(dragons);
 
     expect(groupOnChangeSpy).toHaveBeenCalledTimes(0);
     expect(checkboxOnChangeSpy).toHaveBeenCalledTimes(0);

packages/@react-aria/color/test/useColorWheel.test.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, fireEvent, installMouseEvent, installPointerEvent, render} from '@react-spectrum/test-utils';
+import {act, fireEvent, installMouseEvent, installPointerEvent, pointerMap, render} from '@react-spectrum/test-utils';
 import {ColorWheelProps} from '@react-types/color';
 import {parseColor, useColorWheelState} from '@react-stately/color';
 import React, {useRef} from 'react';
@@ -50,8 +50,10 @@ function ColorWheel(props: ColorWheelProps) {
 
 describe('useColorWheel', () => {
   let onChangeSpy = jest.fn();
+  let user;
 
   beforeAll(() => {
+    user = userEvent.setup({delay: null, pointerMap});
     jest.useFakeTimers();
   });
 
@@ -72,7 +74,7 @@ describe('useColorWheel', () => {
     expect(slider).toHaveAttribute('value', '0');
   });
 
-  it('the slider is focusable', () => {
+  it('the slider is focusable', async () => {
     let {getAllByRole, getByRole} = render(<div>
       <button>A</button>
       <ColorWheel />
@@ -81,17 +83,17 @@ describe('useColorWheel', () => {
     let slider = getByRole('slider');
     let [buttonA, buttonB] = getAllByRole('button');
 
-    userEvent.tab();
+    await user.tab();
     expect(document.activeElement).toBe(buttonA);
-    userEvent.tab();
+    await user.tab();
     expect(document.activeElement).toBe(slider);
-    userEvent.tab();
+    await user.tab();
     expect(document.activeElement).toBe(buttonB);
-    userEvent.tab({shift: true});
+    await user.tab({shift: true});
     expect(document.activeElement).toBe(slider);
   });
 
-  it('disabled', () => {
+  it('disabled', async () => {
     let {getAllByRole, getByRole} = render(<div>
       <button>A</button>
       <ColorWheel isDisabled />
@@ -101,11 +103,11 @@ describe('useColorWheel', () => {
     let [buttonA, buttonB] = getAllByRole('button');
     expect(slider).toHaveAttribute('disabled');
 
-    userEvent.tab();
+    await user.tab();
     expect(document.activeElement).toBe(buttonA);
-    userEvent.tab();
+    await user.tab();
     expect(document.activeElement).toBe(buttonB);
-    userEvent.tab({shift: true});
+    await user.tab({shift: true});
     expect(document.activeElement).toBe(buttonA);
   });