@patternfly/react-core 4.236.3 → 4.236.4

package/src/components/SearchInput/AdvancedSearchMenu.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Button } from '../Button';
 import { ActionGroup, Form, FormGroup } from '../Form';
 import { TextInput } from '../TextInput';
-import { GenerateId, KEY_CODES } from '../../helpers';
+import { GenerateId, KeyTypes } from '../../helpers';
 import { SearchAttribute } from './SearchInput';
 import { Panel, PanelMain, PanelMainBody } from '../Panel';
 import { css } from '@patternfly/react-styles';
@@ -107,10 +107,9 @@ export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps
   };
 
   const onEscPress = (event: KeyboardEvent) => {
-    const keyCode = event.keyCode || event.which;
     if (
       isSearchMenuOpen &&
-      keyCode === KEY_CODES.ESCAPE_KEY &&
+      event.key === KeyTypes.Escape &&
       parentRef &&
       parentRef.current.contains(event.target as Node)
     ) {

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

@@ -33,20 +33,22 @@ describe('SearchInput', () => {
     expect(screen.getByTestId('test-id').querySelector('.pf-c-badge')).toBeInTheDocument();
   });
 
-  test('navigable search results', () => {
+  test('navigable search results', async () => {
+    const user = userEvent.setup();
+
     render(<SearchInput {...props} resultsCount="3 / 7" aria-label="simple text input" data-testid="test-id" />);
 
     const input = screen.getByTestId('test-id');
     expect(input.querySelector('.pf-c-text-input-group__group')).toBeInTheDocument();
     expect(input.querySelector('.pf-c-badge')).toBeInTheDocument();
 
-    userEvent.click(screen.getByRole('button', { name: 'Previous' }));
+    await user.click(screen.getByRole('button', { name: 'Previous' }));
     expect(props.onPreviousClick).toHaveBeenCalled();
 
-    userEvent.click(screen.getByRole('button', { name: 'Next' }));
+    await user.click(screen.getByRole('button', { name: 'Next' }));
     expect(props.onNextClick).toHaveBeenCalled();
 
-    userEvent.click(screen.getByRole('button', { name: 'Reset' }));
+    await user.click(screen.getByRole('button', { name: 'Reset' }));
     expect(props.onClear).toHaveBeenCalled();
   });
 
@@ -57,7 +59,9 @@ describe('SearchInput', () => {
     expect(screen.queryByRole('button', { name: 'Reset' })).not.toBeInTheDocument();
   });
 
-  test('advanced search', () => {
+  test('advanced search', async () => {
+    const user = userEvent.setup();
+
     const { asFragment } = render(
       <SearchInput
         attributes={[
@@ -72,13 +76,15 @@ describe('SearchInput', () => {
       />
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Search' }));
+    await user.click(screen.getByRole('button', { name: 'Search' }));
 
     expect(props.onSearch).toHaveBeenCalled();
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('advanced search with custom attributes', () => {
+  test('advanced search with custom attributes', async () => {
+    const user = userEvent.setup();
+
     const { asFragment } = render(
       <SearchInput
         data-testid="test-id"
@@ -101,45 +107,37 @@ describe('SearchInput', () => {
       />
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Search' }));
+    await user.click(screen.getByRole('button', { name: 'Search' }));
 
-    userEvent.click(screen.getByRole('button', { name: 'Open advanced search' }));
+    await user.click(screen.getByRole('button', { name: 'Open advanced search' }));
     expect(screen.getByTestId('test-id')).toContainElement(screen.getByText('First name'))
 
     expect(props.onSearch).toHaveBeenCalled();
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('advanced search with custom attributes and appendTo="inline', () => {
-    const {container}  = render(
-    <SearchInput
-        data-testid="test-id"
-        attributes={[
-          { attr: 'test', display: 'test' },
-        ]}
-        appendTo='inline'
-      />
+  test('advanced search with custom attributes and appendTo="inline', async () => {
+    const user = userEvent.setup();
+
+    const { container } = render(
+      <SearchInput data-testid="test-id" attributes={[{ attr: 'test', display: 'test' }]} appendTo="inline" />
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Open advanced search' }));
-    
-    expect(screen.getByTestId('test-id')).toContainElement(screen.getByText('test'))
+    await user.click(screen.getByRole('button', { name: 'Open advanced search' }));
+
+    expect(screen.getByTestId('test-id')).toContainElement(screen.getByText('test'));
   });
 
-  test('advanced search with custom attributes and appendTo external DOM element', () => {
-    const {container}  = render(
-    <SearchInput
-        data-testid="test-id"
-        attributes={[
-          { attr: 'test', display: 'test' },
-        ]}
-        appendTo={document.body}
-      />
+  test('advanced search with custom attributes and appendTo external DOM element', async () => {
+    const user = userEvent.setup();
+
+    const { container } = render(
+      <SearchInput data-testid="test-id" attributes={[{ attr: 'test', display: 'test' }]} appendTo={document.body} />
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Open advanced search' }));
-    
-    expect(screen.getByTestId('test-id')).not.toContainElement(screen.getByText('test'))
-    expect(document.body).toContainElement(screen.getByText('test'))
+    await user.click(screen.getByRole('button', { name: 'Open advanced search' }));
+
+    expect(screen.getByTestId('test-id')).not.toContainElement(screen.getByText('test'));
+    expect(document.body).toContainElement(screen.getByText('test'));
   });
 });

package/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap

@@ -243,7 +243,10 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
     </div>
     <span
       class=""
-      style="position: absolute; left: 0px; top: 0px; z-index: 9999; width: 0px;"
+      data-popper-escaped="true"
+      data-popper-placement="bottom-start"
+      data-popper-reference-hidden="true"
+      style="position: absolute; top: 0px; left: 0px; transform: translate(0px, 0px); width: 0px; z-index: 9999;"
     >
       <div
         class="pf-c-panel pf-m-raised"

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

@@ -7,6 +7,7 @@ import { Select } from '../Select';
 import { SelectOption, SelectOptionObject } from '../SelectOption';
 import { SelectGroup } from '../SelectGroup';
 import { SelectVariant, SelectDirection } from '../selectConstants';
+import { KeyTypes } from '../../../helpers';
 
 class User implements SelectOptionObject {
   private firstName: string;
@@ -107,7 +108,7 @@ describe('Select', () => {
   });
 
   describe('custom select filter', () => {
-    test('filters properly', () => {
+    test('filters properly', async () => {
       const customFilter = (e: React.ChangeEvent<HTMLInputElement>, value: string) => {
         let input: RegExp;
         try {
@@ -121,6 +122,8 @@ describe('Select', () => {
             : selectOptions;
         return typeaheadFilteredChildren;
       };
+      const user = userEvent.setup();
+
       render(
         <Select
           toggleId="custom-select-filters"
@@ -136,7 +139,7 @@ describe('Select', () => {
         </Select>
       );
 
-      userEvent.type(screen.getByTestId('test-id').querySelector('input'), 'r');
+      await user.type(screen.getByTestId('test-id').querySelector('input'), 'r');
 
       expect(screen.getByText('Mr')).toBeInTheDocument();
       expect(screen.getByText('Mrs')).toBeInTheDocument();
@@ -333,7 +336,9 @@ describe('typeahead select', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('test select existing option on a non-creatable select', () => {
+  test('test select existing option on a non-creatable select', async () => {
+    const user = userEvent.setup();
+
     render(
       <Select variant={SelectVariant.typeahead} onToggle={jest.fn()} isOpen ouiaId="test-id">
         {selectOptions}
@@ -341,8 +346,8 @@ describe('typeahead select', () => {
     );
 
     const input = screen.getByTestId('test-id').querySelector('input');
-    userEvent.type(input, 'Other');
-    userEvent.type(input, '{enter}');
+    await user.type(input, 'Other');
+    await user.type(input, `{${KeyTypes.Enter}}`);
 
     expect(screen.getByText('Other')).toBeVisible();
   });
@@ -392,9 +397,10 @@ describe('typeahead multi select', () => {
 });
 
 describe('API', () => {
-  test('click on item', () => {
+  test('click on item', async () => {
     const mockToggle = jest.fn();
     const mockSelect = jest.fn();
+    const user = userEvent.setup();
 
     render(
       <Select variant="single" onToggle={mockToggle} onSelect={mockSelect} isOpen ouiaId="test-id">
@@ -402,7 +408,7 @@ describe('API', () => {
       </Select>
     );
 
-    userEvent.click(screen.getByRole('option', { name: 'Mr' }));
+    await user.click(screen.getByRole('option', { name: 'Mr' }));
 
     expect(mockToggle).not.toHaveBeenCalled();
     expect(mockSelect).toHaveBeenCalled();
@@ -517,7 +523,9 @@ describe('select with placeholder', () => {
   });
 });
 
-test('applies focus styling to the create option when reached via keyboard navigation', () => {
+test('applies focus styling to the create option when reached via keyboard navigation', async () => {
+  const user = userEvent.setup();
+  
   render(
     <Select
       variant={SelectVariant.typeahead}
@@ -530,7 +538,7 @@ test('applies focus styling to the create option when reached via keyboard navig
   );
 
   const input = screen.getByRole('textbox');
-  userEvent.type(input, 'a{arrowdown}');
+  await user.type(input, `a{${KeyTypes.ArrowDown}}`);
 
   const createOption = screen.getByRole('option', { name: 'Create "a"' });
 

package/src/components/Select/__tests__/SelectToggle.test.tsx

@@ -7,20 +7,24 @@ import { SelectToggle } from '../SelectToggle';
 
 describe('SelectToggle', () => {
   describe('API', () => {
-    test('click on closed', () => {
+    test('click on closed', async () => {
       const mockToggle = jest.fn();
+      const user = userEvent.setup();
+
       render(
         <SelectToggle id="Select Toggle" onToggle={mockToggle} parentRef={{ current: document.createElement('div') }}>
           Select
         </SelectToggle>
       );
 
-      userEvent.click(screen.getByRole('button'));
+      await user.click(screen.getByRole('button'));
       expect(mockToggle).toHaveBeenCalledWith(true, expect.any(Object));
     });
 
-    test('click on opened', () => {
+    test('click on opened', async () => {
       const mockToggle = jest.fn();
+      const user = userEvent.setup();
+
       render(
         <SelectToggle
           id="Select Toggle"
@@ -32,12 +36,13 @@ describe('SelectToggle', () => {
         </SelectToggle>
       );
 
-      userEvent.click(screen.getByRole('button'));
+      await user.click(screen.getByRole('button'));
       expect(mockToggle).toHaveBeenCalledWith(false, expect.any(MouseEvent));
     });
 
-    test('click on document', () => {
+    test('click on document', async () => {
       const mockToggle = jest.fn();
+      const user = userEvent.setup();
 
       render(
         <SelectToggle
@@ -50,12 +55,13 @@ describe('SelectToggle', () => {
         </SelectToggle>
       );
 
-      userEvent.click(screen.getByText('Select').parentElement);
+      await user.click(screen.getByText('Select').parentElement);
       expect(mockToggle).toHaveBeenCalledWith(false, expect.any(MouseEvent));
     });
 
-    test('on click outside has been removed', () => {
+    test('on click outside has been removed', async () => {
       const mockToggle = jest.fn();
+      const user = userEvent.setup();
 
       render(
         <SelectToggle
@@ -68,7 +74,7 @@ describe('SelectToggle', () => {
         </SelectToggle>
       );
 
-      userEvent.click(screen.getByText('Select').parentElement);
+      await user.click(screen.getByText('Select').parentElement);
       expect(mockToggle).not.toHaveBeenCalled();
     });
   });

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

@@ -40,12 +40,13 @@ describe('SimpleList', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('onSelect is called when item is selected', () => {
+  test('onSelect is called when item is selected', async () => {
     const onSelect = jest.fn();
+    const user = userEvent.setup();
 
     render(<SimpleList onSelect={onSelect}>{items}</SimpleList>);
 
-    userEvent.click(screen.getByText('Item 1'));
+    await user.click(screen.getByText('Item 1'));
     expect(onSelect).toHaveBeenCalled();
   });
 
@@ -54,12 +55,13 @@ describe('SimpleList', () => {
     expect(screen.getAllByRole('link').length).toEqual(3);
   });
 
-  test('onSelect is called when anchor item is selected', () => {
+  test('onSelect is called when anchor item is selected', async () => {
     const onSelect = jest.fn();
+    const user = userEvent.setup();
 
     render(<SimpleList onSelect={onSelect}>{anchors}</SimpleList>);
 
-    userEvent.click(screen.getByText('Item 1'));
+    await user.click(screen.getByText('Item 1'));
     expect(onSelect).toHaveBeenCalled();
   });
 });

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

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

package/src/components/Tabs/__tests__/OverflowTab.test.tsx

@@ -106,12 +106,14 @@ test('Renders without pf-m-expanded on the tab element by default', () => {
   expect(screen.getByRole('tab')).not.toHaveClass('pf-m-expanded');
 });
 
-test('Renders with pf-m-expanded on the tab element once clicked', () => {
+test('Renders with pf-m-expanded on the tab element once clicked', async () => {
+  const user = userEvent.setup();
+
   render(<OverflowTab />);
 
   const overflowTab = screen.getByRole('tab');
 
-  userEvent.click(overflowTab);
+  await user.click(overflowTab);
 
   expect(overflowTab).toHaveClass('pf-m-expanded');
 });
@@ -156,7 +158,9 @@ test('Does not render tabs passed via overflowingTabs when not expanded', () =>
   expect(screen.queryByText('Tab two')).not.toBeInTheDocument();
 });
 
-test('Renders tabs passed via overflowingTabs when expanded', () => {
+test('Renders tabs passed via overflowingTabs when expanded', async () => {
+  const user = userEvent.setup();
+
   render(
     <OverflowTab
       overflowingTabs={[
@@ -166,13 +170,15 @@ test('Renders tabs passed via overflowingTabs when expanded', () => {
     />
   );
 
-  userEvent.click(screen.getByRole('tab', { name: 'More' }));
+  await user.click(screen.getByRole('tab', { name: 'More' }));
 
   expect(screen.getByText('Tab one')).toBeVisible();
   expect(screen.getByText('Tab two')).toBeVisible();
 });
 
-test('Closes the overflowing tabs menu when a tab is selected', () => {
+test('Closes the overflowing tabs menu when a tab is selected', async () => {
+  const user = userEvent.setup();
+  
   render(
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 0 }}>
       <OverflowTab
@@ -184,15 +190,17 @@ test('Closes the overflowing tabs menu when a tab is selected', () => {
     </TabsContext.Provider>
   );
 
-  userEvent.click(screen.getByRole('tab', { name: 'More' }));
+  await user.click(screen.getByRole('tab', { name: 'More' }));
 
   // rather than actually clicking a menu item here we click the Select button provided via our Menu mock to keep the mocks simpler
-  userEvent.click(screen.getByRole('button', { name: 'Select' }));
+  await user.click(screen.getByRole('button', { name: 'Select' }));
 
   expect(screen.queryByText('Tab two')).not.toBeInTheDocument();
 });
 
-test('Closes the overflowing tabs menu when the user clicks outside of the menu', () => {
+test('Closes the overflowing tabs menu when the user clicks outside of the menu', async () => {
+  const user = userEvent.setup();
+  
   render(
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 0 }}>
       <OverflowTab
@@ -204,14 +212,15 @@ test('Closes the overflowing tabs menu when the user clicks outside of the menu'
     </TabsContext.Provider>
   );
 
-  userEvent.click(screen.getByRole('tab', { name: 'More' }));
+  await user.click(screen.getByRole('tab', { name: 'More' }));
 
-  userEvent.click(document.body);
+  await user.click(document.body);
 
   expect(screen.queryByText('Tab two')).not.toBeInTheDocument();
 });
 
-test('Calls the onTabClick callback provided via context when a tab is clicked', () => {
+test('Calls the onTabClick callback provided via context when a tab is clicked', async () => {
+  const user = userEvent.setup();
   const mockHandleTabClick = jest.fn();
 
   render(
@@ -224,10 +233,10 @@ test('Calls the onTabClick callback provided via context when a tab is clicked',
     </TabsContext.Provider>
   );
 
-  userEvent.click(screen.getByRole('tab', { name: 'More' }));
+  await user.click(screen.getByRole('tab', { name: 'More' }));
 
   // rather than actually clicking a menu item here we click the Select button provided via our Menu mock to keep the mocks simpler
-  userEvent.click(screen.getByRole('button', { name: 'Select' }));
+  await user.click(screen.getByRole('button', { name: 'Select' }));
 
   expect(mockHandleTabClick).toHaveBeenCalledTimes(1);
   expect(mockHandleTabClick).toHaveBeenCalledWith('mouseEvent', 1, 'fakeRef');
@@ -325,12 +334,14 @@ test('Renders the tab with aria-expanded set to false by default', () => {
   expect(screen.getByRole('tab')).toHaveAttribute('aria-expanded', 'false');
 });
 
-test('Renders the tab with aria-expanded set to true when the menu is opened', () => {
+test('Renders the tab with aria-expanded set to true when the menu is opened', async () => {
+  const user = userEvent.setup();
+  
   render(<OverflowTab />);
 
   const overflowTab = screen.getByRole('tab');
 
-  userEvent.click(overflowTab);
+  await user.click(overflowTab);
 
   expect(overflowTab).toHaveAttribute('aria-expanded', 'true');
 });
@@ -342,16 +353,20 @@ test('Passes Popper popperMatchesTriggerWidth set to false', () => {
   expect(screen.getByText('Popper matches trigger width: false')).toBeVisible();
 });
 
-test('Passes Popper an appendTo value of the presentation element', () => {
+test('Passes Popper an appendTo value of the presentation element', async () => {
+  const user = userEvent.setup();
+  
   render(<OverflowTab />);
 
-  userEvent.click(screen.getByRole('tab'));
+  await user.click(screen.getByRole('tab'));
 
   // This assertion relies on the structure of the Popper mock to verify the correct props are being sent to Popper
   expect(screen.getByText('Append to class name: pf-c-tabs__item pf-m-overflow')).toBeVisible();
 });
 
-test('Does not render an overflowing tab as a selected menu item by default', () => {
+test('Does not render an overflowing tab as a selected menu item by default', async () => {
+  const user = userEvent.setup();
+  
   render(
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 0 }}>
       <OverflowTab
@@ -362,13 +377,15 @@ test('Does not render an overflowing tab as a selected menu item by default', ()
     </TabsContext.Provider>
   );
 
-  userEvent.click(screen.getByRole('tab'));
+  await user.click(screen.getByRole('tab'));
 
   // This assertion relies on the structure of the Popper mock to verify the correct props are being sent to Popper
   expect(screen.queryByText('Selected: true')).not.toBeInTheDocument();
 });
 
-test('Renders an overflowing tab as a selected menu item when its key matches the localActiveKey provided via context', () => {
+test('Renders an overflowing tab as a selected menu item when its key matches the localActiveKey provided via context', async () => {
+  const user = userEvent.setup();
+  
   render(
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 1 }}>
       <OverflowTab
@@ -379,13 +396,15 @@ test('Renders an overflowing tab as a selected menu item when its key matches th
     </TabsContext.Provider>
   );
 
-  userEvent.click(screen.getByRole('tab'));
+  await user.click(screen.getByRole('tab'));
 
   // This assertion relies on the structure of the Popper mock to verify the correct props are being sent to Popper
   expect(screen.getByText('Selected: true')).toBeVisible();
 });
 
-test('Matches snapshot when expanded', () => {
+test('Matches snapshot when expanded', async () => {
+  const user = userEvent.setup();
+  
   const { asFragment } = render(
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 1 }}>
       <OverflowTab
@@ -397,7 +416,7 @@ test('Matches snapshot when expanded', () => {
     </TabsContext.Provider>
   );
 
-  userEvent.click(screen.getByRole('tab'));
+  await user.click(screen.getByRole('tab'));
 
   expect(asFragment()).toMatchSnapshot();
 });

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

@@ -12,10 +12,12 @@ const props = {
 };
 
 describe('TextArea', () => {
-  test('textarea input passes value and event to onChange handler', () => {
+  test('textarea input passes value and event to onChange handler', async () => {
+    const user = userEvent.setup();
+
     render(<TextAreaBase {...props} value="" aria-label="test textarea" />);
 
-    userEvent.type(screen.getByLabelText('test textarea'), 'a');
+    await user.type(screen.getByLabelText('test textarea'), 'a');
     expect(props.onChange).toHaveBeenCalledWith('a', expect.any(Object));
   });
 

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

@@ -12,10 +12,12 @@ const props = {
 };
 
 describe('TextInput', () => {
-  test('input passes value and event to onChange handler', () => {
+  test('input passes value and event to onChange handler', async () => {
+    const user = userEvent.setup();
+
     render(<TextInputBase {...props} value="" aria-label="test input" />);
 
-    userEvent.type(screen.getByLabelText('test input'), 'a');
+    await user.type(screen.getByLabelText('test input'), 'a');
     expect(props.onChange).toHaveBeenCalledWith('a', expect.any(Object));
   });
 

package/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx

@@ -241,13 +241,14 @@ describe('TextInputGroupMain', () => {
     expect(onChangeMock).not.toHaveBeenCalled();
   });
 
-  it('calls the onChange callback when the input changes', () => {
+  it('calls the onChange callback when the input changes', async () => {
     const onChangeMock = jest.fn();
+    const user = userEvent.setup();
 
     render(<TextInputGroupMain onChange={onChangeMock}>Test</TextInputGroupMain>);
 
     const input = screen.getByRole('textbox');
-    userEvent.type(input, 'Test');
+    await user.type(input, 'Test');
 
     expect(onChangeMock).toHaveBeenCalledTimes(4);
   });
@@ -260,36 +261,39 @@ describe('TextInputGroupMain', () => {
     expect(onFocusMock).not.toHaveBeenCalled();
   });
 
-  it('calls the onFocus callback when the input is focused', () => {
+  it('calls the onFocus callback when the input is focused', async () => {
     const onFocusMock = jest.fn();
+    const user = userEvent.setup();
 
     render(<TextInputGroupMain onFocus={onFocusMock}>Test</TextInputGroupMain>);
 
     const input = screen.getByRole('textbox');
-    userEvent.click(input);
+    await user.click(input);
 
     expect(onFocusMock).toHaveBeenCalledTimes(1);
   });
 
-  it('does not call onBlur callback when the input does not lose focus', () => {
+  it('does not call onBlur callback when the input does not lose focus', async () => {
     const onBlurMock = jest.fn();
+    const user = userEvent.setup();
 
     render(<TextInputGroupMain onBlur={onBlurMock}>Test</TextInputGroupMain>);
 
     const input = screen.getByRole('textbox');
-    userEvent.click(input);
+    await user.click(input);
 
     expect(onBlurMock).not.toHaveBeenCalled();
   });
 
-  it('calls the onBlur callback when the input loses focus', () => {
+  it('calls the onBlur callback when the input loses focus', async() => {
     const onBlurMock = jest.fn();
+    const user = userEvent.setup();
 
     render(<TextInputGroupMain onBlur={onBlurMock}>Test</TextInputGroupMain>);
 
     const input = screen.getByRole('textbox');
-    userEvent.click(input);
-    userEvent.click(document.body);
+    await user.click(input);
+    await user.click(document.body);
 
     expect(onBlurMock).toHaveBeenCalledTimes(1);
   });