Repository: mui/mui-x
Pull request #17083: [code-infra] Update some date-pickers tests for vitest
Author: login: JCQuintas
Labels: name: test
name: type: enhancement
description: It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature.
Created: 2025-03-22T23:16:29Z | Merged: 2025-03-24T10:40:07Z

These are improvements made during the [`vitest` PR ](https://github.com/mui/mui-x/pull/14508)

I'm moving the changes out so that PR is leaner. The changes mostly revolve around removing `clock='fake'` usage.

Hopefully these are reasonable enough changes to be merged without issues. 



Diff:
diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.test.tsx
index 93ab3b33983d3..4d0881d8a1522 100644
--- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.test.tsx
+++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.test.tsx
@@ -10,19 +10,22 @@ import {
 import { pickerPopperClasses } from '@mui/x-date-pickers/internals/components/PickerPopper';
 
 describe('<DateRangePicker />', () => {
-  const { render, clock } = createPickerRenderer({
-    clock: 'fake',
-    clockConfig: new Date(2018, 0, 1, 0, 0, 0, 0),
-  });
+  const { render } = createPickerRenderer();
 
   const { renderWithProps } = buildFieldInteractions({
     render,
-    clock,
     Component: DateRangePicker,
   });
 
+  const originalMatchMedia = window.matchMedia;
+
+  afterEach(() => {
+    window.matchMedia = originalMatchMedia;
+  });
+
   it('should not use the mobile picker by default', () => {
     // Test with accessible DOM structure
+    window.matchMedia = stubMatchMedia(true);
     const { unmount } = renderWithProps({ enableAccessibleFieldDOMStructure: true });
     openPicker({ type: 'date-range', initialFocus: 'start', fieldType: 'single-input' });
     expect(screen.queryByRole('dialog')).to.have.class(pickerPopperClasses.root);
@@ -30,16 +33,15 @@ describe('<DateRangePicker />', () => {
     unmount();
 
     // Test with non-accessible DOM structure
+    window.matchMedia = stubMatchMedia(true);
     renderWithProps({ enableAccessibleFieldDOMStructure: false });
     openPicker({ 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`', () => {
-    const originalMatchMedia = window.matchMedia;
-    window.matchMedia = stubMatchMedia(false);
-
     // Test with accessible DOM structure
+    window.matchMedia = stubMatchMedia(false);
     const { unmount } = renderWithProps({ enableAccessibleFieldDOMStructure: true });
     openPicker({ type: 'date-range', initialFocus: 'start', fieldType: 'single-input' });
     expect(screen.queryByRole('dialog')).not.to.have.class(pickerPopperClasses.root);
@@ -47,10 +49,9 @@ describe('<DateRangePicker />', () => {
     unmount();
 
     // Test with non-accessible DOM structure
+    window.matchMedia = stubMatchMedia(false);
     renderWithProps({ enableAccessibleFieldDOMStructure: false });
     openPicker({ type: 'date-range', initialFocus: 'start', fieldType: 'single-input' });
     expect(screen.queryByRole('dialog')).not.to.have.class(pickerPopperClasses.root);
-
-    window.matchMedia = originalMatchMedia;
   });
 });
diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/selection.SingleInputDateRangeField.test.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/selection.SingleInputDateRangeField.test.tsx
index 3e03754ecac35..315b486f948b8 100644
--- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/selection.SingleInputDateRangeField.test.tsx
+++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/selection.SingleInputDateRangeField.test.tsx
@@ -14,7 +14,6 @@ import {
 describe('<SingleInputDateRangeField /> - Selection', () => {
   const { render, clock } = createPickerRenderer({ clock: 'fake' });
   const { renderWithProps } = buildFieldInteractions({
-    clock,
     render,
     Component: SingleInputDateRangeField,
   });
diff --git a/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.test.tsx b/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.test.tsx
index 06c0a4eeaa4f5..564ba4608bc19 100644
--- a/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.test.tsx
+++ b/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.test.tsx
@@ -103,15 +103,13 @@ describe('<AdapterDateFns />', () => {
       const localeObject = localeKey === 'undefined' ? undefined : { fr, de }[localeKey];
 
       describe(`test with the ${localeName} locale`, () => {
-        const { render, clock, adapter } = createPickerRenderer({
-          clock: 'fake',
+        const { render, adapter } = createPickerRenderer({
           adapterName: 'date-fns',
           locale: localeObject,
         });
 
         const { renderWithProps } = buildFieldInteractions({
           render,
-          clock,
           Component: DateTimeField,
         });
 
diff --git a/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.test.tsx b/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.test.tsx
index f64e74d3aedce..cabba707e2212 100644
--- a/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.test.tsx
+++ b/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.test.tsx
@@ -57,15 +57,13 @@ describe('<AdapterDateFnsJalali />', () => {
       }[localeKey];
 
       describe(`test with the "${localeKey}" locale`, () => {
-        const { render, adapter, clock } = createPickerRenderer({
-          clock: 'fake',
+        const { render, adapter } = createPickerRenderer({
           adapterName: 'date-fns-jalali',
           locale: localeObject,
         });
 
         const { renderWithProps } = buildFieldInteractions({
           render,
-          clock,
           Component: DateTimeField,
         });
 
diff --git a/packages/x-date-pickers/src/AdapterDateFnsJalaliV2/AdapterDateFnsJalaliV2.test.tsx b/packages/x-date-pickers/src/AdapterDateFnsJalaliV2/AdapterDateFnsJalaliV2.test.tsx
index 2df3b70339555..f58ad65a60e57 100644
--- a/packages/x-date-pickers/src/AdapterDateFnsJalaliV2/AdapterDateFnsJalaliV2.test.tsx
+++ b/packages/x-date-pickers/src/AdapterDateFnsJalaliV2/AdapterDateFnsJalaliV2.test.tsx
@@ -50,15 +50,13 @@ describe('<AdapterDateFnsJalaliV2 />', () => {
       }[localeKey];
 
       describe(`test with the "${localeKey}" locale`, () => {
-        const { render, adapter, clock } = createPickerRenderer({
-          clock: 'fake',
+        const { render, adapter } = createPickerRenderer({
           adapterName: 'date-fns-jalali',
           locale: localeObject,
         });
 
         const { renderWithProps } = buildFieldInteractions({
           render,
-          clock,
           Component: DateTimeField,
         });
 
diff --git a/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.test.tsx b/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.test.tsx
index c9f54abafb272..c0a57036bd069 100644
--- a/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.test.tsx
+++ b/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.test.tsx
@@ -134,15 +134,13 @@ describe('<AdapterDayjs />', () => {
       const localeObject = localeKey === 'undefined' ? undefined : { code: localeKey };
 
       describe(`test with the ${localeName} locale`, () => {
-        const { render, clock, adapter } = createPickerRenderer({
-          clock: 'fake',
+        const { render, adapter } = createPickerRenderer({
           adapterName: 'dayjs',
           locale: localeObject,
         });
 
         const { renderWithProps } = buildFieldInteractions({
           render,
-          clock,
           Component: DateTimeField,
         });
 
diff --git a/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.test.tsx b/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.test.tsx
index f356d1d624b49..74d039083fbcc 100644
--- a/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.test.tsx
+++ b/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.test.tsx
@@ -93,15 +93,13 @@ describe('<AdapterLuxon />', () => {
       const localeObject = localeKey === 'undefined' ? undefined : { code: localeKey };
 
       describe(`test with the ${localeName} locale`, () => {
-        const { render, clock, adapter } = createPickerRenderer({
-          clock: 'fake',
+        const { render, adapter } = createPickerRenderer({
           adapterName: 'luxon',
           locale: localeObject,
         });
 
         const { renderWithProps } = buildFieldInteractions({
           render,
-          clock,
           Component: DateTimeField,
         });
 
@@ -149,15 +147,13 @@ describe('<AdapterLuxon />', () => {
       const localeObject = localeKey === 'undefined' ? undefined : { code: localeKey };
 
       describe(`test with the ${localeName} locale`, () => {
-        const { render, adapter, clock } = createPickerRenderer({
-          clock: 'fake',
+        const { render, adapter } = createPickerRenderer({
           adapterName: 'luxon',
           locale: localeObject,
         });
 
         const { renderWithProps } = buildFieldInteractions({
           render,
-          clock,
           Component: DateTimeField,
         });
 
diff --git a/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.test.tsx b/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.test.tsx
index 431d72174ceab..d8e25d023e991 100644
--- a/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.test.tsx
+++ b/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.test.tsx
@@ -15,6 +15,7 @@ import {
 import 'moment/locale/de';
 import 'moment/locale/fr';
 import 'moment/locale/ko';
+import 'moment/locale/ru';
 
 describe('<AdapterMoment />', () => {
   const commonParams = {
@@ -25,8 +26,12 @@ describe('<AdapterMoment />', () => {
     frenchLocale: 'fr',
   };
 
+  moment.locale('en');
+
   describeGregorianAdapter(AdapterMoment, commonParams);
 
+  moment.locale('en');
+
   // Makes sure that all the tests that do not use timezones works fine when dayjs do not support UTC / timezone.
   describeGregorianAdapter(AdapterMoment, {
     ...commonParams,
@@ -147,15 +152,13 @@ describe('<AdapterMoment />', () => {
       const localeObject = { code: localeKey };
 
       describe(`test with the locale "${localeKey}"`, () => {
-        const { render, clock, adapter } = createPickerRenderer({
-          clock: 'fake',
+        const { render, adapter } = createPickerRenderer({
           adapterName: 'moment',
           locale: localeObject,
         });
 
         const { renderWithProps } = buildFieldInteractions({
           render,
-          clock,
           Component: DateTimeField,
         });
 
diff --git a/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.test.tsx b/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.test.tsx
index bbfc4923e5324..865999bc4294a 100644
--- a/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.test.tsx
+++ b/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.test.tsx
@@ -62,15 +62,13 @@ describe('<AdapterMomentHijri />', () => {
       const localeObject = { code: localeKey };
 
       describe(`test with the locale "${localeKey}"`, () => {
-        const { render, clock, adapter } = createPickerRenderer({
-          clock: 'fake',
+        const { render, adapter } = createPickerRenderer({
           adapterName: 'moment-hijri',
           locale: localeObject,
         });
 
         const { renderWithProps } = buildFieldInteractions({
           render,
-          clock,
           Component: DateTimeField,
         });
 
diff --git a/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.test.tsx b/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.test.tsx
index 2a12549a5824c..0093b987c10f0 100644
--- a/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.test.tsx
+++ b/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.test.tsx
@@ -68,15 +68,13 @@ describe('<AdapterMomentJalaali />', () => {
       const localeObject = { code: localeKey };
 
       describe(`test with the locale "${localeKey}"`, () => {
-        const { render, clock, adapter } = createPickerRenderer({
-          clock: 'fake',
+        const { render, adapter } = createPickerRenderer({
           adapterName: 'moment-jalaali',
           locale: localeObject,
         });
 
         const { renderWithProps } = buildFieldInteractions({
           render,
-          clock,
           Component: DateTimeField,
         });
 
diff --git a/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx b/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx
index 2af87029b11ad..acee6ea688339 100644
--- a/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx
+++ b/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx
@@ -14,7 +14,7 @@ import {
 
 describe('<DateField /> - Selection', () => {
   const { render, clock } = createPickerRenderer({ clock: 'fake' });
-  const { renderWithProps } = buildFieldInteractions({ clock, render, Component: DateField });
+  const { renderWithProps } = buildFieldInteractions({ render, Component: DateField });
 
   describe('Focus', () => {
     it('should select 1st section (v7) / all sections (v6) on mount focus (`autoFocus = true`)', () => {
diff --git a/packages/x-date-pickers/src/DateTimeField/tests/editing.DateTimeField.test.tsx b/packages/x-date-pickers/src/DateTimeField/tests/editing.DateTimeField.test.tsx
index 2abe7bd407d27..6aadfddba62e1 100644
--- a/packages/x-date-pickers/src/DateTimeField/tests/editing.DateTimeField.test.tsx
+++ b/packages/x-date-pickers/src/DateTimeField/tests/editing.DateTimeField.test.tsx
@@ -10,13 +10,11 @@ import {
 } from 'test/utils/pickers';
 
 describe('<DateTimeField /> - Editing', () => {
-  const { render, clock } = createPickerRenderer({
-    clock: 'fake',
+  const { render } = createPickerRenderer({
     clockConfig: new Date(2012, 4, 3, 14, 30, 15, 743),
   });
 
   const { renderWithProps } = buildFieldInteractions({
-    clock,
     render,
     Component: DateTimeField,
   });
diff --git a/packages/x-date-pickers/src/DateTimeField/tests/timezone.DateTimeField.test.tsx b/packages/x-date-pickers/src/DateTimeField/tests/timezone.DateTimeField.test.tsx
index cb29de9cb7b6c..e5d699b1dcfe5 100644
--- a/packages/x-date-pickers/src/DateTimeField/tests/timezone.DateTimeField.test.tsx
+++ b/packages/x-date-pickers/src/DateTimeField/tests/timezone.DateTimeField.test.tsx
@@ -118,12 +118,10 @@ describe('<DateTimeField /> - Timezone', () => {
   });
 
   describe('Value timezone modification - Luxon', () => {
-    const { render, adapter, clock } = createPickerRenderer({
-      clock: 'fake',
+    const { render, adapter } = createPickerRenderer({
       adapterName: 'luxon',
     });
     const { renderWithProps } = buildFieldInteractions({
-      clock,
       render,
       Component: DateTimeField,
     });
diff --git a/packages/x-date-pickers/src/DesktopDatePicker/tests/field.DesktopDatePicker.test.tsx b/packages/x-date-pickers/src/DesktopDatePicker/tests/field.DesktopDatePicker.test.tsx
index 144c5d400a5f3..4c2c924764094 100644
--- a/packages/x-date-pickers/src/DesktopDatePicker/tests/field.DesktopDatePicker.test.tsx
+++ b/packages/x-date-pickers/src/DesktopDatePicker/tests/field.DesktopDatePicker.test.tsx
@@ -1,4 +1,3 @@
-import { fireEvent } from '@mui/internal-test-utils';
 import { DesktopDatePicker, DesktopDatePickerProps } from '@mui/x-date-pickers/DesktopDatePicker';
 import {
   createPickerRenderer,
@@ -13,17 +12,15 @@ import {
 
 describe('<DesktopDatePicker /> - Field', () => {
   describe('Basic behaviors', () => {
-    const { render, clock } = createPickerRenderer({
-      clock: 'fake',
+    const { render } = createPickerRenderer({
       clockConfig: new Date('2018-01-01T10:05:05.000'),
     });
     const { renderWithProps } = buildFieldInteractions({
-      clock,
       render,
       Component: DesktopDatePicker,
     });
 
-    it('should be able to reset a single section', () => {
+    it('should be able to reset a single section', async () => {
       // Test with accessible DOM structure
       let view = renderWithProps(
         {
@@ -36,13 +33,13 @@ describe('<DesktopDatePicker /> - Field', () => {
       view.selectSection('month');
       expectFieldValueV7(view.getSectionsContainer(), 'MMMM DD');
 
-      view.pressKey(0, 'N');
+      await view.user.keyboard('N');
       expectFieldValueV7(view.getSectionsContainer(), 'November DD');
 
-      view.pressKey(1, '4');
+      await view.user.keyboard('4');
       expectFieldValueV7(view.getSectionsContainer(), 'November 04');
 
-      view.pressKey(1, '');
+      await view.user.keyboard('[Backspace]');
       expectFieldValueV7(view.getSectionsContainer(), 'November DD');
 
       view.unmount();
@@ -60,13 +57,13 @@ describe('<DesktopDatePicker /> - Field', () => {
       view.selectSection('month');
       expectFieldPlaceholderV6(input, 'MMMM DD');
 
-      fireEvent.change(input, { target: { value: 'N DD' } }); // Press "N"
+      await view.user.keyboard('N');
       expectFieldValueV6(input, 'November DD');
 
-      fireEvent.change(input, { target: { value: 'November 4' } }); // Press "4"
+      await view.user.keyboard('4');
       expectFieldValueV6(input, 'November 04');
 
-      fireEvent.change(input, { target: { value: 'November ' } });
+      await view.user.keyboard('[Backspace]');
       expectFieldValueV6(input, 'November DD');
     });
 
@@ -101,12 +98,10 @@ describe('<DesktopDatePicker /> - Field', () => {
   });
 
   describe('slots: field', () => {
-    const { render, clock } = createPickerRenderer({
-      clock: 'fake',
+    const { render } = createPickerRenderer({
       clockConfig: new Date('2018-01-01T10:05:05.000'),
     });
     const { renderWithProps } = buildFieldInteractions({
-      clock,
       render,
       Component: DesktopDatePicker,
     });
@@ -128,12 +123,10 @@ describe('<DesktopDatePicker /> - Field', () => {
   });
 
   describe('slots: textField', () => {
-    const { render, clock } = createPickerRenderer({
-      clock: 'fake',
+    const { render } = createPickerRenderer({
       clockConfig: new Date('2018-01-01T10:05:05.000'),
     });
     const { renderWithProps } = buildFieldInteractions({
-      clock,
       render,
       Component: DesktopDatePicker,
     });
diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/field.DesktopDateTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/field.DesktopDateTimePicker.test.tsx
index b98144f0a221d..9051007b41393 100644
--- a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/field.DesktopDateTimePicker.test.tsx
+++ b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/field.DesktopDateTimePicker.test.tsx
@@ -11,9 +11,8 @@ import {
 } from '@mui/x-date-pickers/DesktopDateTimePicker';
 
 describe('<DesktopDateTimePicker /> - Field', () => {
-  const { render, clock } = createPickerRenderer();
+  const { render } = createPickerRenderer();
   const { renderWithProps } = buildFieldInteractions({
-    clock,
     render,
     Component: DesktopDateTimePicker,
   });
diff --git a/packages/x-date-pickers/src/DesktopTimePicker/tests/field.DesktopTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopTimePicker/tests/field.DesktopTimePicker.test.tsx
index 6e3433f82f182..4930e49ebf53b 100644
--- a/packages/x-date-pickers/src/DesktopTimePicker/tests/field.DesktopTimePicker.test.tsx
+++ b/packages/x-date-pickers/src/DesktopTimePicker/tests/field.DesktopTimePicker.test.tsx
@@ -8,9 +8,8 @@ import {
 import { DesktopTimePicker, DesktopTimePickerProps } from '@mui/x-date-pickers/DesktopTimePicker';
 
 describe('<DesktopTimePicker /> - Field', () => {
-  const { render, clock } = createPickerRenderer();
+  const { render } = createPickerRenderer();
   const { renderWithProps } = buildFieldInteractions({
-    clock,
     render,
     Component: DesktopTimePicker,
   });
diff --git a/packages/x-date-pickers/src/MobileDatePicker/tests/MobileDatePicker.test.tsx b/packages/x-date-pickers/src/MobileDatePicker/tests/MobileDatePicker.test.tsx
index 1c6255189b9e3..4c08a622dfeca 100644
--- a/packages/x-date-pickers/src/MobileDatePicker/tests/MobileDatePicker.test.tsx
+++ b/packages/x-date-pickers/src/MobileDatePicker/tests/MobileDatePicker.test.tsx
@@ -14,10 +14,9 @@ import {
 } from 'test/utils/pickers';
 
 describe('<MobileDatePicker />', () => {
-  const { render, clock } = createPickerRenderer({ clock: 'fake' });
+  const { render } = createPickerRenderer();
   const { renderWithProps } = buildFieldInteractions({
     render,
-    clock,
     Component: MobileDatePicker,
   });
 
@@ -150,7 +149,7 @@ describe('<MobileDatePicker />', () => {
       expect(onAccept.callCount).to.equal(1);
     });
 
-    it('should update internal state when controlled value is updated', () => {
+    it('should update internal state when controlled value is updated', async () => {
       const view = renderWithProps({
         enableAccessibleFieldDOMStructure: true as const,
         value: adapterToUse.date('2019-01-01'),
@@ -165,9 +164,7 @@ describe('<MobileDatePicker />', () => {
 
       // Open and Dismiss the picker
       openPicker({ type: 'date' });
-      // eslint-disable-next-line material-ui/disallow-active-element-as-key-event-target
-      fireEvent.keyDown(document.activeElement!, { key: 'Escape' });
-      clock.runToLast();
+      await view.user.keyboard('[Escape]');
 
       // Verify it's still a clean value
       expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY');
diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/tests/field.MobileDateTimePicker.test.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/tests/field.MobileDateTimePicker.test.tsx
index 413a025f20021..de499d9b3ec8a 100644
--- a/packages/x-date-pickers/src/MobileDateTimePicker/tests/field.MobileDateTimePicker.test.tsx
+++ b/packages/x-date-pickers/src/MobileDateTimePicker/tests/field.MobileDateTimePicker.test.tsx
@@ -6,9 +6,8 @@ import {
 } from 'test/utils/pickers';
 
 describe('<MobileDateTimePicker /> - Field', () => {
-  const { render, clock } = createPickerRenderer();
+  const { render } = createPickerRenderer();
   const { renderWithProps } = buildFieldInteractions({
-    clock,
     render,
     Component: MobileDateTimePicker,
   });
diff --git a/packages/x-date-pickers/src/MobileTimePicker/tests/field.MobileTimePicker.test.tsx b/packages/x-date-pickers/src/MobileTimePicker/tests/field.MobileTimePicker.test.tsx
index befd200997643..f585b789011f4 100644
--- a/packages/x-date-pickers/src/MobileTimePicker/tests/field.MobileTimePicker.test.tsx
+++ b/packages/x-date-pickers/src/MobileTimePicker/tests/field.MobileTimePicker.test.tsx
@@ -6,10 +6,9 @@ import {
 import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
 
 describe('<MobileTimePicker /> - Field', () => {
-  const { render, clock } = createPickerRenderer();
+  const { render } = createPickerRenderer();
   const { renderWithProps } = buildFieldInteractions({
     render,
-    clock,
     Component: MobileTimePicker,
   });
 
diff --git a/packages/x-date-pickers/src/tests/fieldKeyboardInteraction.test.tsx b/packages/x-date-pickers/src/tests/fieldKeyboardInteraction.test.tsx
index c6f5c9471117e..ed575f24d0c34 100644
--- a/packages/x-date-pickers/src/tests/fieldKeyboardInteraction.test.tsx
+++ b/packages/x-date-pickers/src/tests/fieldKeyboardInteraction.test.tsx
@@ -1,5 +1,5 @@
 import { expect } from 'chai';
-import moment from 'moment/moment';
+import moment from 'moment';
 import jMoment from 'moment-jalaali';
 import { fireEvent } from '@mui/internal-test-utils';
 import {
@@ -15,6 +15,7 @@ import {
   getDateSectionConfigFromFormatToken,
   cleanLeadingZeros,
 } from '../internals/hooks/useField/useField.utils';
+import 'moment/locale/fa';
 
 const testDate = '2018-05-15T09:35:10';
 
@@ -56,8 +57,7 @@ const adapterToTest = [
 ] as const;
 
 describe(`RTL - test arrows navigation`, () => {
-  const { render, clock, adapter } = createPickerRenderer({
-    clock: 'fake',
+  const { render, adapter } = createPickerRenderer({
     adapterName: 'moment-jalaali',
   });
 
@@ -69,7 +69,7 @@ describe(`RTL - test arrows navigation`, () => {
     moment.locale('en');
   });
 
-  const { renderWithProps } = buildFieldInteractions({ clock, render, Component: DateTimeField });
+  const { renderWithProps } = buildFieldInteractions({ render, Component: DateTimeField });
 
   it('should move selected section to the next section respecting RTL order in empty field', () => {
     const expectedValues = ['hh', 'mm', 'YYYY', 'MM', 'DD', 'DD'];
@@ -208,12 +208,11 @@ describe(`RTL - test arrows navigation`, () => {
 
 adapterToTest.forEach((adapterName) => {
   describe(`test keyboard interaction with ${adapterName} adapter`, () => {
-    const { render, clock, adapter } = createPickerRenderer({
-      clock: 'fake',
+    const { render, adapter } = createPickerRenderer({
       adapterName,
     });
 
-    before(() => {
+    beforeEach(() => {
       if (adapterName === 'moment-jalaali') {
         jMoment.loadPersian();
       } else if (adapterName === 'moment') {
@@ -221,13 +220,13 @@ adapterToTest.forEach((adapterName) => {
       }
     });
 
-    after(() => {
+    afterEach(() => {
       if (adapterName === 'moment-jalaali') {
         moment.locale('en');
       }
     });
 
-    const { renderWithProps } = buildFieldInteractions({ clock, render, Component: DateTimeField });
+    const { renderWithProps } = buildFieldInteractions({ render, Component: DateTimeField });
 
     const cleanValueStr = (
       valueStr: string,
diff --git a/test/utils/pickers/createPickerRenderer.tsx b/test/utils/pickers/createPickerRenderer.tsx
index a1a615586315c..4486c900675de 100644
--- a/test/utils/pickers/createPickerRenderer.tsx
+++ b/test/utils/pickers/createPickerRenderer.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { createRenderer, CreateRendererOptions, RenderOptions } from '@mui/internal-test-utils';
+import sinon from 'sinon';
 import { AdapterClassToUse, AdapterName, adapterToUse, availableAdapters } from './adapters';
 
 interface CreatePickerRendererOptions extends CreateRendererOptions {
@@ -14,9 +15,30 @@ export function createPickerRenderer({
   locale,
   adapterName,
   instance,
+  clock: inClock,
+  clockConfig,
   ...createRendererOptions
 }: CreatePickerRendererOptions = {}) {
-  const { clock, render: clientRender } = createRenderer(createRendererOptions);
+  // TODO: Temporary until vitest is enabled
+  // If only clockConfig='2020/02/20' is provided, we just fake the Date, not the timers
+  // Most of the time we are using the clock we just want to fake the Date
+  // If timers are faked it can create inconsistencies with the tests.
+  // In some cases it also prevents us from really testing the real behavior of the component.
+  if (!inClock && clockConfig) {
+    let timer: sinon.SinonFakeTimers | null = null;
+    beforeEach(() => {
+      timer = sinon.useFakeTimers({ now: clockConfig, toFake: ['Date'] });
+    });
+    afterEach(() => {
+      timer?.restore();
+    });
+  }
+
+  const { clock, render: clientRender } = createRenderer({
+    ...createRendererOptions,
+    // TODO: Temporary until vitest is enabled
+    ...(inClock ? { clock: inClock, clockConfig } : {}),
+  });
 
   let adapterLocale = [
     'date-fns',
diff --git a/test/utils/pickers/describeAdapters/describeAdapters.ts b/test/utils/pickers/describeAdapters/describeAdapters.ts
index 87b2bcf67f802..b85c4a3200809 100644
--- a/test/utils/pickers/describeAdapters/describeAdapters.ts
+++ b/test/utils/pickers/describeAdapters/describeAdapters.ts
@@ -35,7 +35,6 @@ function innerDescribeAdapters<P extends {}>(
       });
 
       const fieldInteractions = buildFieldInteractions<P>({
-        clock: pickerRendererResponse.clock,
         render: pickerRendererResponse.render,
         Component: FieldComponent,
       });
diff --git a/test/utils/pickers/describeValue/describeValue.tsx b/test/utils/pickers/describeValue/describeValue.tsx
index 24b69445c5ef4..6c55503fac575 100644
--- a/test/utils/pickers/describeValue/describeValue.tsx
+++ b/test/utils/pickers/describeValue/describeValue.tsx
@@ -25,7 +25,7 @@ function innerDescribeValue<TValue extends PickerValidValue, C extends PickerCom
   getOptions: () => DescribeValueOptions<C, TValue>,
 ) {
   const options = getOptions();
-  const { defaultProps, render, clock, componentFamily } = options;
+  const { defaultProps, render, componentFamily } = options;
 
   function WrappedElementToTest(
     props: BasePickerInputProps<TValue, any, any> & UsePickerNonStaticProps & { hook?: any },
@@ -37,7 +37,7 @@ function innerDescribeValue<TValue extends PickerValidValue, C extends PickerCom
 
   let renderWithProps: BuildFieldInteractionsResponse<any>['renderWithProps'];
   if (componentFamily === 'field' || componentFamily === 'picker') {
-    const interactions = buildFieldInteractions({ clock, render, Component: ElementToTest });
+    const interactions = buildFieldInteractions({ render, Component: ElementToTest });
 
     renderWithProps = (props: any, config?: any) =>
       interactions.renderWithProps({ ...defaultProps, ...props }, { ...config, componentFamily });
diff --git a/test/utils/pickers/fields.tsx b/test/utils/pickers/fields.tsx
index 93a4e3315eb86..2c3079e951770 100644
--- a/test/utils/pickers/fields.tsx
+++ b/test/utils/pickers/fields.tsx
@@ -12,8 +12,6 @@ import { expectFieldValueV7, expectFieldValueV6 } from './assertions';
 export const getTextbox = (): HTMLInputElement => screen.getByRole('textbox');
 
 interface BuildFieldInteractionsParams<P extends {}> {
-  // TODO: Export `Clock` from monorepo
-  clock: ReturnType<typeof createRenderer>['clock'];
   render: ReturnType<typeof createRenderer>['render'];
   Component: React.FunctionComponent<P>;
 }
@@ -80,8 +78,6 @@ const RTL_THEME = createTheme({
 });
 
 export const buildFieldInteractions = <P extends {}>({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  clock,
   render,
   Component,
 }: BuildFieldInteractionsParams<P>): BuildFieldInteractionsResponse<P> => {


Reviews:
user: login: flaviendelangle
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-24T06:57:31Z
user: login: Janpot
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-24T07:10:54Z
user: login: Janpot
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-24T07:18:12Z
user: login: JCQuintas
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-24T10:40:28Z
user: login: LukasTy
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-24T11:01:17Z

Review comments:
diff_hunk: @@ -22,7 +22,7 @@ export const testCalculations: DescribeJalaliAdapterTestSuite = ({ adapter }) =>
     expect(adapter.isEqual(testDateIso, null)).to.equal(false);
   });
 
-  it('Method: isValid', () => {
+  it('Method: isValid', async () => {
path: test/utils/pickers/describeJalaliAdapter/testCalculations.ts
user: login: flaviendelangle
body: Is this `async` doing anything?
created_at: 2025-03-24T06:55:44Z
author_association: MEMBER
diff_hunk: @@ -10,47 +10,48 @@ import {
 import { pickerPopperClasses } from '@mui/x-date-pickers/internals/components/PickerPopper';
 
 describe('<DateRangePicker />', () => {
-  const { render, clock } = createPickerRenderer({
-    clock: 'fake',
-    clockConfig: new Date(2018, 0, 1, 0, 0, 0, 0),
-  });
+  const { render } = createPickerRenderer();
 
   const { renderWithProps } = buildFieldInteractions({
     render,
-    clock,
     Component: DateRangePicker,
   });
 
+  const originalMatchMedia = window.matchMedia;
+
+  afterEach(() => {
+    window.matchMedia = originalMatchMedia;
+  });
+
   it('should not use the mobile picker by default', () => {
     // Test with accessible DOM structure
+    window.matchMedia = stubMatchMedia(true);
path: packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.test.tsx
user: login: Janpot
body: _edit: nvm, we're still in mocha land, to keep in mind for when we switch to `vitest`_

Suggestion: Create a `stubMatchMedia` helper that cleans up after itself automatically

```tsx
import { onTestFinished } from 'vitest'

function stubMatchMedia(matches) {
  const original = window.matchMedia
  window.matchMedia = ...
  onTestFinished(() => {
    window.matchMedia = original
  })
}
```

The hook is called in reverse order, so it should be safe to call `stubMatchMedia` multiple times.



created_at: 2025-03-24T07:10:53Z
author_association: MEMBER
diff_hunk: @@ -22,7 +22,7 @@ export const testCalculations: DescribeJalaliAdapterTestSuite = ({ adapter }) =>
     expect(adapter.isEqual(testDateIso, null)).to.equal(false);
   });
 
-  it('Method: isValid', () => {
+  it('Method: isValid', async () => {
path: test/utils/pickers/describeJalaliAdapter/testCalculations.ts
user: login: JCQuintas
body: no, it was left from debugging 😅 
created_at: 2025-03-24T10:40:28Z
author_association: MEMBER
diff_hunk: @@ -14,9 +15,30 @@ export function createPickerRenderer({
   locale,
   adapterName,
   instance,
+  clock: inClock,
+  clockConfig,
   ...createRendererOptions
 }: CreatePickerRendererOptions = {}) {
-  const { clock, render: clientRender } = createRenderer(createRendererOptions);
+  // TODO: Temporary until vitest is enabled
+  // If only clockConfig='2020/02/20' is provided, we just fake the Date, not the timers
+  // Most of the time we are using the clock we just want to fake the Date
+  // If timers are faked it can create inconsistencies with the tests.
+  // In some cases it also prevents us from really testing the real behavior of the component.
+  if (!inClock && clockConfig) {
+    let timer: sinon.SinonFakeTimers | null = null;
+    beforeEach(() => {
+      timer = sinon.useFakeTimers({ now: clockConfig, toFake: ['Date'] });
path: test/utils/pickers/createPickerRenderer.tsx
user: login: LukasTy
body: Have you tried using the additional option added in https://github.com/mui/material-ui/pull/43729? 🤔 
created_at: 2025-03-24T11:01:17Z
author_association: MEMBER

PR comments:
user: login: github-actions[bot]
created_at: 2025-03-22T23:16:38Z
body: Thanks for adding a type label to the PR! 👍
author_association: CONTRIBUTOR
user: login: mui-bot
created_at: 2025-03-22T23:19:43Z
body: 
<!--
  0 failure: 
  0 warning: 
  
  1 markdown notices
  DangerID: danger-id-Danger;
-->



**Deploy preview:** <a href="https://deploy-preview-17083--material-ui-x.netlify.app/">https://deploy-preview-17083--material-ui-x.netlify.app/</a>
<p align="right">
  Generated by :no_entry_sign: <a href="https://danger.systems/js">dangerJS</a> against 2a04d780c0f9943254ba451249be0fd3d8ccb600
</p>

author_association: NONE