@patternfly/react-core 4.236.3 → 4.236.4

package/src/components/Label/__tests__/Label.test.tsx

@@ -91,7 +91,9 @@ describe('Label', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('editable label', () => {
+  test('editable label', async () => {
+    const user = userEvent.setup();
+
     const { asFragment } = render(
       <Label onClose={jest.fn()} onEditCancel={jest.fn()} onEditComplete={jest.fn()} isEditable>
         Something
@@ -103,7 +105,7 @@ describe('Label', () => {
     expect(button).toBeInTheDocument();
     expect(asFragment()).toMatchSnapshot();
 
-    userEvent.click(button);
+    await user.click(button);
     expect(screen.queryByRole('button', { name: 'Something' })).toBeNull();
     expect(asFragment()).toMatchSnapshot();
   });

package/src/components/LabelGroup/__tests__/LabelGroup.test.tsx

@@ -34,7 +34,9 @@ describe('LabelGroup', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('label group expanded', () => {
+  test('label group expanded', async () => {
+    const user = userEvent.setup();
+
     render(
       <LabelGroup>
         <Label>1</Label>
@@ -47,7 +49,7 @@ describe('LabelGroup', () => {
 
     expect(showMoreButton.textContent).toBe('1 more');
 
-    userEvent.click(showMoreButton);
+    await user.click(showMoreButton);
     expect(showMoreButton.textContent).toBe('Show Less');
   });
 

package/src/components/LoginPage/__tests__/LoginForm.test.tsx

@@ -11,30 +11,33 @@ describe('LoginForm', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('should call onChangeUsername callback', () => {
+  test('should call onChangeUsername callback', async () => {
     const mockFn = jest.fn();
+    const user = userEvent.setup();
 
     render(<LoginForm onChangeUsername={mockFn} rememberMeLabel="Remember me" />);
 
-    userEvent.type(screen.getByText('Username'), 'updatedUserName');
+    await user.type(screen.getByText('Username'), 'updatedUserName');
     expect(mockFn).toHaveBeenCalled();
   });
 
-  test('should call onChangePassword callback', () => {
+  test('should call onChangePassword callback', async () => {
     const mockFn = jest.fn();
+    const user = userEvent.setup();
 
     render(<LoginForm onChangePassword={mockFn} rememberMeLabel="Remember me" />);
 
-    userEvent.type(screen.getByText('Password'), 'updatedPassword');
+    await user.type(screen.getByText('Password'), 'updatedPassword');
     expect(mockFn).toHaveBeenCalled();
   });
 
-  test('should call onChangeRememberMe callback', () => {
+  test('should call onChangeRememberMe callback', async () => {
     const mockFn = jest.fn();
+    const user = userEvent.setup();
 
     render(<LoginForm onChangeRememberMe={mockFn} rememberMeLabel="Remember me" />);
 
-    userEvent.click(screen.getByLabelText('Remember me'));
+    await user.click(screen.getByLabelText('Remember me'));
     expect(mockFn).toHaveBeenCalled();
   });
 

package/src/components/Modal/Modal.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { canUseDOM, KEY_CODES, PickOptional } from '../../helpers';
+import { canUseDOM, KeyTypes, PickOptional } from '../../helpers';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
 import { ModalContent } from './ModalContent';
@@ -120,7 +120,7 @@ export class Modal extends React.Component<ModalProps, ModalState> {
 
   handleEscKeyClick = (event: KeyboardEvent): void => {
     const { onEscapePress } = this.props;
-    if (event.keyCode === KEY_CODES.ESCAPE_KEY && this.props.isOpen) {
+    if (event.key === KeyTypes.Escape && this.props.isOpen) {
       onEscapePress ? onEscapePress(event) : this.props.onClose();
     }
   };

package/src/components/Modal/__tests__/Modal.test.tsx

@@ -7,6 +7,7 @@ import { css } from '../../../../../react-styles/dist/js';
 import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
 
 import { Modal } from '../Modal';
+import { KeyTypes } from '../../../helpers';
 
 jest.spyOn(document, 'createElement');
 jest.spyOn(document.body, 'addEventListener');
@@ -24,10 +25,12 @@ describe('Modal', () => {
     expect(document.createElement).toHaveBeenCalledWith('div');
   });
 
-  test('modal closes with escape', () => {
+  test('modal closes with escape', async () => {
+    const user = userEvent.setup();
+    
     render(<Modal {...props} isOpen appendTo={document.body} />);
 
-    userEvent.type(screen.getByText(props.title), '{esc}');
+    await user.type(screen.getByText(props.title), `{${KeyTypes.Escape}}`);
     expect(props.onClose).toHaveBeenCalled();
   });
 

package/src/components/Modal/__tests__/ModalBoxCloseButton.test.tsx

@@ -6,12 +6,13 @@ import userEvent from '@testing-library/user-event';
 import { ModalBoxCloseButton } from '../ModalBoxCloseButton';
 
 describe('ModalBoxCloseButton', () => {
-  test('onClose called when clicked', () => {
+  test('onClose called when clicked', async () => {
     const onClose = jest.fn();
+    const user = userEvent.setup();
 
     render(<ModalBoxCloseButton className="test-box-close-button-class" onClose={onClose} />);
 
-    userEvent.click(screen.getByRole('button'));
+    await user.click(screen.getByRole('button'));
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 });

package/src/components/Nav/__tests__/Nav.test.tsx

@@ -56,7 +56,9 @@ describe('Nav', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('Default Nav List - Trigger item active update', () => {
+  test('Default Nav List - Trigger item active update', async () => {
+    const user = userEvent.setup();
+
     const { asFragment } = renderNav(
       <Nav>
         <NavList>
@@ -69,7 +71,7 @@ describe('Nav', () => {
       </Nav>
     );
 
-    userEvent.click(screen.getByText('Link 2'));
+    await user.click(screen.getByText('Link 2'));
     expect(asFragment()).toMatchSnapshot();
   });
 
@@ -90,8 +92,9 @@ describe('Nav', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('Expandable Nav verify onExpand', () => {
+  test('Expandable Nav verify onExpand', async () => {
     const onExpand = jest.fn();
+    const user = userEvent.setup();
 
     renderNav(
       <Nav>
@@ -107,12 +110,13 @@ describe('Nav', () => {
       </Nav>
     );
 
-    userEvent.click(screen.getByRole('button'));
+    await user.click(screen.getByRole('button'));
     expect(onExpand).toHaveBeenCalled();
   });
 
-  test('Expandable Nav List - Trigger toggle', () => {
+  test('Expandable Nav List - Trigger toggle', async () => {
     window.location.hash = '#link2';
+    const user = userEvent.setup();
 
     const { asFragment } = renderNav(
       <Nav>
@@ -128,7 +132,7 @@ describe('Nav', () => {
       </Nav>
     );
 
-    userEvent.click(screen.getByText('Section 1'));
+    await user.click(screen.getByText('Section 1'));
     expect(asFragment()).toMatchSnapshot();
   });
 

package/src/components/NumberInput/NumberInput.tsx

@@ -5,7 +5,7 @@ import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 import { InputGroup } from '../InputGroup';
 import { Button, ButtonProps } from '../Button';
-import { KEY_CODES, ValidatedOptions } from '../../helpers';
+import { KeyTypes, ValidatedOptions } from '../../helpers';
 import { TextInput } from '../TextInput';
 
 export interface NumberInputProps extends React.HTMLProps<HTMLDivElement> {
@@ -56,11 +56,11 @@ export interface NumberInputProps extends React.HTMLProps<HTMLDivElement> {
 type DefaultKeyDownHandlerArgs = Pick<NumberInputProps, 'inputName' | 'onMinus' | 'onPlus'>;
 
 const defaultKeyDownHandler = (args: DefaultKeyDownHandlerArgs) => (event: React.KeyboardEvent<HTMLInputElement>) => {
-  if (KEY_CODES.ARROW_UP === event.keyCode && args.onPlus) {
+  if (KeyTypes.ArrowUp === event.key && args.onPlus) {
     event.preventDefault();
     args.onPlus(null, args.inputName);
   }
-  if (KEY_CODES.ARROW_DOWN === event.keyCode && args.onMinus) {
+  if (KeyTypes.ArrowDown === event.key && args.onMinus) {
     event.preventDefault();
     args.onMinus(null, args.inputName);
   }

package/src/components/NumberInput/__tests__/NumberInput.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { NumberInput } from '../NumberInput';
 import userEvent from '@testing-library/user-event';
 
@@ -101,71 +101,96 @@ describe('numberInput', () => {
     expect(onChangeMock).not.toHaveBeenCalled();
   });
 
-  test('calls onChange callback when input changes', () => {
+  test('calls onChange callback when input changes', async () => {
     const onChangeMock = jest.fn();
+    const user = userEvent.setup();
+
     render(<NumberInput onChange={onChangeMock}>55</NumberInput>);
 
     const input = screen.getByRole('spinbutton');
-    userEvent.type(input, '55');
+    await user.type(input, '55');
 
     expect(onChangeMock).toHaveBeenCalledTimes(2);
   });
 
-  test('does not call onBlur callback when input does not lose focus', () => {
+  test('does not call onBlur callback when input does not lose focus', async () => {
     const onBlurMock = jest.fn();
+    const user = userEvent.setup();
 
     render(<NumberInput onBlur={onBlurMock}>5</NumberInput>);
 
     const input = screen.getByRole('spinbutton');
-    userEvent.click(input);
+    await user.click(input);
 
     expect(onBlurMock).not.toHaveBeenCalled();
   });
 
-  test('calls onBlur callback when input loses focus', () => {
+  test('calls onBlur callback when input loses focus', async () => {
     const onBlurMock = jest.fn();
+    const user = userEvent.setup();
 
     render(<NumberInput onBlur={onBlurMock}>5</NumberInput>);
 
     const input = screen.getByRole('spinbutton');
-    userEvent.click(input);
-    userEvent.click(document.body);
+    await user.click(input);
+    await user.click(document.body);
 
     expect(onBlurMock).toHaveBeenCalledTimes(1);
   });
 
-  test('removes leading zeros from a positive whole number', () => {
+  test('removes leading zeros from a positive whole number', async () => {
+    const user = userEvent.setup();
+
     render(<NumberInput value={10} onChange={() => {}} />);
 
     const input = screen.getByRole('spinbutton');
-    userEvent.type(input, '{arrowleft}{arrowleft}0');
+
+    await user.click(input);
+
+    // fireEvent is used here due to an issue with the current version of userEvent where userEvent.type/.keyboard does
+    // not appear to cause the '0' to be properly added to the input's display value
+    fireEvent.change(input, { target: { value: '010' } });
     expect(input).toHaveDisplayValue('010');
 
-    userEvent.click(document.body);
+    await user.click(document.body);
 
     expect(input).toHaveDisplayValue('10');
   });
 
-  test('removes leading zeros from a negative whole number', () => {
+  test('removes leading zeros from a negative whole number', async () => {
+    const user = userEvent.setup();
+
     render(<NumberInput value={-18} onChange={() => {}} />);
 
     const input = screen.getByRole('spinbutton');
-    userEvent.type(input, '{arrowleft}{arrowleft}0');
+
+    await user.click(input);
+
+    // fireEvent is used here due to an issue with the current version of userEvent where userEvent.type/.keyboard does
+    // not appear to cause the '0' to be properly added to the input's display value
+    fireEvent.change(input, { target: { value: '-018' } });
     expect(input).toHaveDisplayValue('-018');
 
-    userEvent.click(document.body);
+    await user.click(document.body);
 
     expect(input).toHaveDisplayValue('-18');
   });
 
-  test('removes leading zeros from a decimal number', () => {
+  test('removes leading zeros from a decimal number', async () => {
+    const user = userEvent.setup();
+
     render(<NumberInput value={47.01} onChange={() => {}} />);
 
     const input = screen.getByRole('spinbutton');
-    userEvent.type(input, '{arrowleft}{arrowleft}{arrowleft}{arrowleft}{arrowleft}0');
+
+    await user.click(input);
+
+    // fireEvent is used here due to an issue with the current version of userEvent where userEvent.type/.keyboard does
+    // not appear to cause the '0' to be properly added to the input's display value
+    fireEvent.change(input, { target: { value: '047.01' } });
     expect(input).toHaveDisplayValue('047.01');
 
-    userEvent.click(document.body);
+    await user.click(document.body);
 
     expect(input).toHaveDisplayValue('47.01');
   });

package/src/components/OptionsMenu/OptionsMenuToggleWithText.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
-import { KEY_CODES } from '../../helpers/constants';
+import { KeyTypes } from '../../helpers/constants';
 import styles from '@patternfly/react-styles/css/components/OptionsMenu/options-menu';
 import { DropdownContext } from '../Dropdown';
 
@@ -96,10 +96,9 @@ export const OptionsMenuToggleWithText: React.FunctionComponent<OptionsMenuToggl
   };
 
   const onEscPress = (event: KeyboardEvent) => {
-    const keyCode = event.keyCode || event.which;
     if (
       isOpen &&
-      (keyCode === KEY_CODES.ESCAPE_KEY || event.key === 'Tab') &&
+      (event.key === KeyTypes.Escape || event.key === 'Tab') &&
       parentRef &&
       parentRef.current &&
       parentRef.current.contains(event.target as Node)

package/src/components/Pagination/Navigation.tsx

@@ -8,7 +8,7 @@ import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-d
 import { Button, ButtonVariant } from '../Button';
 import { OnSetPage } from './Pagination';
 import { pluralize, PickOptional } from '../../helpers';
-import { KEY_CODES } from '../../helpers/constants';
+import { KeyTypes } from '../../helpers/constants';
 
 export interface NavigationProps extends React.HTMLProps<HTMLElement> {
   /** Additional classes for the container */
@@ -113,7 +113,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
     lastPage: number,
     onPageInput: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void
   ): void {
-    if (event.keyCode === KEY_CODES.ENTER) {
+    if (event.key === KeyTypes.Enter) {
       const inputPage = Navigation.parseInteger(this.state.userInputPage, lastPage) as number;
       onPageInput(event, Number.isNaN(inputPage) ? (page as number) : inputPage);
       this.handleNewPage(event, Number.isNaN(inputPage) ? (page as number) : inputPage);

package/src/components/Pagination/__tests__/Pagination.test.tsx

@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { Pagination, PaginationVariant } from '../index';
+import { KeyTypes } from '../../../helpers';
 
 describe('Pagination', () => {
   describe('component render', () => {
@@ -117,166 +118,204 @@ describe('Pagination', () => {
     describe('onSetPage', () => {
       const onSetPage = jest.fn();
 
-      test('should call first', () => {
+      test('should call first', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onSetPage={onSetPage} itemCount={40} page={2} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to first page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to first page' }));
         expect(onSetPage).toHaveBeenCalled();
       });
 
-      test('should call previous', () => {
+      test('should call previous', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onSetPage={onSetPage} itemCount={40} page={3} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to previous page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to previous page' }));
         expect(onSetPage).toHaveBeenCalled();
       });
 
-      test('should call next', () => {
+      test('should call next', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onSetPage={onSetPage} itemCount={40} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to next page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to next page' }));
         expect(onSetPage).toHaveBeenCalled();
       });
 
-      test('should call last', () => {
+      test('should call last', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onSetPage={onSetPage} itemCount={40} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to last page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to last page' }));
         expect(onSetPage).toHaveBeenCalled();
       });
 
-      test('should call input', () => {
+      test('should call input', async () => {
+        const user = userEvent.setup();
+        
         render(<Pagination onSetPage={onSetPage} itemCount={40} />);
 
         const input = screen.getByLabelText('Current page');
-        userEvent.type(input, '1');
-        userEvent.type(input, '{enter}');
+        await user.type(input, '1');
+        await user.type(input, `{${KeyTypes.Enter}}`);
 
         expect(onSetPage).toHaveBeenCalled();
       });
 
-      test('should call input wrong value', () => {
+      test('should call input wrong value', async () => {
+        const user = userEvent.setup();
+        
         render(<Pagination onSetPage={onSetPage} itemCount={40} />);
 
         const input = screen.getByLabelText('Current page');
-        userEvent.type(input, 'a');
-        userEvent.type(input, '{enter}');
+        await user.type(input, 'a');
+        await user.type(input, `{${KeyTypes.Enter}}`);
 
         expect(onSetPage).toHaveBeenCalled();
       });
 
-      test('should call input huge page number', () => {
+      test('should call input huge page number', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onSetPage={onSetPage} itemCount={40} />);
 
         const input = screen.getByLabelText('Current page');
-        userEvent.type(input, '10');
-        userEvent.type(input, '{enter}');
+        await user.type(input, '10');
+        await user.type(input, `{${KeyTypes.Enter}}`);
 
         expect(onSetPage).toHaveBeenCalled();
       });
 
-      test('should call input small page number', () => {
+      test('should call input small page number', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onSetPage={onSetPage} itemCount={40} />);
 
         const input = screen.getByLabelText('Current page');
-        userEvent.type(input, '-10');
-        userEvent.type(input, '{enter}');
+        await user.type(input, '-10');
+        await user.type(input, `{${KeyTypes.Enter}}`);
 
         expect(onSetPage).toHaveBeenCalled();
       });
 
-      test('should NOT call', () => {
+      test('should NOT call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination itemCount={40} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to last page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to last page' }));
         expect(onSetPage).not.toHaveBeenCalled();
       });
     });
 
     describe('onFirst', () => {
       const onFirst = jest.fn();
-      test('should call', () => {
+      test('should call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onFirstClick={onFirst} itemCount={40} page={2} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to first page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to first page' }));
         expect(onFirst).toHaveBeenCalled();
       });
 
-      test('should NOT call', () => {
+      test('should NOT call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination itemCount={40} page={2} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to first page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to first page' }));
         expect(onFirst).not.toHaveBeenCalled();
       });
     });
 
     describe('onLast', () => {
       const onLast = jest.fn();
-      test('should call', () => {
+      test('should call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onLastClick={onLast} itemCount={40} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to last page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to last page' }));
         expect(onLast).toHaveBeenCalled();
       });
 
-      test('should NOT call', () => {
+      test('should NOT call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination itemCount={40} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to last page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to last page' }));
         expect(onLast).not.toHaveBeenCalled();
       });
     });
 
     describe('onPrevious', () => {
       const onPrevious = jest.fn();
-      test('should call', () => {
+      test('should call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onPreviousClick={onPrevious} itemCount={40} page={3} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to previous page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to previous page' }));
         expect(onPrevious).toHaveBeenCalled();
       });
 
-      test('should NOT call', () => {
+      test('should NOT call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination itemCount={40} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to previous page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to previous page' }));
         expect(onPrevious).not.toHaveBeenCalled();
       });
     });
 
     describe('onNext', () => {
       const onNext = jest.fn();
-      test('should call', () => {
+      test('should call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onNextClick={onNext} itemCount={40} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to next page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to next page' }));
         expect(onNext).toHaveBeenCalled();
       });
 
-      test('should NOT call', () => {
+      test('should NOT call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination itemCount={40} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to previous page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to previous page' }));
         expect(onNext).not.toHaveBeenCalled();
       });
     });
 
     describe('onPerPage', () => {
       const onPerPage = jest.fn();
-      test('should call', () => {
+      test('should call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onPerPageSelect={onPerPage} itemCount={40} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Items per page' }));
-        userEvent.click(screen.getByText('20 per page'));
+        await user.click(screen.getByRole('button', { name: 'Items per page' }));
+        await user.click(screen.getByText('20 per page'));
 
         expect(onPerPage).toHaveBeenCalled();
       });
 
-      test('should NOT call', () => {
+      test('should NOT call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination itemCount={40} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Items per page' }));
-        userEvent.click(screen.getByText('20 per page'));
+        await user.click(screen.getByRole('button', { name: 'Items per page' }));
+        await user.click(screen.getByText('20 per page'));
 
         expect(onPerPage).not.toHaveBeenCalled();
       });

package/src/components/Radio/__tests__/Radio.test.tsx

@@ -73,10 +73,12 @@ describe('Radio', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('Radio passes value and event to onChange handler', () => {
+  test('Radio passes value and event to onChange handler', async () => {
+    const user = userEvent.setup();
+
     render(<Radio id="check" {...props} aria-label="check" name="check" />);
 
-    userEvent.click(screen.getByRole('radio'));
+    await user.click(screen.getByRole('radio'));
     expect(props.onChange).toHaveBeenCalledWith(true, expect.any(Object));
   });