[test] Refactor Pickers tests to async user-event

packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.test.tsx

@@ -79,19 +79,19 @@ describe('<DateRangeCalendar />', () => {
       expect(rangeOn2ndCall[1]).to.toEqualDateTime(new Date(2019, 2, 19));
     });
 
-    it('should continue start selection if selected "end" date is before start', () => {
+    it('should continue start selection if selected "end" date is before start', async () => {
       const onChange = spy();
 
-      render(
+      const { user } = render(
         <DateRangeCalendar onChange={onChange} referenceDate={adapterToUse.date('2019-01-01')} />,
       );
 
-      fireEvent.click(getPickerDay('30', 'January 2019'));
-      fireEvent.click(getPickerDay('19', 'January 2019'));
+      await user.click(getPickerDay('30', 'January 2019'));
+      await user.click(getPickerDay('19', 'January 2019'));
 
       expect(screen.queryByTestId('DateRangeHighlight')).to.equal(null);
 
-      fireEvent.click(getPickerDay('30', 'January 2019'));
+      await user.click(getPickerDay('30', 'January 2019'));
 
       expect(onChange.callCount).to.equal(3);
       const range = onChange.lastCall.firstArg;
@@ -467,14 +467,14 @@ describe('<DateRangeCalendar />', () => {
     });
 
     it('should not go to the month of the end date when changing the start date and props.disableAutoMonthSwitching = true', async () => {
-      render(
+      const { user } = render(
         <DateRangeCalendar
           defaultValue={[adapterToUse.date('2018-01-01'), adapterToUse.date('2018-07-01')]}
           disableAutoMonthSwitching
         />,
       );
 
-      fireEvent.click(getPickerDay('5', 'January 2018'));
+      await user.click(getPickerDay('5', 'January 2018'));
       await waitFor(() => {
         expect(getPickerDay('1', 'January 2018')).not.to.equal(null);
       });
@@ -516,9 +516,9 @@ describe('<DateRangeCalendar />', () => {
   });
 
   ['readOnly', 'disabled'].forEach((prop) => {
-    it(`prop: ${prop}="true" should not allow date editing`, () => {
+    it(`prop: ${prop}="true" should not allow date editing`, async () => {
       const handleChange = spy();
-      render(
+      const { user } = render(
         <DateRangeCalendar
           value={[adapterToUse.date('2018-01-01'), adapterToUse.date('2018-01-10')]}
           onChange={handleChange}
@@ -537,7 +537,7 @@ describe('<DateRangeCalendar />', () => {
           'disabled',
         );
       }
-      fireEvent.click(getPickerDay('2'));
+      await user.setup({ pointerEventsCheck: 0 }).click(getPickerDay('2'));
       expect(handleChange.callCount).to.equal(0);
     });
   });
@@ -562,6 +562,7 @@ describe('<DateRangeCalendar />', () => {
       );
 
       const renderCountBeforeChange = RenderCount.callCount;
+      // sticking with `fireEvent` for simplified performance test
       fireEvent.click(getPickerDay('2'));
       expect(RenderCount.callCount - renderCountBeforeChange).to.equal(2); // 2 render * 1 day
     });
@@ -581,6 +582,7 @@ describe('<DateRangeCalendar />', () => {
       fireEvent.click(getPickerDay('2'));
 
       const renderCountBeforeChange = RenderCount.callCount;
+      // sticking with `fireEvent` for simplified performance test
       fireEvent.click(getPickerDay('4'));
       expect(RenderCount.callCount - renderCountBeforeChange).to.equal(6); // 2 render * 3 day
     });

packages/x-date-pickers-pro/src/DateRangeCalendar/timezone.DateRangeCalendar.test.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { screen, fireEvent } from '@mui/internal-test-utils';
+import { screen } from '@mui/internal-test-utils';
 import { describeAdapters } from 'test/utils/pickers';
 import { DateRangeCalendar } from './DateRangeCalendar';
 
 describe('<DateRangeCalendar /> - Timezone', () => {
   describeAdapters('Timezone prop', DateRangeCalendar, ({ adapter, render }) => {
     describe.skipIf(!adapter.isTimezoneCompatible)('timezoneCompatible', () => {
-      it('should correctly render month days when timezone changes', () => {
+      it('should correctly render month days when timezone changes', async () => {
         function DateCalendarWithControlledTimezone() {
           const [timezone, setTimezone] = React.useState('Europe/Paris');
           return (
@@ -16,7 +16,7 @@ describe('<DateRangeCalendar /> - Timezone', () => {
             </React.Fragment>
           );
         }
-        render(<DateCalendarWithControlledTimezone />);
+        const { user } = render(<DateCalendarWithControlledTimezone />);
 
         expect(
           screen.getAllByRole('gridcell', {
@@ -25,7 +25,7 @@ describe('<DateRangeCalendar /> - Timezone', () => {
           }).length,
         ).to.equal(30);
 
-        fireEvent.click(screen.getByRole('button', { name: 'Switch timezone' }));
+        await user.click(screen.getByRole('button', { name: 'Switch timezone' }));
 
         // the amount of rendered days should remain the same after changing timezone
         expect(
@@ -36,7 +36,7 @@ describe('<DateRangeCalendar /> - Timezone', () => {
         ).to.equal(30);
       });
 
-      it('should not produce invalidRange error when selecting same day after timezone change', () => {
+      it('should not produce invalidRange error when selecting same day after timezone change', async () => {
         function DateRangeCalendarWithTimezoneChange() {
           const [timezone, setTimezone] = React.useState<string>('UTC');
           const [value, setValue] = React.useState<any>([null, null]);
@@ -64,15 +64,15 @@ describe('<DateRangeCalendar /> - Timezone', () => {
           );
         }
 
-        render(<DateRangeCalendarWithTimezoneChange />);
+        const { user } = render(<DateRangeCalendarWithTimezoneChange />);
 
         // Switch timezone to Los Angeles
-        fireEvent.click(screen.getByRole('button', { name: 'Switch to Los Angeles' }));
+        await user.click(screen.getByRole('button', { name: 'Switch to Los Angeles' }));
 
         // Select Nov 12, 2025 as both start and end date
         const nov12Cells = screen.getAllByRole('gridcell', { name: '12' });
-        fireEvent.click(nov12Cells[0]);
-        fireEvent.click(nov12Cells[0]);
+        await user.click(nov12Cells[0]);
+        await user.click(nov12Cells[0]);
 
         // Step 4: Verify that the range is valid (both dates should be Nov 12)
         // The value should not have an invalidRange error, which would prevent onChange from being called

packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.test.tsx

@@ -18,17 +18,25 @@ describe('<DateRangePicker />', () => {
     Component: DateRangePicker,
   });
 
-  it('should not use the mobile picker by default', () => {
+  it('should not use the mobile picker by default', async () => {
     stubMatchMedia(true);
-    renderWithProps({});
-    openPicker({ type: 'date-range', initialFocus: 'start', fieldType: 'single-input' });
+    const { user } = renderWithProps({});
+    await openPicker(user, {
+      type: 'date-range',
+      initialFocus: 'start',
+      fieldType: 'single-input',
+    });
     expect(screen.queryByRole('dialog')).to.have.class(pickerPopperClasses.root);
   });
 
-  it('should use the mobile picker when `useMediaQuery` returns `false`', () => {
+  it('should use the mobile picker when `useMediaQuery` returns `false`', async () => {
     stubMatchMedia(false);
-    renderWithProps({});
-    openPicker({ type: 'date-range', initialFocus: 'start', fieldType: 'single-input' });
+    const { user } = renderWithProps({});
+    await openPicker(user, {
+      type: 'date-range',
+      initialFocus: 'start',
+      fieldType: 'single-input',
+    });
     expect(screen.queryByRole('dialog')).not.to.have.class(pickerPopperClasses.root);
   });