@transferwise/components 0.0.0-experimental-756c861 → 0.0.0-experimental-a4db2ca

package/src/select/Select.spec.js

@@ -42,16 +42,16 @@ describe('Select', () => {
     global.requestAnimationFrame = originalRAF;
   });
 
-  const openSelect = async (container) => {
+  const openSelect = (container) => {
     const button = screen.getByRole('button');
-    await userEvent.click(button);
+    userEvent.click(button);
   };
 
   describe('search property', () => {
     it('should focus input when dropdown is open', async () => {
       const { container } = render(<Select {...props} search />);
 
-      await openSelect(container);
+      openSelect(container);
       const input = screen.getByPlaceholderText('Search...');
 
       expect(input).toHaveFocus();
@@ -60,7 +60,7 @@ describe('Select', () => {
     it('should pass id to search box', async () => {
       const { container } = render(<Select {...props} search id="dummy" />);
 
-      await openSelect(container);
+      openSelect(container);
       const input = screen.getByPlaceholderText('Search...');
 
       expect(input).toHaveAttribute('id', 'dummy-searchbox');
@@ -69,9 +69,9 @@ describe('Select', () => {
     it('should filter the options with the default filter function', async () => {
       const { container } = render(<Select {...props} search />);
 
-      await openSelect(container);
+      openSelect(container);
       const input = screen.getByPlaceholderText('Search...');
-      await userEvent.type(input, 'yo');
+      userEvent.type(input, 'yo');
 
       // Not ideal, this higlights accessibility issues.
       expect(container.querySelector('.np-dropdown-item.np-dropdown-item--focused')).toStrictEqual(
@@ -113,14 +113,14 @@ describe('Select', () => {
       beforeEach(async () => {
         const { container } = render(<Select {...props} options={searchableOptions} search />);
 
-        await openSelect(container);
+        openSelect(container);
 
         input = screen.getByPlaceholderText('Search...');
       });
 
       describe('when searching by label', () => {
-        it('should display the search result', async () => {
-          await userEvent.type(input, 'second_label');
+        it('should display the search result', () => {
+          userEvent.type(input, 'second_label');
 
           expect(screen.queryByText('first_label')).not.toBeInTheDocument();
           expect(screen.getByText('second_label')).toBeInTheDocument();
@@ -129,8 +129,8 @@ describe('Select', () => {
       });
 
       describe('when searching by note', () => {
-        it('should display the search result', async () => {
-          await userEvent.type(input, 'third_note');
+        it('should display the search result', () => {
+          userEvent.type(input, 'third_note');
 
           expect(screen.queryByText('first_label')).not.toBeInTheDocument();
           expect(screen.queryByText('second_label')).not.toBeInTheDocument();
@@ -139,8 +139,8 @@ describe('Select', () => {
       });
 
       describe('when searching by secondary', () => {
-        it('should display the search result', async () => {
-          await userEvent.type(input, 'first_secondary');
+        it('should display the search result', () => {
+          userEvent.type(input, 'first_secondary');
 
           expect(screen.getByText('first_label')).toBeInTheDocument();
           expect(screen.queryByText('second_label')).not.toBeInTheDocument();
@@ -149,8 +149,8 @@ describe('Select', () => {
       });
 
       describe('when searching by currency', () => {
-        it('should display the search result', async () => {
-          await userEvent.type(input, 'usd');
+        it('should display the search result', () => {
+          userEvent.type(input, 'usd');
 
           expect(screen.queryByText('first_label')).not.toBeInTheDocument();
           expect(screen.getByText('second_label')).toBeInTheDocument();
@@ -159,8 +159,8 @@ describe('Select', () => {
       });
 
       describe('when searching by searchStrings', () => {
-        it('should display the search result', async () => {
-          await userEvent.type(input, 'third_search_string');
+        it('should display the search result', () => {
+          userEvent.type(input, 'third_search_string');
 
           expect(screen.queryByText('first_label')).not.toBeInTheDocument();
           expect(screen.queryByText('second_label')).not.toBeInTheDocument();
@@ -169,7 +169,7 @@ describe('Select', () => {
       });
     });
 
-    it('should be able to search disabled options', async () => {
+    it('should be able to search disabled options', () => {
       const { container } = render(
         <Select
           {...props}
@@ -180,9 +180,9 @@ describe('Select', () => {
           ]}
         />,
       );
-      await openSelect(container);
+      openSelect(container);
       const input = screen.getByPlaceholderText('Search...');
-      await userEvent.type(input, 'Disabled');
+      userEvent.type(input, 'Disabled');
       expect(screen.queryByText('Enabled Option')).not.toBeInTheDocument();
       expect(screen.getByText('Disabled Option')).toBeInTheDocument();
     });
@@ -199,9 +199,9 @@ describe('Select', () => {
         />,
       );
 
-      await openSelect(container);
+      openSelect(container);
       const input = screen.getByPlaceholderText('Search...');
-      await userEvent.type(input, 'HUF');
+      userEvent.type(input, 'HUF');
 
       expect(container.querySelector('.np-dropdown-item.np-dropdown-item--focused')).toStrictEqual(
         container.querySelector('.np-dropdown-item'),
@@ -224,9 +224,9 @@ describe('Select', () => {
         />,
       );
 
-      await openSelect(container);
+      openSelect(container);
       const input = screen.getByPlaceholderText('Search...');
-      await userEvent.type(input, 'Tallinn');
+      userEvent.type(input, 'Tallinn');
 
       expect(container.querySelector('.np-dropdown-item.np-dropdown-item--focused')).toStrictEqual(
         container.querySelector('.np-dropdown-item'),
@@ -239,9 +239,9 @@ describe('Select', () => {
     it('should filter the options with a custom search function', async () => {
       const searchFunction = jest.fn();
       const { container } = render(<Select {...props} search={searchFunction} />);
-      await openSelect(container);
+      openSelect(container);
       const input = screen.getByPlaceholderText('Search...');
-      await userEvent.type(input, 'o');
+      userEvent.type(input, 'o');
 
       expect(searchFunction).toHaveBeenCalledTimes(3);
     });
@@ -249,10 +249,10 @@ describe('Select', () => {
     it('should filter the options with a custom search function with 3 results', async () => {
       const searchFunction = (option, searchValue) => option.label.includes(searchValue);
       const { container } = render(<Select {...props} search={searchFunction} />);
-      await openSelect(container);
+      openSelect(container);
 
       const input = screen.getByPlaceholderText('Search...');
-      await userEvent.type(input, 'o');
+      userEvent.type(input, 'o');
 
       expect(screen.getByRole('listbox').children).toHaveLength(3);
     });
@@ -260,7 +260,7 @@ describe('Select', () => {
 
   it('show list of options in dropdown (Panel) on desktop', async () => {
     const { container } = render(<Select {...props} />);
-    await openSelect(container);
+    openSelect(container);
 
     const drawer = document.querySelector('.np-panel');
     expect(drawer).toBeInTheDocument();
@@ -269,7 +269,7 @@ describe('Select', () => {
   it('show list of options in Bottom Sheet when on mobile', async () => {
     enableMobileScreen();
     const { container } = render(<Select {...props} />);
-    await openSelect(container);
+    openSelect(container);
 
     const bottomSheet = await screen.findByRole('dialog');
 
@@ -279,7 +279,7 @@ describe('Select', () => {
   it('show list of options in Drawer when on mobile and search in enabled', async () => {
     enableMobileScreen();
     const { container } = render(<Select {...props} search />);
-    await openSelect(container);
+    openSelect(container);
 
     await waitFor(() => {
       const drawer = document.querySelector('.np-drawer');
@@ -289,7 +289,7 @@ describe('Select', () => {
 
   it('focuses dropdown options when clicked', async () => {
     const { container } = render(<Select {...props} />);
-    await openSelect(container);
+    openSelect(container);
 
     const dropdown = screen.getByRole('listbox');
     expect(dropdown).toHaveFocus();
@@ -299,7 +299,7 @@ describe('Select', () => {
     enableMobileScreen();
     const { container } = render(<Select {...props} onSearchChange={jest.fn()} />);
 
-    await openSelect(container);
+    openSelect(container);
     const input = await screen.findByPlaceholderText('Search...');
 
     expect(input).not.toHaveFocus();
@@ -308,7 +308,7 @@ describe('Select', () => {
   it('on not touch device focuses on the search box once opened', async () => {
     const { container } = render(<Select {...props} search onSearchChange={jest.fn()} />);
 
-    await openSelect(container);
+    openSelect(container);
     const input = screen.getByPlaceholderText('Search...');
 
     expect(input).toHaveFocus();
@@ -316,7 +316,7 @@ describe('Select', () => {
 
   it('renders controls with fallback id', async () => {
     const { container } = render(<Select {...props} />);
-    await openSelect(container);
+    openSelect(container);
 
     const button = screen.getByRole('button');
     const options = screen.getByRole('listbox');
@@ -327,7 +327,7 @@ describe('Select', () => {
 
   it('renders controls with passed id', async () => {
     const { container } = render(<Select id="my-select-component" {...props} />);
-    await openSelect(container);
+    openSelect(container);
 
     const button = screen.getByRole('button');
     const options = screen.getByRole('listbox');
@@ -338,7 +338,7 @@ describe('Select', () => {
 
   it('renders button with correct aria-controls attribute', async () => {
     const { container } = render(<Select {...props} search onSearchChange={jest.fn()} />);
-    await openSelect(container);
+    openSelect(container);
 
     const button = screen.getByRole('button');
     const options = screen.getByRole('listbox');
@@ -353,11 +353,11 @@ describe('Select', () => {
     it('navigates to the next item', async () => {
       const { container } = render(<Select {...props} />);
 
-      await openSelect(container);
+      openSelect(container);
 
       expect(screen.queryByRole('listbox')).toHaveFocus();
 
-      await userEvent.keyboard('[ArrowDown]');
+      userEvent.keyboard('[ArrowDown]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'yo' })).toHaveFocus();
@@ -372,17 +372,17 @@ describe('Select', () => {
         />,
       );
 
-      await openSelect(container);
+      openSelect(container);
 
       expect(screen.queryByRole('listbox')).toHaveFocus();
 
-      await userEvent.keyboard('[ArrowDown]');
+      userEvent.keyboard('[ArrowDown]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'yo' })).toHaveFocus();
       });
 
-      await userEvent.keyboard('[ArrowDown]');
+      userEvent.keyboard('[ArrowDown]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'boi' })).toHaveFocus();
@@ -392,17 +392,17 @@ describe('Select', () => {
     it('cannot navigate past the first list item', async () => {
       const { container } = render(<Select {...props} />);
 
-      await openSelect(container);
+      openSelect(container);
 
       expect(screen.queryByRole('listbox')).toHaveFocus();
 
-      await userEvent.keyboard('[ArrowUp]');
+      userEvent.keyboard('[ArrowUp]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'yo' })).toHaveFocus();
       });
 
-      await userEvent.keyboard('[ArrowUp]');
+      userEvent.keyboard('[ArrowUp]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'yo' })).toHaveFocus();
@@ -412,29 +412,29 @@ describe('Select', () => {
     it('cannot navigate past the last list item', async () => {
       const { container } = render(<Select {...props} />);
 
-      await openSelect(container);
+      openSelect(container);
 
       expect(screen.queryByRole('listbox')).toHaveFocus();
 
-      await userEvent.keyboard('[ArrowDown]');
+      userEvent.keyboard('[ArrowDown]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'yo' })).toHaveFocus();
       });
 
-      await userEvent.keyboard('[ArrowDown]');
+      userEvent.keyboard('[ArrowDown]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'dawg' })).toHaveFocus();
       });
 
-      await userEvent.keyboard('[ArrowDown]');
+      userEvent.keyboard('[ArrowDown]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'boi' })).toHaveFocus();
       });
 
-      await userEvent.keyboard('[ArrowDown]');
+      userEvent.keyboard('[ArrowDown]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'boi' })).toHaveFocus();
@@ -445,11 +445,11 @@ describe('Select', () => {
       it('maintains focus on search but visually indicates which item is focused with keyboard navigation and selects it on enter', async () => {
         const { container } = render(<Select {...props} search />);
 
-        await openSelect(container);
+        openSelect(container);
 
         expect(screen.queryByPlaceholderText('Search...')).toHaveFocus();
 
-        await userEvent.keyboard('[ArrowDown]');
+        userEvent.keyboard('[ArrowDown]');
 
         await waitFor(() => {
           expect(screen.queryByRole('option', { name: 'yo' })).toHaveClass(
@@ -460,7 +460,7 @@ describe('Select', () => {
 
         expect(screen.queryByPlaceholderText('Search...')).toHaveFocus();
 
-        await userEvent.keyboard('[ArrowDown]');
+        userEvent.keyboard('[ArrowDown]');
 
         await waitFor(() => {
           expect(screen.queryByRole('option', { name: 'dawg' })).toHaveClass(
@@ -471,7 +471,7 @@ describe('Select', () => {
 
         expect(screen.queryByPlaceholderText('Search...')).toHaveFocus();
 
-        await userEvent.keyboard('[Enter]');
+        userEvent.keyboard('[Enter]');
 
         expect(props.onChange).toHaveBeenCalledWith({ label: 'dawg', value: 1 });
       });
@@ -486,11 +486,11 @@ describe('Select', () => {
     it('navigates to the next item', async () => {
       const { container } = render(<Select {...props} />);
 
-      await openSelect(container);
+      openSelect(container);
 
       await expect(screen.findByRole('dialog')).resolves.toBeInTheDocument();
 
-      await userEvent.keyboard('[ArrowDown]');
+      userEvent.keyboard('[ArrowDown]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'yo' })).toHaveFocus();
@@ -505,17 +505,17 @@ describe('Select', () => {
         />,
       );
 
-      await openSelect(container);
+      openSelect(container);
 
       await expect(screen.findByRole('dialog')).resolves.toBeInTheDocument();
 
-      await userEvent.keyboard('[ArrowDown]');
+      userEvent.keyboard('[ArrowDown]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'yo' })).toHaveFocus();
       });
 
-      await userEvent.keyboard('[ArrowDown]');
+      userEvent.keyboard('[ArrowDown]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'boi' })).toHaveFocus();
@@ -525,17 +525,17 @@ describe('Select', () => {
     it('cannot navigate past the first list item', async () => {
       const { container } = render(<Select {...props} />);
 
-      await openSelect(container);
+      openSelect(container);
 
       await expect(screen.findByRole('dialog')).resolves.toBeInTheDocument();
 
-      await userEvent.keyboard('[ArrowUp]');
+      userEvent.keyboard('[ArrowUp]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'yo' })).toHaveFocus();
       });
 
-      await userEvent.keyboard('[ArrowUp]');
+      userEvent.keyboard('[ArrowUp]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'yo' })).toHaveFocus();
@@ -545,29 +545,29 @@ describe('Select', () => {
     it('cannot navigate past the last list item', async () => {
       const { container } = render(<Select {...props} />);
 
-      await openSelect(container);
+      openSelect(container);
 
       await expect(screen.findByRole('dialog')).resolves.toBeInTheDocument();
 
-      await userEvent.keyboard('[ArrowDown]');
+      userEvent.keyboard('[ArrowDown]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'yo' })).toHaveFocus();
       });
 
-      await userEvent.keyboard('[ArrowDown]');
+      userEvent.keyboard('[ArrowDown]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'dawg' })).toHaveFocus();
       });
 
-      await userEvent.keyboard('[ArrowDown]');
+      userEvent.keyboard('[ArrowDown]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'boi' })).toHaveFocus();
       });
 
-      await userEvent.keyboard('[ArrowDown]');
+      userEvent.keyboard('[ArrowDown]');
 
       await waitFor(() => {
         expect(screen.queryByRole('option', { name: 'boi' })).toHaveFocus();
@@ -582,13 +582,13 @@ describe('Select', () => {
       it('visually indicates which item is focused with keyboard navigation and selects it on enter', async () => {
         const { container } = render(<Select {...props} search />);
 
-        await openSelect(container);
+        openSelect(container);
 
         await waitFor(() => {
           expect(screen.queryByPlaceholderText('Search...')).not.toHaveFocus();
         });
 
-        await userEvent.keyboard('[ArrowDown]');
+        userEvent.keyboard('[ArrowDown]');
 
         await waitFor(() => {
           expect(screen.queryByRole('option', { name: 'yo' })).toHaveClass(
@@ -599,7 +599,7 @@ describe('Select', () => {
 
         expect(screen.queryByPlaceholderText('Search...')).not.toHaveFocus();
 
-        await userEvent.keyboard('[ArrowDown]');
+        userEvent.keyboard('[ArrowDown]');
 
         await waitFor(() => {
           expect(screen.queryByRole('option', { name: 'dawg' })).toHaveClass(
@@ -610,7 +610,7 @@ describe('Select', () => {
 
         expect(screen.queryByPlaceholderText('Search...')).not.toHaveFocus();
 
-        await userEvent.keyboard('[Enter]');
+        userEvent.keyboard('[Enter]');
 
         expect(props.onChange).toHaveBeenCalledWith({ label: 'dawg', value: 1 });
       });

package/src/test-utils/index.js

@@ -1,5 +1,5 @@
 import { render, renderHook } from '@testing-library/react';
-import { userEvent } from '@testing-library/user-event';
+import userEvent from '@testing-library/user-event';
 
 import { Provider } from '..';
 import { DEFAULT_LOCALE } from '../common/locale';

package/src/tooltip/Tooltip.spec.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
-import { userEvent } from '@testing-library/user-event';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
 
 import Tooltip from '.';
 
@@ -25,7 +26,7 @@ describe('Tooltip Component', () => {
     expect(tooltip).toHaveAttribute('aria-hidden', 'true');
   });
 
-  it('should render the tooltip label when closed', async () => {
+  it('should render the tooltip label when closed', () => {
     render(
       <Tooltip label="Test Tooltip">
         <span>Hover me</span>
@@ -35,11 +36,11 @@ describe('Tooltip Component', () => {
     const tooltip = screen.getByRole('tooltip', { hidden: true });
     expect(tooltip).toHaveAttribute('aria-hidden', 'true');
 
-    await userEvent.hover(triggerElement);
+    userEvent.hover(triggerElement);
     expect(tooltip).toHaveAttribute('aria-hidden', 'false');
   });
 
-  it('should display the tooltip on mouse hover', async () => {
+  it('should display the tooltip on mouse hover', () => {
     render(
       <Tooltip label="Test Tooltip">
         <span>Hover over me!</span>
@@ -47,13 +48,13 @@ describe('Tooltip Component', () => {
     );
     const triggerElement = screen.getByText('Hover over me!');
 
-    await userEvent.hover(triggerElement);
+    userEvent.hover(triggerElement);
 
     const tooltipElement = screen.queryByText('Test Tooltip');
     expect(tooltipElement).toBeVisible();
   });
 
-  it('should hide the tooltip on mouse out', async () => {
+  it('should hide the tooltip on mouse out', () => {
     render(
       <Tooltip label="Test Tooltip">
         <span>Hover me</span>
@@ -61,16 +62,16 @@ describe('Tooltip Component', () => {
     );
     const triggerElement = screen.getByText('Hover me');
 
-    await userEvent.hover(triggerElement);
+    userEvent.hover(triggerElement);
     let tooltipElement = screen.getByText('Test Tooltip');
     expect(tooltipElement).toBeVisible();
 
-    await userEvent.unhover(triggerElement);
+    userEvent.unhover(triggerElement);
     tooltipElement = screen.getByRole('tooltip', { hidden: true });
     expect(tooltipElement).toHaveAttribute('aria-hidden', 'true');
   });
 
-  it('should display the tooltip on focus', async () => {
+  it('should display the tooltip on focus', () => {
     render(
       <Tooltip label="Test Tooltip">
         <span>Focus me</span>
@@ -78,12 +79,12 @@ describe('Tooltip Component', () => {
     );
     const triggerElement = screen.getByText('Focus me');
 
-    await userEvent.tab();
+    userEvent.tab();
     const tooltipElement = screen.getByText('Test Tooltip');
     expect(tooltipElement).toBeVisible();
   });
 
-  it('should hide the tooltip on blur', async () => {
+  it('should hide the tooltip on blur', () => {
     render(
       <Tooltip label="Test Tooltip">
         <span>Focus me</span>
@@ -91,16 +92,16 @@ describe('Tooltip Component', () => {
     );
     const triggerElement = screen.getByText('Focus me');
 
-    await userEvent.tab();
+    userEvent.tab();
     let tooltipElement = screen.getByRole('tooltip', { hidden: true });
     expect(tooltipElement).toBeVisible();
 
-    await userEvent.tab({ shift: true }); // Blur the element
+    userEvent.tab({ shift: true }); // Blur the element
     tooltipElement = screen.getByRole('tooltip', { hidden: true });
     expect(tooltipElement).toHaveAttribute('aria-hidden', 'true');
   });
 
-  it('should display the tooltip when the "children" prop is a React element', async () => {
+  it('should display the tooltip when the "children" prop is a React element', () => {
     render(
       <Tooltip label="Test Tooltip">
         <button type="button">Click me</button>
@@ -108,7 +109,7 @@ describe('Tooltip Component', () => {
     );
     const triggerElement = screen.getByText('Click me');
 
-    await userEvent.hover(triggerElement);
+    userEvent.hover(triggerElement);
     const tooltipElement = screen.getByRole('tooltip', { hidden: true });
     expect(tooltipElement).toBeVisible();
   });

package/src/uploadInput/UploadInput.spec.tsx

@@ -1,5 +1,5 @@
 import { within } from '@testing-library/react';
-import { userEvent } from '@testing-library/user-event';
+import userEvent from '@testing-library/user-event';
 
 import { Status } from '../common';
 import { mockMatchMedia, render, screen, waitFor, waitForElementToBeRemoved } from '../test-utils';
@@ -9,8 +9,6 @@ import { TEST_IDS as UPLOAD_BUTTON_TEST_IDS } from './uploadButton/UploadButton'
 import { TEST_IDS as UPLOAD_ITEM_TEST_IDS } from './uploadItem/UploadItem';
 import { act } from 'react';
 
-const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTimeAsync });
-
 mockMatchMedia();
 
 describe('UploadInput', () => {
@@ -60,7 +58,10 @@ describe('UploadInput', () => {
       renderComponent({ ...props, onFilesChange });
 
       const input = screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput);
-      await user.upload(input, [pngFile, jpgFile]);
+      userEvent.upload(input, [pngFile, jpgFile]);
+      await act(async () => {
+        await jest.runOnlyPendingTimersAsync();
+      });
 
       expect(props.onUploadFile).toHaveBeenCalledTimes(1);
       expect(onFilesChange).toHaveBeenCalledTimes(2);
@@ -115,7 +116,7 @@ describe('UploadInput', () => {
       expect(screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput)).toHaveAttribute('multiple');
 
       const input = screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput);
-      await user.upload(input, [pngFile, jpgFile]);
+      userEvent.upload(input, [pngFile, jpgFile]);
 
       await waitFor(() => {
         expect(props.onUploadFile).toHaveBeenCalledTimes(2);
@@ -243,11 +244,11 @@ describe('UploadInput', () => {
       });
 
       const input = screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput);
-      await user.upload(input, [pngFile, jpgFile]);
+      userEvent.upload(input, [pngFile, jpgFile]);
 
       const pngFile2 = new File(['foo2'], 'foo2.png', { type: 'image/png' });
       const jpgFile2 = new File(['foo2'], 'foo2.jpg', { type: 'image/jpeg' });
-      await user.upload(input, [pngFile2, jpgFile2]);
+      userEvent.upload(input, [pngFile2, jpgFile2]);
 
       await waitFor(() => {
         expect(screen.getByText(maxFilesReachedMessage)).toBeInTheDocument();
@@ -273,7 +274,7 @@ describe('UploadInput', () => {
       const input = screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput);
       const pngFile2 = new File(['foo2'], 'foo2.png', { type: 'image/png' });
 
-      await user.upload(input, [pngFile, jpgFile, pngFile2]);
+      userEvent.upload(input, [pngFile, jpgFile, pngFile2]);
 
       await waitFor(() => {
         expect(screen.getByText(defaultMaxFilesReachedMessage)).toBeInTheDocument();
@@ -304,7 +305,7 @@ describe('UploadInput', () => {
       const overSizedFile = new File([''], 'testFile.png', { type: 'image/png' });
       Object.defineProperty(overSizedFile, 'size', { value: twoKbInBytes });
 
-      await user.upload(input, overSizedFile);
+      userEvent.upload(input, [overSizedFile]);
       await waitFor(() => {
         expect(screen.getByText(sizeLimitErrorMessage)).toBeInTheDocument();
       });