@coveord/plasma-mantine 48.2.0 → 48.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "48.2.0",
+  "version": "48.2.1",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -46,7 +46,7 @@
     "@testing-library/dom": "8.18.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
-    "@testing-library/user-event": "12.8.3",
+    "@testing-library/user-event": "14.4.3",
     "@types/jest": "29.1.2",
     "@types/lodash.defaultsdeep": "4.6.7",
     "@types/react": "18.0.21",

package/src/components/collection/__tests__/Collection.spec.tsx

@@ -24,6 +24,7 @@ describe('Collection', () => {
     });
 
     it('removes the item when clicking on its remove button', async () => {
+        const user = userEvent.setup({delay: null});
         const Fixture = () => {
             const form = useForm({initialValues: {fruits: ['banana', 'orange']}});
             return (
@@ -42,7 +43,7 @@ describe('Collection', () => {
         /* eslint-disable-next-line testing-library/no-node-access */
         const removeBanana = await within(items[0].parentElement).findByRole('button', {name: /remove/i});
 
-        userEvent.click(removeBanana);
+        await user.click(removeBanana);
 
         items = screen.getAllByTestId('item');
         // eslint-disable-next-line jest-dom/prefer-in-document
@@ -52,6 +53,7 @@ describe('Collection', () => {
     });
 
     it('calls the onRemoveItem function when clicking on a remove button', async () => {
+        const user = userEvent.setup({delay: null});
         const onRemoveItemSpy = jest.fn();
         const Fixture = () => {
             const form = useForm({initialValues: {fruits: ['banana', 'orange']}});
@@ -67,18 +69,19 @@ describe('Collection', () => {
         expect(items).toHaveLength(2);
         /* eslint-disable-next-line testing-library/no-node-access */
         const removeOrange = await within(items[1].parentElement).findByRole('button', {name: /remove/i});
-        userEvent.click(removeOrange);
+        await user.click(removeOrange);
 
         expect(onRemoveItemSpy).toHaveBeenCalledWith(1);
 
         items = screen.getAllByTestId('item');
         const removeBanana = await within(items[0].parentElement).findByRole('button', {name: /remove/i});
-        userEvent.click(removeBanana);
+        await user.click(removeBanana);
 
         expect(onRemoveItemSpy).toHaveBeenCalledWith(0);
     });
 
     it('does not render the remove button when disabled', async () => {
+        const user = userEvent.setup({delay: null});
         const Fixture = () => {
             const [disabled, setDisabled] = useState(false);
             const form = useForm({initialValues: {fruits: ['banana', 'orange']}});
@@ -94,11 +97,12 @@ describe('Collection', () => {
 
         render(<Fixture />);
         await screen.findAllByRole('button', {name: /remove/i});
-        userEvent.click(screen.getByRole('button', {name: /disable/i}));
+        await user.click(screen.getByRole('button', {name: /disable/i}));
         expect(screen.queryByRole('button', {name: /remove/i})).not.toBeInTheDocument();
     });
 
-    it('adds a new item when clicking on the add button', () => {
+    it('adds a new item when clicking on the add button', async () => {
+        const user = userEvent.setup({delay: null});
         const Fixture = () => {
             const form = useForm({initialValues: {fruits: ['banana', 'orange']}});
             return (
@@ -113,7 +117,7 @@ describe('Collection', () => {
 
         render(<Fixture />);
         const addItem = screen.getByRole('button', {name: /add/i});
-        userEvent.click(addItem);
+        await user.click(addItem);
 
         const items = screen.getAllByTestId('item');
         expect(items).toHaveLength(3);
@@ -190,6 +194,7 @@ describe('Collection', () => {
         });
 
         it('not render the remove button after removing an item from a collection containing two items', async () => {
+            const user = userEvent.setup({delay: null});
             const Fixture = () => {
                 const form = useForm({initialValues: {fruits: ['banana', 'orange']}});
                 return (
@@ -211,7 +216,7 @@ describe('Collection', () => {
             expect(items[0]).toHaveTextContent('banana');
             expect(items[1]).toHaveTextContent('orange');
 
-            userEvent.click(removeButtons[1]);
+            await user.click(removeButtons[1]);
 
             expect(screen.queryByRole('button', {name: /remove/i})).not.toBeInTheDocument();
         });
@@ -238,6 +243,7 @@ describe('Collection', () => {
 
         describe('when required is true', () => {
             it('not render the remove button after removing an item from a collection containing two items', async () => {
+                const user = userEvent.setup({delay: null});
                 const Fixture = () => {
                     const form = useForm({initialValues: {fruits: ['banana', 'orange']}});
                     return (
@@ -265,7 +271,7 @@ describe('Collection', () => {
                 expect(items[0]).toHaveTextContent('banana');
                 expect(items[1]).toHaveTextContent('orange');
 
-                userEvent.click(removeButtons[1]);
+                await user.click(removeButtons[1]);
 
                 expect(screen.queryByRole('button', {name: /remove/i})).not.toBeInTheDocument();
             });

package/src/components/date-range-picker/__tests__/DateRangePickerInlineCalendar.spec.tsx

@@ -4,21 +4,23 @@ import dayjs from 'dayjs';
 import {DateRangePickerInlineCalendar} from '../DateRangePickerInlineCalendar';
 
 describe('DateRangePickerInlineCalendar', () => {
-    it('calls onApply when the user clicks on the apply button', () => {
+    it('calls onApply when the user clicks on the apply button', async () => {
+        const user = userEvent.setup({delay: null});
         const onApply = jest.fn();
         render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={onApply} onCancel={jest.fn()} />);
 
-        userEvent.click(screen.getByRole('button', {name: 'Apply'}));
+        await user.click(screen.getByRole('button', {name: 'Apply'}));
 
         expect(onApply).toHaveBeenCalledTimes(1);
         expect(onApply).toHaveBeenCalledWith([null, null]);
     });
 
-    it('calls onCancel when the user clicks on the cancel button', () => {
+    it('calls onCancel when the user clicks on the cancel button', async () => {
+        const user = userEvent.setup({delay: null});
         const onCancel = jest.fn();
         render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={jest.fn()} onCancel={onCancel} />);
 
-        userEvent.click(screen.getByRole('button', {name: 'Cancel'}));
+        await user.click(screen.getByRole('button', {name: 'Cancel'}));
 
         expect(onCancel).toHaveBeenCalledTimes(1);
     });
@@ -29,7 +31,8 @@ describe('DateRangePickerInlineCalendar', () => {
         expect(screen.queryByRole('searchbox')).not.toBeInTheDocument();
     });
 
-    it('calls onApply with the selected dates when choosing a preset', () => {
+    it('calls onApply with the selected dates when choosing a preset', async () => {
+        const user = userEvent.setup({delay: null});
         const onApply = jest.fn();
         render(
             <DateRangePickerInlineCalendar
@@ -42,50 +45,52 @@ describe('DateRangePickerInlineCalendar', () => {
             />
         );
 
-        userEvent.click(
+        await user.click(
             screen.getByRole('searchbox', {
                 name: 'Date range',
             })
         );
-        userEvent.click(screen.getByRole('option', {name: 'select me'}));
-        userEvent.click(screen.getByRole('button', {name: 'Apply'}));
+        await user.click(screen.getByRole('option', {name: 'select me'}));
+        await user.click(screen.getByRole('button', {name: 'Apply'}));
 
         expect(onApply).toHaveBeenCalledWith([new Date(1999, 11, 31), new Date(2000, 0, 1)]);
     });
 
-    it('calls onApply with the selected dates when clicking in the calendar', () => {
+    it('calls onApply with the selected dates when clicking in the calendar', async () => {
+        const user = userEvent.setup({delay: null});
         jest.useFakeTimers().setSystemTime(new Date(2022, 0, 31));
         const onApply = jest.fn();
         render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={onApply} onCancel={jest.fn()} />);
 
         // click once for the start, once for the end
-        userEvent.click(screen.getAllByRole('button', {name: '8'})[0]);
-        userEvent.click(screen.getAllByRole('button', {name: '14'})[0]);
+        await user.click(screen.getAllByRole('button', {name: '8'})[0]);
+        await user.click(screen.getAllByRole('button', {name: '14'})[0]);
 
-        userEvent.click(screen.getByRole('button', {name: 'Apply'}));
+        await user.click(screen.getByRole('button', {name: 'Apply'}));
 
         expect(onApply).toHaveBeenCalledWith([new Date(2022, 0, 8), new Date(2022, 0, 14)]);
 
         jest.useRealTimers();
     });
 
-    it('calls onApply with the selected dates when typing in the inputs', () => {
+    it('calls onApply with the selected dates when typing in the inputs', async () => {
+        const user = userEvent.setup({delay: null});
         const onApply = jest.fn();
         render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={onApply} onCancel={jest.fn()} />);
 
         const startInput = screen.getByRole('textbox', {
             name: /start/i,
         });
-        userEvent.clear(startInput);
-        userEvent.type(startInput, 'Jan 8, 2022');
+        await user.clear(startInput);
+        await user.type(startInput, 'Jan 8, 2022');
 
         const endInput = screen.getByRole('textbox', {
             name: /end/i,
         });
-        userEvent.clear(endInput);
-        userEvent.type(endInput, 'Jan 14, 2022');
+        await user.clear(endInput);
+        await user.type(endInput, 'Jan 14, 2022');
 
-        userEvent.click(screen.getByRole('button', {name: 'Apply'}));
+        await user.click(screen.getByRole('button', {name: 'Apply'}));
 
         expect(onApply).toHaveBeenCalledWith([
             dayjs(new Date(2022, 0, 8)).startOf('day').toDate(),

package/src/components/date-range-picker/__tests__/DateRangePickerPopoverCalendar.spec.tsx

@@ -19,7 +19,8 @@ describe('DateRangePickerPopoverCalendar', () => {
         expect(screen.queryByRole('searchbox')).not.toBeInTheDocument();
     });
 
-    it('updates with the selected dates when choosing a preset', () => {
+    it('updates with the selected dates when choosing a preset', async () => {
+        const user = userEvent.setup({delay: null});
         const Fixture = () => {
             const form = useForm<{dates: DateRangePickerValue}>({initialValues: {dates: [null, null]}});
             return (
@@ -36,17 +37,18 @@ describe('DateRangePickerPopoverCalendar', () => {
         };
         render(<Fixture />);
 
-        userEvent.click(
+        await user.click(
             screen.getByRole('searchbox', {
                 name: 'Date range',
             })
         );
-        userEvent.click(screen.getByRole('option', {name: 'select me'}));
+        await user.click(screen.getByRole('option', {name: 'select me'}));
 
         expect(screen.getByTestId('json')).toHaveTextContent('["1999-12-31T00:00:00.000Z","2000-01-01T00:00:00.000Z"]');
     });
 
-    it('calls onApply with the selected dates when clicking in the calendar', () => {
+    it('calls onApply with the selected dates when clicking in the calendar', async () => {
+        const user = userEvent.setup({delay: null});
         jest.useFakeTimers().setSystemTime(new Date(2022, 0, 31));
         const Fixture = () => {
             const form = useForm<{dates: DateRangePickerValue}>({initialValues: {dates: [null, null]}});
@@ -59,10 +61,10 @@ describe('DateRangePickerPopoverCalendar', () => {
         };
         render(<Fixture />);
 
-        userEvent.click(screen.getByRole('textbox', {name: 'Start'}));
+        await user.click(screen.getByRole('textbox', {name: 'Start'}));
         // click once for the start, once for the end
-        userEvent.click(screen.getAllByRole('button', {name: '8'})[0]);
-        userEvent.click(screen.getAllByRole('button', {name: '14'})[0]);
+        await user.click(screen.getAllByRole('button', {name: '8'})[0]);
+        await user.click(screen.getAllByRole('button', {name: '14'})[0]);
 
         // hides the calendar when the second date is clicked
         expect(screen.queryByRole('button', {name: '8'})).not.toBeInTheDocument();
@@ -72,7 +74,8 @@ describe('DateRangePickerPopoverCalendar', () => {
         jest.useRealTimers();
     });
 
-    it('calls onApply with the selected dates when typing in the inputs', () => {
+    it('calls onApply with the selected dates when typing in the inputs', async () => {
+        const user = userEvent.setup({delay: null});
         const Fixture = () => {
             const form = useForm<{dates: DateRangePickerValue}>({initialValues: {dates: [null, null]}});
             return (
@@ -87,14 +90,14 @@ describe('DateRangePickerPopoverCalendar', () => {
         const startInput = screen.getByRole('textbox', {
             name: /start/i,
         });
-        userEvent.clear(startInput);
-        userEvent.type(startInput, 'Jan 8, 2022');
+        await user.clear(startInput);
+        await user.type(startInput, 'Jan 8, 2022');
 
         const endInput = screen.getByRole('textbox', {
             name: /end/i,
         });
-        userEvent.clear(endInput);
-        userEvent.type(endInput, 'Jan 14, 2022');
+        await user.clear(endInput);
+        await user.type(endInput, 'Jan 14, 2022');
 
         expect(screen.getByTestId('json')).toHaveTextContent('["2022-01-08T00:00:00.000Z","2022-01-14T23:59:59.999Z"]');
     });

package/src/components/date-range-picker/__tests__/DateRangePickerPresetSelect.spec.tsx

@@ -3,7 +3,8 @@ import {render, screen, userEvent} from '@test-utils';
 import {DateRangePickerPresetSelect} from '../DateRangePickerPresetSelect';
 
 describe('DateRangePickerPresetSelect', () => {
-    it('calls onChange when selecting a preset', () => {
+    it('calls onChange when selecting a preset', async () => {
+        const user = userEvent.setup({delay: null});
         const onChange = jest.fn();
         render(
             <DateRangePickerPresetSelect
@@ -15,12 +16,12 @@ describe('DateRangePickerPresetSelect', () => {
             />
         );
 
-        userEvent.click(
+        await user.click(
             screen.getByRole('searchbox', {
                 name: 'Date range',
             })
         );
-        userEvent.click(screen.getByRole('option', {name: 'select me'}));
+        await user.click(screen.getByRole('option', {name: 'select me'}));
 
         expect(onChange).toHaveBeenCalledWith([new Date(1999, 11, 31), new Date(2000, 0, 1)]);
     });

package/src/components/date-range-picker/__tests__/EditableDateRangePicker.spec.tsx

@@ -18,7 +18,8 @@ describe('EditableDateRangePicker', () => {
         expect(screen.getByText('SEPARATOR')).toBeVisible();
     });
 
-    it('updates when editing values', () => {
+    it('updates when editing values', async () => {
+        const user = userEvent.setup({delay: null});
         const Fixture = () => {
             const [value, setValue] = useState<DateRangePickerValue>([null, null]);
             return (
@@ -33,14 +34,14 @@ describe('EditableDateRangePicker', () => {
         const startInput = screen.getByRole('textbox', {
             name: /start/i,
         });
-        userEvent.clear(startInput);
-        userEvent.type(startInput, 'Jan 8, 2022');
+        await user.clear(startInput);
+        await user.type(startInput, 'Jan 8, 2022');
 
         const endInput = screen.getByRole('textbox', {
             name: /end/i,
         });
-        userEvent.clear(endInput);
-        userEvent.type(endInput, 'Jan 14, 2022');
+        await user.clear(endInput);
+        await user.type(endInput, 'Jan 14, 2022');
 
         expect(screen.getByTestId('json')).toHaveTextContent('["2022-01-08T00:00:00.000Z","2022-01-14T23:59:59.999Z"]');
     });

package/src/components/inline-confirm/__tests__/InlineConfirm.spec.tsx

@@ -9,7 +9,8 @@ describe('InlineConfirm', () => {
         expect(screen.getByText('Hello World')).toBeVisible();
     });
 
-    it('calls the onClick prop when clicking on a button', () => {
+    it('calls the onClick prop when clicking on a button', async () => {
+        const user = userEvent.setup({delay: null});
         const onClickSpy = jest.fn();
         render(
             <InlineConfirm>
@@ -19,12 +20,13 @@ describe('InlineConfirm', () => {
             </InlineConfirm>
         );
 
-        userEvent.click(screen.getByRole('button', {name: 'Delete'}));
+        await user.click(screen.getByRole('button', {name: 'Delete'}));
 
         expect(onClickSpy).toHaveBeenCalledTimes(1);
     });
 
-    it('replace the children with a prompt when clicking on a button which requires confirmation', () => {
+    it('replace the children with a prompt when clicking on a button which requires confirmation', async () => {
+        const user = userEvent.setup({delay: null});
         render(
             <InlineConfirm>
                 <InlineConfirm.Button id="my-button-id">Remove</InlineConfirm.Button>
@@ -34,13 +36,14 @@ describe('InlineConfirm', () => {
         expect(screen.queryByText('Are you sure?')).not.toBeInTheDocument();
         expect(screen.getByRole('button', {name: 'Remove'})).toBeVisible();
 
-        userEvent.click(screen.getByRole('button', {name: 'Remove'}));
+        await user.click(screen.getByRole('button', {name: 'Remove'}));
 
         expect(screen.getByText('Are you sure?')).toBeVisible();
         expect(screen.queryByRole('button', {name: 'Remove'})).not.toBeInTheDocument();
     });
 
-    it('hides the prompt when the user cancel and call onConfirm when the user confirms', () => {
+    it('hides the prompt when the user cancel and call onConfirm when the user confirms', async () => {
+        const user = userEvent.setup({delay: null});
         const confirmSpy = jest.fn();
         render(
             <InlineConfirm>
@@ -55,22 +58,23 @@ describe('InlineConfirm', () => {
             </InlineConfirm>
         );
 
-        userEvent.click(screen.getByRole('button', {name: 'Remove'}));
+        await user.click(screen.getByRole('button', {name: 'Remove'}));
         expect(screen.getByText('Are you sure?')).toBeVisible();
 
-        userEvent.click(screen.getByRole('button', {name: 'I changed my mind'}));
+        await user.click(screen.getByRole('button', {name: 'I changed my mind'}));
         expect(screen.queryByText('Are you sure?')).not.toBeInTheDocument();
         expect(confirmSpy).not.toHaveBeenCalled();
 
-        userEvent.click(screen.getByRole('button', {name: 'Remove'}));
+        await user.click(screen.getByRole('button', {name: 'Remove'}));
         expect(screen.getByText('Are you sure?')).toBeVisible();
 
-        userEvent.click(screen.getByRole('button', {name: 'I confirm'}));
+        await user.click(screen.getByRole('button', {name: 'I confirm'}));
         expect(screen.queryByText('Are you sure?')).not.toBeInTheDocument();
         expect(confirmSpy).toHaveBeenCalledTimes(1);
     });
 
-    it('shows the prompt related to the clicked button', () => {
+    it('shows the prompt related to the clicked button', async () => {
+        const user = userEvent.setup({delay: null});
         render(
             <InlineConfirm>
                 <InlineConfirm.Button id="remove">Remove</InlineConfirm.Button>
@@ -81,13 +85,13 @@ describe('InlineConfirm', () => {
             </InlineConfirm>
         );
 
-        userEvent.click(screen.getByRole('button', {name: 'Remove'}));
+        await user.click(screen.getByRole('button', {name: 'Remove'}));
         expect(screen.getByText('Delete X?')).toBeVisible();
         expect(screen.queryByText('Print?')).not.toBeInTheDocument();
 
-        userEvent.click(screen.getByRole('button', {name: 'Cancel'}));
+        await user.click(screen.getByRole('button', {name: 'Cancel'}));
 
-        userEvent.click(screen.getByRole('button', {name: 'Print'}));
+        await user.click(screen.getByRole('button', {name: 'Print'}));
         expect(screen.queryByText('Delete X?')).not.toBeInTheDocument();
         expect(screen.getByText('Print?')).toBeVisible();
     });

package/src/components/modal-wizard/__tests__/ModalWizard.spec.tsx

@@ -2,7 +2,8 @@ import {render, screen, userEvent} from '@test-utils';
 import {ModalWizard} from '../ModalWizard';
 
 describe('ModalWizard', () => {
-    it('navigate slides using footer buttons', () => {
+    it('navigate slides using footer buttons', async () => {
+        const user = userEvent.setup({delay: null});
         const modelSteps = [
             {
                 docLink: 'https://google.com',
@@ -69,7 +70,7 @@ describe('ModalWizard', () => {
         });
         expect(nextButton).toBeInTheDocument();
 
-        userEvent.click(nextButton);
+        await user.click(nextButton);
 
         expect(
             screen.getByRole('heading', {
@@ -96,7 +97,7 @@ describe('ModalWizard', () => {
         });
         expect(nextButton).toBeInTheDocument();
 
-        userEvent.click(nextButton);
+        await user.click(nextButton);
 
         expect(
             screen.getByRole('heading', {
@@ -125,7 +126,7 @@ describe('ModalWizard', () => {
         expect(nextButton).toBeInTheDocument();
         expect(nextButton).toBeDisabled();
 
-        userEvent.click(
+        await user.click(
             screen.getByRole('button', {
                 name: /previous/i,
             })
@@ -152,7 +153,8 @@ describe('ModalWizard', () => {
         ).toBeInTheDocument();
     });
 
-    it('modal wizard onClose', () => {
+    it('modal wizard onClose', async () => {
+        const user = userEvent.setup({delay: null});
         const modelSteps = [
             {
                 docLink: 'https://google.com',
@@ -182,12 +184,13 @@ describe('ModalWizard', () => {
         const closeButton = screen.getByRole('button', {
             name: /closebuttonlabel/i,
         });
-        userEvent.click(closeButton);
+        await user.click(closeButton);
 
         expect(onClose).toHaveBeenCalledTimes(1);
     });
 
-    it('modal wizard onCancel', () => {
+    it('modal wizard onCancel', async () => {
+        const user = userEvent.setup({delay: null});
         const modelSteps = [
             {
                 docLink: 'https://google.com',
@@ -217,12 +220,13 @@ describe('ModalWizard', () => {
         const cancelButton = screen.getByRole('button', {
             name: /cancel/i,
         });
-        userEvent.click(cancelButton);
+        await user.click(cancelButton);
 
         expect(onClose).toHaveBeenCalledTimes(1);
     });
 
-    it('modal wizard onFinish', () => {
+    it('modal wizard onFinish', async () => {
+        const user = userEvent.setup({delay: null});
         const modelSteps = [
             {
                 docLink: 'https://google.com',
@@ -254,11 +258,12 @@ describe('ModalWizard', () => {
             name: /finish/i,
         });
 
-        userEvent.click(finishButton);
+        await user.click(finishButton);
         expect(onFinish).toHaveBeenCalledTimes(1);
     });
 
-    it('handle dirty state if user confirms close', () => {
+    it('handle dirty state if user confirms close', async () => {
+        const user = userEvent.setup({delay: null});
         const modelSteps = [
             {
                 docLink: 'https://google.com',
@@ -295,13 +300,14 @@ describe('ModalWizard', () => {
         });
 
         handleDirtyState.mockReturnValueOnce(true);
-        userEvent.click(closeButton);
+        await user.click(closeButton);
 
         expect(handleDirtyState).toHaveBeenCalledTimes(1);
         expect(onClose).toHaveBeenCalledTimes(1);
     });
 
-    it('handle dirty state if user confirms cancel', () => {
+    it('handle dirty state if user confirms cancel', async () => {
+        const user = userEvent.setup({delay: null});
         const modelSteps = [
             {
                 docLink: 'https://google.com',
@@ -338,7 +344,7 @@ describe('ModalWizard', () => {
         });
 
         handleDirtyState.mockReturnValueOnce(false);
-        userEvent.click(closeButton);
+        await user.click(closeButton);
         expect(handleDirtyState).toHaveBeenCalledTimes(1);
         expect(onClose).toHaveBeenCalledTimes(0);
     });

package/src/components/table/__tests__/Table.spec.tsx

@@ -69,6 +69,7 @@ describe('Table', () => {
     });
 
     it('opens the collapsible rows when the user click on the toggle', async () => {
+        const user = userEvent.setup({delay: null});
         const Fixture: FunctionComponent<{row: RowData}> = ({row}) => <div>Collapsible content: {row.lastName}</div>;
         const customColumns: Array<ColumnDef<RowData>> = [
             columnHelper.accessor('firstName', {
@@ -89,7 +90,7 @@ describe('Table', () => {
 
         expect(screen.queryByText('Collapsible content: last')).not.toBeVisible();
 
-        userEvent.click(screen.getByRole('button', {name: 'arrowHeadDown'}));
+        await user.click(screen.getByRole('button', {name: 'arrowHeadDown'}));
         await waitFor(() => {
             expect(screen.queryByText('Collapsible content: last')).toBeVisible();
         });
@@ -126,7 +127,8 @@ describe('Table', () => {
         expect(allRows).toHaveLength(2);
     });
 
-    it('reset row selection when user click outside the table', () => {
+    it('reset row selection when user click outside the table', async () => {
+        const user = userEvent.setup({delay: null});
         render(
             <div>
                 <div>I'm a header</div>
@@ -144,11 +146,11 @@ describe('Table', () => {
 
         expect(row).not.toHaveClass('__mantine-ref-rowSelected');
 
-        userEvent.click(row);
+        await user.click(row);
 
         expect(row).toHaveClass('__mantine-ref-rowSelected');
 
-        userEvent.click(screen.getByText(/i'm a header/i));
+        await user.click(screen.getByText(/i'm a header/i));
 
         expect(row).not.toHaveClass('__mantine-ref-rowSelected');
     });

package/src/components/table/__tests__/TableActions.spec.tsx

@@ -10,7 +10,8 @@ const columnHelper = createColumnHelper<RowData>();
 const columns: Array<ColumnDef<RowData>> = [columnHelper.accessor('name', {enableSorting: false})];
 
 describe('Table.Actions', () => {
-    it('displays the actions when the row is selected', () => {
+    it('displays the actions when the row is selected', async () => {
+        const user = userEvent.setup({delay: null});
         render(
             <Table<RowData> data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns}>
                 <Table.Header>
@@ -24,12 +25,12 @@ describe('Table.Actions', () => {
         expect(screen.queryByRole('button', {name: 'Eat vegetable'})).not.toBeInTheDocument();
 
         // select the fruit row
-        userEvent.click(screen.getByRole('cell', {name: 'fruit'}));
+        await user.click(screen.getByRole('cell', {name: 'fruit'}));
         expect(screen.getByRole('button', {name: 'Eat fruit'})).toBeVisible();
         expect(screen.queryByRole('button', {name: 'Eat vegetable'})).not.toBeInTheDocument();
 
         // select the vegetable row
-        userEvent.click(screen.getByRole('cell', {name: 'vegetable'}));
+        await user.click(screen.getByRole('cell', {name: 'vegetable'}));
         expect(screen.queryByRole('button', {name: 'Eat fruit'})).not.toBeInTheDocument();
         expect(screen.getByRole('button', {name: 'Eat vegetable'})).toBeVisible();
     });

package/src/components/table/__tests__/TableDateRangePicker.spec.tsx

@@ -46,6 +46,7 @@ describe('Table.DateRangePicker', () => {
     });
 
     it('displays the selected date range in the table', async () => {
+        const user = userEvent.setup({delay: null});
         const onChange = jest.fn();
         render(
             <Table
@@ -65,19 +66,19 @@ describe('Table.DateRangePicker', () => {
         await screen.findByText('Jan 01, 2022 - Jan 07, 2022');
         await screen.findByRole('button', {name: 'calendar'});
 
-        userEvent.click(screen.getByRole('button', {name: 'calendar'}));
+        await user.click(screen.getByRole('button', {name: 'calendar'}));
 
         await screen.findByRole('dialog');
 
         // select a preset
-        userEvent.click(
+        await user.click(
             screen.getByRole('searchbox', {
                 name: 'Date range',
             })
         );
-        userEvent.click(screen.getByRole('option', {name: 'Preset'}));
+        await user.click(screen.getByRole('option', {name: 'Preset'}));
 
-        userEvent.click(screen.getByRole('button', {name: 'Apply'}));
+        await user.click(screen.getByRole('button', {name: 'Apply'}));
 
         await waitFor(() => expect(screen.queryByText('Jan 08, 2022 - Jan 14, 2022')).toBeVisible());
         expect(onChange).toHaveBeenCalledWith(