diff --git a/babel.config.js b/babel.config.js
index c5948a3c53c04..b67f02fa534d7 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -39,10 +39,6 @@ const defaultAlias = {
   packages: resolveAliasPath('./packages'),
 };
 
-const productionPlugins = [
-  ['babel-plugin-react-remove-properties', { properties: ['data-mui-test'] }],
-];
-
 /** @type {babel.ConfigFunction} */
 module.exports = function getBabelConfig(api) {
   const useESModules = api.env(['modern', 'stable', 'rollup']);
@@ -129,7 +125,9 @@ module.exports = function getBabelConfig(api) {
   }
 
   if (process.env.NODE_ENV === 'production') {
-    plugins.push(...productionPlugins);
+    if (!process.env.E2E_BUILD) {
+      plugins.push(['babel-plugin-react-remove-properties', { properties: ['data-testid'] }]);
+    }
 
     if (process.env.BABEL_ENV) {
       plugins.push([
diff --git a/docs/data/date-pickers/custom-components/ActionBarComponent.js b/docs/data/date-pickers/custom-components/ActionBarComponent.js
index 4615954c25c1b..799d4441ee332 100644
--- a/docs/data/date-pickers/custom-components/ActionBarComponent.js
+++ b/docs/data/date-pickers/custom-components/ActionBarComponent.js
@@ -27,7 +27,6 @@ function CustomActionBar(props) {
       case 'clear':
         return (
           <MenuItem
-            data-mui-test="clear-action-button"
             onClick={() => {
               onClear();
               setAnchorEl(null);
@@ -67,7 +66,6 @@ function CustomActionBar(props) {
       case 'today':
         return (
           <MenuItem
-            data-mui-test="today-action-button"
             onClick={() => {
               setAnchorEl(null);
               onSetToday();
diff --git a/docs/data/date-pickers/custom-components/ActionBarComponent.tsx b/docs/data/date-pickers/custom-components/ActionBarComponent.tsx
index 7516085bb00e3..a5a6319516c90 100644
--- a/docs/data/date-pickers/custom-components/ActionBarComponent.tsx
+++ b/docs/data/date-pickers/custom-components/ActionBarComponent.tsx
@@ -27,7 +27,6 @@ function CustomActionBar(props: PickersActionBarProps) {
       case 'clear':
         return (
           <MenuItem
-            data-mui-test="clear-action-button"
             onClick={() => {
               onClear();
               setAnchorEl(null);
@@ -64,7 +63,6 @@ function CustomActionBar(props: PickersActionBarProps) {
       case 'today':
         return (
           <MenuItem
-            data-mui-test="today-action-button"
             onClick={() => {
               setAnchorEl(null);
               onSetToday();
diff --git a/docs/pages/x/api/date-pickers/date-calendar.json b/docs/pages/x/api/date-pickers/date-calendar.json
index 88e9ce699532b..55aee6f102ab1 100644
--- a/docs/pages/x/api/date-pickers/date-calendar.json
+++ b/docs/pages/x/api/date-pickers/date-calendar.json
@@ -74,7 +74,7 @@
     },
     "renderLoading": {
       "type": { "name": "func" },
-      "default": "() => <span data-mui-test=\"loading-progress\">...</span>",
+      "default": "() => <span>...</span>",
       "signature": {
         "type": "function() => React.ReactNode",
         "describedArgs": [],
diff --git a/docs/pages/x/api/date-pickers/date-picker.json b/docs/pages/x/api/date-pickers/date-picker.json
index 8f8010bcf4e5e..d3099c56a9710 100644
--- a/docs/pages/x/api/date-pickers/date-picker.json
+++ b/docs/pages/x/api/date-pickers/date-picker.json
@@ -104,7 +104,7 @@
     },
     "renderLoading": {
       "type": { "name": "func" },
-      "default": "() => <span data-mui-test=\"loading-progress\">...</span>",
+      "default": "() => <span>...</span>",
       "signature": {
         "type": "function() => React.ReactNode",
         "describedArgs": [],
diff --git a/docs/pages/x/api/date-pickers/date-time-picker.json b/docs/pages/x/api/date-pickers/date-time-picker.json
index 875f5158e1182..7a40cea6d2a20 100644
--- a/docs/pages/x/api/date-pickers/date-time-picker.json
+++ b/docs/pages/x/api/date-pickers/date-time-picker.json
@@ -112,7 +112,7 @@
     },
     "renderLoading": {
       "type": { "name": "func" },
-      "default": "() => <span data-mui-test=\"loading-progress\">...</span>",
+      "default": "() => <span>...</span>",
       "signature": {
         "type": "function() => React.ReactNode",
         "describedArgs": [],
diff --git a/docs/pages/x/api/date-pickers/desktop-date-picker.json b/docs/pages/x/api/date-pickers/desktop-date-picker.json
index d389019d6942c..4c39c52f7bea2 100644
--- a/docs/pages/x/api/date-pickers/desktop-date-picker.json
+++ b/docs/pages/x/api/date-pickers/desktop-date-picker.json
@@ -100,7 +100,7 @@
     },
     "renderLoading": {
       "type": { "name": "func" },
-      "default": "() => <span data-mui-test=\"loading-progress\">...</span>",
+      "default": "() => <span>...</span>",
       "signature": {
         "type": "function() => React.ReactNode",
         "describedArgs": [],
diff --git a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json b/docs/pages/x/api/date-pickers/desktop-date-time-picker.json
index 57e411944cb74..88f2d64e03d3f 100644
--- a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json
+++ b/docs/pages/x/api/date-pickers/desktop-date-time-picker.json
@@ -108,7 +108,7 @@
     },
     "renderLoading": {
       "type": { "name": "func" },
-      "default": "() => <span data-mui-test=\"loading-progress\">...</span>",
+      "default": "() => <span>...</span>",
       "signature": {
         "type": "function() => React.ReactNode",
         "describedArgs": [],
diff --git a/docs/pages/x/api/date-pickers/mobile-date-picker.json b/docs/pages/x/api/date-pickers/mobile-date-picker.json
index f9d914c1abfa5..9f638cdc4f405 100644
--- a/docs/pages/x/api/date-pickers/mobile-date-picker.json
+++ b/docs/pages/x/api/date-pickers/mobile-date-picker.json
@@ -100,7 +100,7 @@
     },
     "renderLoading": {
       "type": { "name": "func" },
-      "default": "() => <span data-mui-test=\"loading-progress\">...</span>",
+      "default": "() => <span>...</span>",
       "signature": {
         "type": "function() => React.ReactNode",
         "describedArgs": [],
diff --git a/docs/pages/x/api/date-pickers/mobile-date-time-picker.json b/docs/pages/x/api/date-pickers/mobile-date-time-picker.json
index 36d5520828a82..d90b474d9a777 100644
--- a/docs/pages/x/api/date-pickers/mobile-date-time-picker.json
+++ b/docs/pages/x/api/date-pickers/mobile-date-time-picker.json
@@ -108,7 +108,7 @@
     },
     "renderLoading": {
       "type": { "name": "func" },
-      "default": "() => <span data-mui-test=\"loading-progress\">...</span>",
+      "default": "() => <span>...</span>",
       "signature": {
         "type": "function() => React.ReactNode",
         "describedArgs": [],
diff --git a/docs/pages/x/api/date-pickers/static-date-picker.json b/docs/pages/x/api/date-pickers/static-date-picker.json
index d3feb349e7d54..8def7ccac462e 100644
--- a/docs/pages/x/api/date-pickers/static-date-picker.json
+++ b/docs/pages/x/api/date-pickers/static-date-picker.json
@@ -86,7 +86,7 @@
     },
     "renderLoading": {
       "type": { "name": "func" },
-      "default": "() => <span data-mui-test=\"loading-progress\">...</span>",
+      "default": "() => <span>...</span>",
       "signature": {
         "type": "function() => React.ReactNode",
         "describedArgs": [],
diff --git a/docs/pages/x/api/date-pickers/static-date-time-picker.json b/docs/pages/x/api/date-pickers/static-date-time-picker.json
index 395d96190deb3..ed807f2ccfab1 100644
--- a/docs/pages/x/api/date-pickers/static-date-time-picker.json
+++ b/docs/pages/x/api/date-pickers/static-date-time-picker.json
@@ -94,7 +94,7 @@
     },
     "renderLoading": {
       "type": { "name": "func" },
-      "default": "() => <span data-mui-test=\"loading-progress\">...</span>",
+      "default": "() => <span>...</span>",
       "signature": {
         "type": "function() => React.ReactNode",
         "describedArgs": [],
diff --git a/package.json b/package.json
index f3858a52b8536..1f637d64683e0 100644
--- a/package.json
+++ b/package.json
@@ -41,14 +41,14 @@
     "test:karma:parallel": "cross-env NODE_ENV=test TZ=UTC PARALLEL=true karma start test/karma.conf.js",
     "test:unit": "cross-env NODE_ENV=test TZ=UTC mocha -n expose_gc 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
     "test:e2e": "cross-env NODE_ENV=production pnpm test:e2e:build && concurrently --success first --kill-others \"pnpm test:e2e:run\" \"pnpm test:e2e:server\"",
-    "test:e2e:build": "webpack --config test/e2e/webpack.config.js",
+    "test:e2e:build": "cross-env E2E_BUILD=true webpack --config test/e2e/webpack.config.js",
     "test:e2e:dev": "concurrently \"pnpm test:e2e:build --watch\" \"pnpm test:e2e:server\"",
     "test:e2e:run": "mocha --config test/e2e/.mocharc.js 'test/e2e/**/*.test.{js,ts,tsx}'",
     "test:e2e:server": "serve test/e2e -p 5001",
     "test:e2e-website": "npx playwright test test/e2e-website --config test/e2e-website/playwright.config.ts",
     "test:e2e-website:dev": "PLAYWRIGHT_TEST_BASE_URL=http://localhost:3001 npx playwright test test/e2e-website --config test/e2e-website/playwright.config.ts",
     "test:regressions": "cross-env NODE_ENV=production pnpm test:regressions:build && concurrently --success first --kill-others \"pnpm test:regressions:run\" \"pnpm test:regressions:server\"",
-    "test:regressions:build": "webpack --config test/regressions/webpack.config.js",
+    "test:regressions:build": "cross-env E2E_BUILD=true webpack --config test/regressions/webpack.config.js",
     "test:regressions:dev": "concurrently \"pnpm test:regressions:build --watch\" \"pnpm test:regressions:server\"",
     "test:regressions:run": "mocha --config test/regressions/.mocharc.js --delay 'test/regressions/**/*.test.js'",
     "test:regressions:server": "serve test/regressions -p 5001",
diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.test.tsx b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.test.tsx
index 085f45fcde1b5..6cef402715228 100644
--- a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.test.tsx
+++ b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.test.tsx
@@ -85,7 +85,7 @@ describe('<DateRangeCalendar />', () => {
       fireEvent.click(getPickerDay('30', 'January 2019'));
       fireEvent.click(getPickerDay('19', 'January 2019'));
 
-      expect(screen.queryByMuiTest('DateRangeHighlight')).to.equal(null);
+      expect(screen.queryByTestId('DateRangeHighlight')).to.equal(null);
 
       fireEvent.click(getPickerDay('30', 'January 2019'));
 
@@ -102,7 +102,7 @@ describe('<DateRangeCalendar />', () => {
         />,
       );
 
-      expect(screen.getAllByMuiTest('DateRangeHighlight')).to.have.length(31);
+      expect(screen.getAllByTestId('DateRangeHighlight')).to.have.length(31);
     });
 
     it('prop: disableDragEditing - should not allow dragging range', () => {
@@ -535,7 +535,7 @@ describe('<DateRangeCalendar />', () => {
   it('prop: calendars - should render the provided amount of calendars', () => {
     render(<DateRangeCalendar calendars={3} />);
 
-    expect(screen.getAllByMuiTest('pickers-calendar')).to.have.length(3);
+    expect(screen.getAllByTestId('pickers-calendar')).to.have.length(3);
   });
 
   describe('Performance', () => {
diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx
index 2dbfe92240659..823a5adc4fa01 100644
--- a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx
+++ b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx
@@ -116,7 +116,7 @@ function useDateRangeCalendarDefaultizedProps<TDate extends PickerValidDate>(
   return {
     ...themeProps,
     renderLoading:
-      themeProps.renderLoading ?? (() => <span data-mui-test="loading-progress">...</span>),
+      themeProps.renderLoading ?? (() => <span data-testid="loading-progress">...</span>),
     reduceAnimations: themeProps.reduceAnimations ?? defaultReduceAnimations,
     loading: props.loading ?? false,
     disablePast: props.disablePast ?? false,
diff --git a/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx b/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx
index 965e7d3c75a7c..f5ee14896d79a 100644
--- a/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx
+++ b/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx
@@ -346,24 +346,24 @@ const DateRangePickerDayRaw = React.forwardRef(function DateRangePickerDay<
 
   return (
     <DateRangePickerDayRoot
-      data-mui-test={shouldRenderHighlight ? 'DateRangeHighlight' : undefined}
+      data-testid={shouldRenderHighlight ? 'DateRangeHighlight' : undefined}
       className={clsx(classes.root, className)}
       ownerState={ownerState}
       sx={sx}
     >
       <DateRangePickerDayRangeIntervalPreview
-        data-mui-test={shouldRenderPreview ? 'DateRangePreview' : undefined}
+        data-testid={shouldRenderPreview ? 'DateRangePreview' : undefined}
         className={classes.rangeIntervalPreview}
         ownerState={ownerState}
       >
         <DateRangePickerDayDay<TDate>
+          data-testid="DateRangePickerDay"
           {...other}
           ref={ref}
           disableMargin
           day={day}
           selected={isVisuallySelected}
           outsideCurrentMonth={outsideCurrentMonth}
-          data-mui-test="DateRangePickerDay"
           className={classes.day}
           ownerState={ownerState}
           draggable={draggable}
diff --git a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.test.tsx
index 6535a7aee2d82..8c9bd1b40913e 100644
--- a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.test.tsx
+++ b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.test.tsx
@@ -47,7 +47,7 @@ describe('<StaticDateRangePicker />', () => {
 
     expect(
       screen
-        .getAllByMuiTest('DateRangePickerDay')
+        .getAllByTestId('DateRangePickerDay')
         .filter((day) => day.getAttribute('disabled') !== undefined),
     ).to.have.length(31);
   });
diff --git a/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx b/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx
index e84c7ff71c6fc..77af1660e28fa 100644
--- a/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx
+++ b/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx
@@ -63,7 +63,7 @@ function useDateCalendarDefaultizedProps<TDate extends PickerValidDate>(
     views: themeProps.views ?? ['year', 'day'],
     reduceAnimations: themeProps.reduceAnimations ?? defaultReduceAnimations,
     renderLoading:
-      themeProps.renderLoading ?? (() => <span data-mui-test="loading-progress">...</span>),
+      themeProps.renderLoading ?? (() => <span data-testid="loading-progress">...</span>),
     minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
     maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate),
   };
@@ -546,7 +546,7 @@ DateCalendar.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: PropTypes.func,
   /**
diff --git a/packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts b/packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts
index 7189f354b50f6..cc378565575de 100644
--- a/packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts
+++ b/packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts
@@ -78,7 +78,7 @@ export interface ExportedDateCalendarProps<TDate extends PickerValidDate>
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading?: () => React.ReactNode;
   /**
diff --git a/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx b/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx
index 31d01710d5bfe..8998300b6407b 100644
--- a/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx
+++ b/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx
@@ -351,7 +351,7 @@ export function DayCalendar<TDate extends PickerValidDate>(inProps: DayCalendarP
     onMonthSwitchingAnimationEnd,
     readOnly,
     reduceAnimations,
-    renderLoading = () => <span data-mui-test="loading-progress">...</span>,
+    renderLoading = () => <span data-testid="loading-progress">...</span>,
     slideDirection,
     TransitionProps,
     disablePast,
@@ -596,7 +596,7 @@ export function DayCalendar<TDate extends PickerValidDate>(inProps: DayCalendarP
           nodeRef={slideNodeRef}
         >
           <PickersCalendarWeekContainer
-            data-mui-test="pickers-calendar"
+            data-testid="pickers-calendar"
             ref={slideNodeRef}
             role="rowgroup"
             className={classes.monthContainer}
diff --git a/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx b/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx
index 81833dfd0e525..caced1d4fc4ea 100644
--- a/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx
+++ b/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx
@@ -172,7 +172,7 @@ describe('<DateCalendar />', () => {
       render(<DateCalendar defaultValue={adapterToUse.date('2019-01-01')} />);
 
       expect(screen.getByText('January 2019')).toBeVisible();
-      expect(screen.getAllByMuiTest('day')).to.have.length(31);
+      expect(screen.getAllByTestId('day')).to.have.length(31);
       // It should follow https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/
       expect(
         document.querySelector(
@@ -368,7 +368,7 @@ describe('<DateCalendar />', () => {
       await user.click(april);
 
       expect(onChange.callCount).to.equal(0);
-      expect(screen.getByMuiTest('calendar-month-and-year-text')).to.have.text('April 2019');
+      expect(screen.getByTestId('calendar-month-and-year-text')).to.have.text('April 2019');
     });
 
     it('should use `referenceDate` when no value defined', async () => {
@@ -435,7 +435,7 @@ describe('<DateCalendar />', () => {
     it('renders year selection standalone', () => {
       render(<DateCalendar defaultValue={adapterToUse.date('2019-01-01')} openTo="year" />);
 
-      expect(screen.getAllByMuiTest('year')).to.have.length(200);
+      expect(screen.getAllByTestId('year')).to.have.length(200);
     });
 
     it('should select the closest enabled date in the month if the current date is disabled', async () => {
@@ -517,7 +517,7 @@ describe('<DateCalendar />', () => {
       await user.click(year2022);
 
       expect(onChange.callCount).to.equal(0);
-      expect(screen.getByMuiTest('calendar-month-and-year-text')).to.have.text('January 2022');
+      expect(screen.getByTestId('calendar-month-and-year-text')).to.have.text('January 2022');
     });
 
     it('should scroll to show the selected year', function test() {
diff --git a/packages/x-date-pickers/src/DateCalendar/tests/validation.DateCalendar.test.tsx b/packages/x-date-pickers/src/DateCalendar/tests/validation.DateCalendar.test.tsx
index 618e04909e3eb..f8a75f48ff17d 100644
--- a/packages/x-date-pickers/src/DateCalendar/tests/validation.DateCalendar.test.tsx
+++ b/packages/x-date-pickers/src/DateCalendar/tests/validation.DateCalendar.test.tsx
@@ -35,7 +35,7 @@ describe('<DateCalendar /> - Validation', () => {
       );
 
       // No date should be disabled in the month before the disabled month
-      screen.getAllByMuiTest('day').forEach((day) => {
+      screen.getAllByTestId('day').forEach((day) => {
         expect(day).not.to.have.attribute('disabled');
       });
 
@@ -43,7 +43,7 @@ describe('<DateCalendar /> - Validation', () => {
       clock.runToLast();
 
       // All dates should be disabled in disabled month
-      screen.getAllByMuiTest('day').forEach((day) => {
+      screen.getAllByTestId('day').forEach((day) => {
         expect(day).to.have.attribute('disabled');
       });
 
@@ -51,7 +51,7 @@ describe('<DateCalendar /> - Validation', () => {
       clock.runToLast();
 
       // No date should be disabled in the month after the disabled month
-      screen.getAllByMuiTest('day').forEach((day) => {
+      screen.getAllByTestId('day').forEach((day) => {
         expect(day).not.to.have.attribute('disabled');
       });
     });
@@ -70,7 +70,7 @@ describe('<DateCalendar /> - Validation', () => {
       );
 
       // No date should be disabled in the month before the disabled year
-      screen.getAllByMuiTest('day').forEach((day) => {
+      screen.getAllByTestId('day').forEach((day) => {
         expect(day).not.to.have.attribute('disabled');
       });
 
@@ -78,7 +78,7 @@ describe('<DateCalendar /> - Validation', () => {
       clock.runToLast();
 
       // All dates should be disabled in disabled year
-      screen.getAllByMuiTest('day').forEach((day) => {
+      screen.getAllByTestId('day').forEach((day) => {
         expect(day).to.have.attribute('disabled');
       });
     });
diff --git a/packages/x-date-pickers/src/DatePicker/DatePicker.tsx b/packages/x-date-pickers/src/DatePicker/DatePicker.tsx
index 8c7b965df9167..e939a07dbe88a 100644
--- a/packages/x-date-pickers/src/DatePicker/DatePicker.tsx
+++ b/packages/x-date-pickers/src/DatePicker/DatePicker.tsx
@@ -260,7 +260,7 @@ DatePicker.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: PropTypes.func,
   /**
diff --git a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx
index b3f2a082907e9..833964b602786 100644
--- a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx
+++ b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx
@@ -114,7 +114,7 @@ export const DatePickerToolbar = React.forwardRef(function DatePickerToolbar<
     >
       <DatePickerToolbarTitle
         variant="h4"
-        data-mui-test="datepicker-toolbar-date"
+        data-testid="datepicker-toolbar-date"
         align={isLandscape ? 'left' : 'center'}
         ownerState={ownerState}
         className={classes.title}
diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx
index 4a15379e9e78e..5203009b63649 100644
--- a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx
+++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx
@@ -298,7 +298,7 @@ DateTimePicker.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: PropTypes.func,
   /**
diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
index 6dc4a2e2d75b9..e283dc6265a28 100644
--- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
+++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
@@ -294,7 +294,7 @@ function DateTimePickerToolbar<TDate extends PickerValidDate>(
           <PickersToolbarButton
             tabIndex={-1}
             variant="subtitle1"
-            data-mui-test="datetimepicker-toolbar-year"
+            data-testid="datetimepicker-toolbar-year"
             onClick={() => onViewChange('year')}
             selected={view === 'year'}
             value={value ? utils.format(value, 'year') : '–'}
@@ -305,7 +305,7 @@ function DateTimePickerToolbar<TDate extends PickerValidDate>(
           <PickersToolbarButton
             tabIndex={-1}
             variant={isDesktop ? 'h5' : 'h4'}
-            data-mui-test="datetimepicker-toolbar-day"
+            data-testid="datetimepicker-toolbar-day"
             onClick={() => onViewChange('day')}
             selected={view === 'day'}
             value={dateText}
@@ -322,7 +322,7 @@ function DateTimePickerToolbar<TDate extends PickerValidDate>(
               <PickersToolbarButton
                 variant={isDesktop ? 'h5' : 'h3'}
                 width={isDesktop && !isLandscape ? MULTI_SECTION_CLOCK_SECTION_WIDTH : undefined}
-                data-mui-test="hours"
+                data-testid="hours"
                 onClick={() => onViewChange('hours')}
                 selected={view === 'hours'}
                 value={value ? formatHours(value) : '--'}
@@ -336,7 +336,7 @@ function DateTimePickerToolbar<TDate extends PickerValidDate>(
               <PickersToolbarButton
                 variant={isDesktop ? 'h5' : 'h3'}
                 width={isDesktop && !isLandscape ? MULTI_SECTION_CLOCK_SECTION_WIDTH : undefined}
-                data-mui-test="minutes"
+                data-testid="minutes"
                 onClick={() => onViewChange('minutes')}
                 selected={view === 'minutes' || (!views.includes('minutes') && view === 'hours')}
                 value={value ? utils.format(value, 'minutes') : '--'}
@@ -356,7 +356,7 @@ function DateTimePickerToolbar<TDate extends PickerValidDate>(
               <PickersToolbarButton
                 variant={isDesktop ? 'h5' : 'h3'}
                 width={isDesktop && !isLandscape ? MULTI_SECTION_CLOCK_SECTION_WIDTH : undefined}
-                data-mui-test="seconds"
+                data-testid="seconds"
                 onClick={() => onViewChange('seconds')}
                 selected={view === 'seconds'}
                 value={value ? utils.format(value, 'seconds') : '--'}
@@ -391,7 +391,7 @@ function DateTimePickerToolbar<TDate extends PickerValidDate>(
         {ampm && isDesktop && (
           <PickersToolbarButton
             variant="h5"
-            data-mui-test="am-pm-view-button"
+            data-testid="am-pm-view-button"
             onClick={() => onViewChange('meridiem')}
             selected={view === 'meridiem'}
             value={value && meridiemMode ? formatMeridiem(utils, meridiemMode) : '--'}
diff --git a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx
index 6fede2f69466c..3cb78020a8c09 100644
--- a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx
+++ b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx
@@ -309,7 +309,7 @@ DesktopDatePicker.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: PropTypes.func,
   /**
diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx
index 421f595a40b84..839da97030e50 100644
--- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx
+++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx
@@ -483,7 +483,7 @@ DesktopDateTimePicker.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: PropTypes.func,
   /**
diff --git a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx
index 31d270574cb21..32a33babcebcf 100644
--- a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx
+++ b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx
@@ -306,7 +306,7 @@ MobileDatePicker.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: PropTypes.func,
   /**
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 8491613b26228..3f30960a217ee 100644
--- a/packages/x-date-pickers/src/MobileDatePicker/tests/MobileDatePicker.test.tsx
+++ b/packages/x-date-pickers/src/MobileDatePicker/tests/MobileDatePicker.test.tsx
@@ -36,7 +36,7 @@ describe('<MobileDatePicker />', () => {
     fireEvent.click(screen.getByLabelText(/switch to year view/i));
     fireEvent.click(screen.getByText('2010', { selector: 'button' }));
 
-    expect(screen.getAllByMuiTest('calendar-month-and-year-text')[0]).to.have.text('January 2010');
+    expect(screen.getAllByTestId('calendar-month-and-year-text')[0]).to.have.text('January 2010');
     expect(onChangeMock.callCount).to.equal(1);
   });
 
@@ -53,7 +53,7 @@ describe('<MobileDatePicker />', () => {
     );
 
     fireEvent.click(screen.getByText('2010', { selector: 'button' }));
-    expect(screen.getByMuiTest('datepicker-toolbar-date')).to.have.text('Fri, Jan 1');
+    expect(screen.getByTestId('datepicker-toolbar-date')).to.have.text('Fri, Jan 1');
   });
 
   it('prop `onMonthChange` – dispatches callback when months switching', () => {
@@ -69,8 +69,8 @@ describe('<MobileDatePicker />', () => {
   it('prop `loading` – displays default loading indicator', () => {
     render(<MobileDatePicker enableAccessibleFieldDOMStructure open loading />);
 
-    expect(screen.queryAllByMuiTest('day')).to.have.length(0);
-    expect(screen.getByMuiTest('loading-progress')).toBeVisible();
+    expect(screen.queryAllByTestId('day')).to.have.length(0);
+    expect(screen.getByTestId('loading-progress')).toBeVisible();
   });
 
   it('prop `renderLoading` – displays custom loading indicator', () => {
@@ -116,7 +116,7 @@ describe('<MobileDatePicker />', () => {
         />,
       );
 
-      expect(screen.getByMuiTest('datepicker-toolbar-date').textContent).to.equal('January');
+      expect(screen.getByTestId('datepicker-toolbar-date').textContent).to.equal('January');
     });
 
     it('should render the toolbar when `hidden` is `false`', () => {
@@ -128,7 +128,7 @@ describe('<MobileDatePicker />', () => {
         />,
       );
 
-      expect(screen.getByMuiTest('picker-toolbar')).toBeVisible();
+      expect(screen.getByTestId('picker-toolbar')).toBeVisible();
     });
   });
 
diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx
index ec10a62962022..24cddc84b97a1 100644
--- a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx
+++ b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx
@@ -359,7 +359,7 @@ MobileDateTimePicker.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: PropTypes.func,
   /**
diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/tests/MobileDateTimePicker.test.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/tests/MobileDateTimePicker.test.tsx
index 1e21c3dbc9355..d12da995e405c 100644
--- a/packages/x-date-pickers/src/MobileDateTimePicker/tests/MobileDateTimePicker.test.tsx
+++ b/packages/x-date-pickers/src/MobileDateTimePicker/tests/MobileDateTimePicker.test.tsx
@@ -24,11 +24,11 @@ describe('<MobileDateTimePicker />', () => {
       />,
     );
 
-    expect(screen.queryByMuiTest('seconds')).to.equal(null);
-    expect(screen.getByMuiTest('hours')).to.have.text('10');
-    expect(screen.getByMuiTest('minutes')).to.have.text('01');
-    expect(screen.getByMuiTest('datetimepicker-toolbar-year')).to.have.text('2021');
-    expect(screen.getByMuiTest('datetimepicker-toolbar-day')).to.have.text('Nov 20');
+    expect(screen.queryByTestId('seconds')).to.equal(null);
+    expect(screen.getByTestId('hours')).to.have.text('10');
+    expect(screen.getByTestId('minutes')).to.have.text('01');
+    expect(screen.getByTestId('datetimepicker-toolbar-year')).to.have.text('2021');
+    expect(screen.getByTestId('datetimepicker-toolbar-day')).to.have.text('Nov 20');
   });
 
   it('should render toolbar and tabs by default', () => {
@@ -40,7 +40,7 @@ describe('<MobileDateTimePicker />', () => {
       />,
     );
 
-    expect(screen.queryByMuiTest('picker-toolbar-title')).not.to.equal(null);
+    expect(screen.queryByTestId('picker-toolbar-title')).not.to.equal(null);
     expect(screen.getByRole('tab', { name: 'pick date' })).not.to.equal(null);
   });
 
@@ -55,7 +55,7 @@ describe('<MobileDateTimePicker />', () => {
         defaultValue={adapterToUse.date('2021-11-20T10:01:22')}
       />,
     );
-    expect(screen.getByMuiTest('seconds')).to.have.text('22');
+    expect(screen.getByTestId('seconds')).to.have.text('22');
   });
 
   describe('Component slot: Tabs', () => {
@@ -71,7 +71,7 @@ describe('<MobileDateTimePicker />', () => {
         />,
       );
 
-      expect(screen.queryByMuiTest('picker-toolbar-title')).not.to.equal(null);
+      expect(screen.queryByTestId('picker-toolbar-title')).not.to.equal(null);
       expect(screen.queryByRole('tab', { name: 'pick date' })).to.equal(null);
     });
   });
@@ -87,7 +87,7 @@ describe('<MobileDateTimePicker />', () => {
         />,
       );
 
-      expect(screen.queryByMuiTest('picker-toolbar-title')).to.equal(null);
+      expect(screen.queryByTestId('picker-toolbar-title')).to.equal(null);
       expect(screen.getByRole('tab', { name: 'pick date' })).not.to.equal(null);
     });
   });
@@ -146,15 +146,15 @@ describe('<MobileDateTimePicker />', () => {
 
       // Change the hours
       const hourClockEvent = getClockTouchEvent(11, '12hours');
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchmove', hourClockEvent);
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchend', hourClockEvent);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchmove', hourClockEvent);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchend', hourClockEvent);
       expect(onChange.callCount).to.equal(3);
       expect(onChange.lastCall.args[0]).toEqualDateTime(adapterToUse.date('2010-01-15T11:00:00'));
 
       // Change the minutes
       const minuteClockEvent = getClockTouchEvent(53, 'minutes');
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchmove', minuteClockEvent);
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchend', minuteClockEvent);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchmove', minuteClockEvent);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchend', minuteClockEvent);
       expect(onChange.callCount).to.equal(4);
       expect(onChange.lastCall.args[0]).toEqualDateTime(adapterToUse.date('2010-01-15T11:53:00'));
       expect(onAccept.callCount).to.equal(0);
diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/tests/describes.MobileDateTimePicker.test.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/tests/describes.MobileDateTimePicker.test.tsx
index 49ebb8d558371..b853a30d627e0 100644
--- a/packages/x-date-pickers/src/MobileDateTimePicker/tests/describes.MobileDateTimePicker.test.tsx
+++ b/packages/x-date-pickers/src/MobileDateTimePicker/tests/describes.MobileDateTimePicker.test.tsx
@@ -87,12 +87,12 @@ describe('<MobileDateTimePicker /> - Describes', () => {
         adapterToUse.getHours(newValue),
         hasMeridiem ? '12hours' : '24hours',
       );
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchmove', hourClockEvent);
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchend', hourClockEvent);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchmove', hourClockEvent);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchend', hourClockEvent);
       // change minutes
       const minutesClockEvent = getClockTouchEvent(adapterToUse.getMinutes(newValue), 'minutes');
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchmove', minutesClockEvent);
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchend', minutesClockEvent);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchmove', minutesClockEvent);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchend', minutesClockEvent);
 
       if (hasMeridiem) {
         const newHours = adapterToUse.getHours(newValue);
diff --git a/packages/x-date-pickers/src/MobileTimePicker/tests/MobileTimePicker.test.tsx b/packages/x-date-pickers/src/MobileTimePicker/tests/MobileTimePicker.test.tsx
index 62d073d3c10ca..d837030ef3298 100644
--- a/packages/x-date-pickers/src/MobileTimePicker/tests/MobileTimePicker.test.tsx
+++ b/packages/x-date-pickers/src/MobileTimePicker/tests/MobileTimePicker.test.tsx
@@ -72,15 +72,15 @@ describe('<MobileTimePicker />', () => {
 
       // Change the hours
       const hourClockEvent = getClockTouchEvent(11, '12hours');
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchmove', hourClockEvent);
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchend', hourClockEvent);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchmove', hourClockEvent);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchend', hourClockEvent);
       expect(onChange.callCount).to.equal(1);
       expect(onChange.lastCall.args[0]).toEqualDateTime(adapterToUse.date('2018-01-01T11:00:00'));
 
       // Change the minutes
       const minuteClockEvent = getClockTouchEvent(53, 'minutes');
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchmove', minuteClockEvent);
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchend', minuteClockEvent);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchmove', minuteClockEvent);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchend', minuteClockEvent);
       expect(onChange.callCount).to.equal(2);
       expect(onChange.lastCall.args[0]).toEqualDateTime(adapterToUse.date('2018-01-01T11:53:00'));
       expect(onAccept.callCount).to.equal(0);
diff --git a/packages/x-date-pickers/src/MobileTimePicker/tests/describes.MobileTimePicker.test.tsx b/packages/x-date-pickers/src/MobileTimePicker/tests/describes.MobileTimePicker.test.tsx
index b3fa12461d7b5..01807fb2c605d 100644
--- a/packages/x-date-pickers/src/MobileTimePicker/tests/describes.MobileTimePicker.test.tsx
+++ b/packages/x-date-pickers/src/MobileTimePicker/tests/describes.MobileTimePicker.test.tsx
@@ -82,12 +82,12 @@ describe('<MobileTimePicker /> - Describes', () => {
         adapterToUse.getHours(newValue),
         hasMeridiem ? '12hours' : '24hours',
       );
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchmove', hourClockEvent);
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchend', hourClockEvent);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchmove', hourClockEvent);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchend', hourClockEvent);
       // change minutes
       const minutesClockEvent = getClockTouchEvent(adapterToUse.getMinutes(newValue), 'minutes');
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchmove', minutesClockEvent);
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchend', minutesClockEvent);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchmove', minutesClockEvent);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchend', minutesClockEvent);
 
       if (hasMeridiem) {
         const newHours = adapterToUse.getHours(newValue);
diff --git a/packages/x-date-pickers/src/MobileTimePicker/tests/timezone.MobileTimePicker.test.tsx b/packages/x-date-pickers/src/MobileTimePicker/tests/timezone.MobileTimePicker.test.tsx
index 1427ae3617efe..bba289a72d10f 100644
--- a/packages/x-date-pickers/src/MobileTimePicker/tests/timezone.MobileTimePicker.test.tsx
+++ b/packages/x-date-pickers/src/MobileTimePicker/tests/timezone.MobileTimePicker.test.tsx
@@ -19,7 +19,7 @@ describe('<MobileTimePicker /> - Timezone', () => {
         />,
       );
 
-      expect(screen.getByMuiTest('hours')).to.have.text('11');
+      expect(screen.getByTestId('hours')).to.have.text('11');
     });
   });
 });
diff --git a/packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx b/packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx
index 9c1bcf3bcf3d6..996df34b165b8 100644
--- a/packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx
+++ b/packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx
@@ -171,7 +171,7 @@ export const PickersMonth = React.memo(function PickersMonth(inProps: PickersMon
 
   return (
     <PickersMonthRoot
-      data-mui-test="month"
+      data-testid="month"
       className={clsx(classes.root, className)}
       ownerState={props}
       {...other}
diff --git a/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.tsx b/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.tsx
index 0392de6be15b9..59725fcb880a0 100644
--- a/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.tsx
+++ b/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.tsx
@@ -43,7 +43,7 @@ function PickersActionBar(props: PickersActionBarProps) {
     switch (actionType) {
       case 'clear':
         return (
-          <Button data-mui-test="clear-action-button" onClick={onClear} key={actionType}>
+          <Button data-testid="clear-action-button" onClick={onClear} key={actionType}>
             {translations.clearButtonLabel}
           </Button>
         );
@@ -64,7 +64,7 @@ function PickersActionBar(props: PickersActionBarProps) {
 
       case 'today':
         return (
-          <Button data-mui-test="today-action-button" onClick={onSetToday} key={actionType}>
+          <Button data-testid="today-action-button" onClick={onSetToday} key={actionType}>
             {translations.todayButtonLabel}
           </Button>
         );
diff --git a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx
index 42c81b9a516ba..770d131235cf1 100644
--- a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx
+++ b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx
@@ -237,7 +237,7 @@ const PickersCalendarHeader = React.forwardRef(function PickersCalendarHeader<
         <PickersFadeTransitionGroup reduceAnimations={reduceAnimations} transKey={label}>
           <PickersCalendarHeaderLabel
             id={labelId}
-            data-mui-test="calendar-month-and-year-text"
+            data-testid="calendar-month-and-year-text"
             ownerState={ownerState}
             className={classes.label}
           >
diff --git a/packages/x-date-pickers/src/PickersDay/PickersDay.tsx b/packages/x-date-pickers/src/PickersDay/PickersDay.tsx
index 43b8fe282cc0d..cdb1f16acead9 100644
--- a/packages/x-date-pickers/src/PickersDay/PickersDay.tsx
+++ b/packages/x-date-pickers/src/PickersDay/PickersDay.tsx
@@ -334,7 +334,7 @@ const PickersDayRaw = React.forwardRef(function PickersDay<TDate extends PickerV
       className={clsx(classes.root, className)}
       ref={handleRef}
       centerRipple
-      data-mui-test="day"
+      data-testid="day"
       disabled={disabled}
       tabIndex={selected ? 0 : -1}
       onKeyDown={(event) => onKeyDown(event, day)}
diff --git a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx
index b86bc2fa3f913..64c8f52cf503a 100644
--- a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx
+++ b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx
@@ -226,7 +226,7 @@ StaticDatePicker.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: PropTypes.func,
   /**
diff --git a/packages/x-date-pickers/src/StaticDatePicker/tests/StaticDatePicker.test.tsx b/packages/x-date-pickers/src/StaticDatePicker/tests/StaticDatePicker.test.tsx
index 4041769edcd67..a1c02cfab51c2 100644
--- a/packages/x-date-pickers/src/StaticDatePicker/tests/StaticDatePicker.test.tsx
+++ b/packages/x-date-pickers/src/StaticDatePicker/tests/StaticDatePicker.test.tsx
@@ -13,13 +13,13 @@ describe('<StaticDatePicker />', () => {
     render(<StaticDatePicker defaultValue={adapterToUse.date('2019-01-01')} />);
 
     expect(screen.getByText('January 2019')).toBeVisible();
-    expect(screen.getAllByMuiTest('day')).to.have.length(31);
+    expect(screen.getAllByTestId('day')).to.have.length(31);
   });
 
   it('switches between months', () => {
     render(<StaticDatePicker reduceAnimations defaultValue={adapterToUse.date('2019-01-01')} />);
 
-    expect(screen.getByMuiTest('calendar-month-and-year-text')).to.have.text('January 2019');
+    expect(screen.getByTestId('calendar-month-and-year-text')).to.have.text('January 2019');
 
     const nextMonth = screen.getByLabelText('Next month');
     const previousMonth = screen.getByLabelText('Previous month');
@@ -30,7 +30,7 @@ describe('<StaticDatePicker />', () => {
     fireEvent.click(previousMonth);
     fireEvent.click(previousMonth);
 
-    expect(screen.getByMuiTest('calendar-month-and-year-text')).to.have.text('December 2018');
+    expect(screen.getByTestId('calendar-month-and-year-text')).to.have.text('December 2018');
   });
 
   describe('props - autoFocus', () => {
diff --git a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx
index f132c14609a73..144c3a8cdfecd 100644
--- a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx
+++ b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx
@@ -278,7 +278,7 @@ StaticDateTimePicker.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: PropTypes.func,
   /**
diff --git a/packages/x-date-pickers/src/StaticDateTimePicker/tests/StaticDateTimePicker.test.tsx b/packages/x-date-pickers/src/StaticDateTimePicker/tests/StaticDateTimePicker.test.tsx
index 272eec5472237..c945b88776462 100644
--- a/packages/x-date-pickers/src/StaticDateTimePicker/tests/StaticDateTimePicker.test.tsx
+++ b/packages/x-date-pickers/src/StaticDateTimePicker/tests/StaticDateTimePicker.test.tsx
@@ -31,7 +31,7 @@ describe('<StaticDateTimePicker />', () => {
         />,
       );
 
-      expect(screen.queryByMuiTest('picker-toolbar-title')).not.to.equal(null);
+      expect(screen.queryByTestId('picker-toolbar-title')).not.to.equal(null);
       expect(screen.queryByRole('tab', { name: 'pick date' })).to.equal(null);
     });
 
@@ -45,7 +45,7 @@ describe('<StaticDateTimePicker />', () => {
         />,
       );
 
-      expect(screen.queryByMuiTest('picker-toolbar-title')).to.equal(null);
+      expect(screen.queryByTestId('picker-toolbar-title')).to.equal(null);
       expect(screen.getByRole('tab', { name: 'pick date' })).not.to.equal(null);
     });
 
diff --git a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.test.tsx b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.test.tsx
index f5a04623b4af4..f3eb9f6c1597c 100644
--- a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.test.tsx
+++ b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.test.tsx
@@ -60,10 +60,10 @@ describe('<StaticTimePicker />', () => {
     );
 
     // Can switch between views
-    fireEvent.click(screen.getByMuiTest('minutes'));
+    fireEvent.click(screen.getByTestId('minutes'));
     expect(onViewChange.callCount).to.equal(1);
 
-    fireEvent.click(screen.getByMuiTest('hours'));
+    fireEvent.click(screen.getByTestId('hours'));
     expect(onViewChange.callCount).to.equal(2);
 
     // Can not switch between meridiem
@@ -73,7 +73,7 @@ describe('<StaticTimePicker />', () => {
     expect(onChange.callCount).to.equal(0);
 
     // Can not set value
-    fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchmove', selectEvent);
+    fireTouchChangedEvent(screen.getByTestId('clock'), 'touchmove', selectEvent);
     expect(onChange.callCount).to.equal(0);
 
     // hours are not disabled
@@ -110,10 +110,10 @@ describe('<StaticTimePicker />', () => {
     );
 
     // Can switch between views
-    fireEvent.click(screen.getByMuiTest('minutes'));
+    fireEvent.click(screen.getByTestId('minutes'));
     expect(onViewChange.callCount).to.equal(1);
 
-    fireEvent.click(screen.getByMuiTest('hours'));
+    fireEvent.click(screen.getByTestId('hours'));
     expect(onViewChange.callCount).to.equal(2);
 
     // Can not switch between meridiem
@@ -123,7 +123,7 @@ describe('<StaticTimePicker />', () => {
     expect(onChange.callCount).to.equal(0);
 
     // Can not set value
-    fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchmove', selectEvent);
+    fireTouchChangedEvent(screen.getByTestId('clock'), 'touchmove', selectEvent);
     expect(onChange.callCount).to.equal(0);
 
     // hours are disabled
diff --git a/packages/x-date-pickers/src/TimeClock/Clock.tsx b/packages/x-date-pickers/src/TimeClock/Clock.tsx
index 8b3d64f2f579e..3d12f498d668e 100644
--- a/packages/x-date-pickers/src/TimeClock/Clock.tsx
+++ b/packages/x-date-pickers/src/TimeClock/Clock.tsx
@@ -346,7 +346,7 @@ export function Clock<TDate extends PickerValidDate>(inProps: ClockProps<TDate>)
     <ClockRoot className={clsx(classes.root, className)}>
       <ClockClock className={classes.clock}>
         <ClockSquareMask
-          data-mui-test="clock"
+          data-testid="clock"
           onTouchMove={handleTouchSelection}
           onTouchStart={handleTouchSelection}
           onTouchEnd={handleTouchEnd}
@@ -388,7 +388,7 @@ export function Clock<TDate extends PickerValidDate>(inProps: ClockProps<TDate>)
       {ampm && ampmInClock && (
         <React.Fragment>
           <ClockAmButton
-            data-mui-test="in-clock-am-btn"
+            data-testid="in-clock-am-btn"
             onClick={readOnly ? undefined : () => handleMeridiemChange('am')}
             disabled={disabled || meridiemMode === null}
             ownerState={ownerState}
@@ -401,7 +401,7 @@ export function Clock<TDate extends PickerValidDate>(inProps: ClockProps<TDate>)
           </ClockAmButton>
           <ClockPmButton
             disabled={disabled || meridiemMode === null}
-            data-mui-test="in-clock-pm-btn"
+            data-testid="in-clock-pm-btn"
             onClick={readOnly ? undefined : () => handleMeridiemChange('pm')}
             ownerState={ownerState}
             className={classes.pmButton}
diff --git a/packages/x-date-pickers/src/TimeClock/tests/TimeClock.test.tsx b/packages/x-date-pickers/src/TimeClock/tests/TimeClock.test.tsx
index 9fbf3dfcfe98d..8341e1b818d17 100644
--- a/packages/x-date-pickers/src/TimeClock/tests/TimeClock.test.tsx
+++ b/packages/x-date-pickers/src/TimeClock/tests/TimeClock.test.tsx
@@ -196,7 +196,7 @@ describe('<TimeClock />', () => {
     const onChangeMock = spy();
     render(<TimeClock value={adapterToUse.date('2019-01-01')} onChange={onChangeMock} readOnly />);
 
-    fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchstart', selectEvent);
+    fireTouchChangedEvent(screen.getByTestId('clock'), 'touchstart', selectEvent);
     expect(onChangeMock.callCount).to.equal(0);
 
     // hours are not disabled
@@ -224,7 +224,7 @@ describe('<TimeClock />', () => {
     const onChangeMock = spy();
     render(<TimeClock value={adapterToUse.date('2019-01-01')} onChange={onChangeMock} disabled />);
 
-    fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchstart', selectEvent);
+    fireTouchChangedEvent(screen.getByTestId('clock'), 'touchstart', selectEvent);
     expect(onChangeMock.callCount).to.equal(0);
 
     // hours are disabled
@@ -292,7 +292,7 @@ describe('<TimeClock />', () => {
         />,
       );
 
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchstart', clockTouchEvent['13:--']);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchstart', clockTouchEvent['13:--']);
 
       expect(handleChange.callCount).to.equal(1);
       const [date, selectionState] = handleChange.firstCall.args;
@@ -316,7 +316,7 @@ describe('<TimeClock />', () => {
         />,
       );
 
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchstart', clockTouchEvent['--:20']);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchstart', clockTouchEvent['--:20']);
 
       expect(handleChange.callCount).to.equal(1);
       const [date, selectionState] = handleChange.firstCall.args;
@@ -338,7 +338,7 @@ describe('<TimeClock />', () => {
         />,
       );
 
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchstart', clockTouchEvent['--:20']);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchstart', clockTouchEvent['--:20']);
 
       expect(handleChange.callCount).to.equal(0);
     });
@@ -356,7 +356,7 @@ describe('<TimeClock />', () => {
         />,
       );
 
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchstart', clockTouchEvent['--:20']);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchstart', clockTouchEvent['--:20']);
 
       expect(handleChange.callCount).to.equal(0);
     });
@@ -374,7 +374,7 @@ describe('<TimeClock />', () => {
         />,
       );
 
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchstart', clockTouchEvent['19:--']);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchstart', clockTouchEvent['19:--']);
 
       expect(handleChange.callCount).to.equal(0);
     });
@@ -392,7 +392,7 @@ describe('<TimeClock />', () => {
         />,
       );
 
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchstart', clockTouchEvent['19:--']);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchstart', clockTouchEvent['19:--']);
 
       expect(handleChange.callCount).to.equal(0);
     });
@@ -427,7 +427,7 @@ describe('<TimeClock />', () => {
         />,
       );
 
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchstart', clockTouchEvent['--:10']);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchstart', clockTouchEvent['--:10']);
 
       expect(handleChange.callCount).to.equal(1);
       const [date, selectionState] = handleChange.firstCall.args;
@@ -449,7 +449,7 @@ describe('<TimeClock />', () => {
         />,
       );
 
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchstart', clockTouchEvent['--:20']);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchstart', clockTouchEvent['--:20']);
 
       expect(handleChange.callCount).to.equal(0);
     });
@@ -467,7 +467,7 @@ describe('<TimeClock />', () => {
         />,
       );
 
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchstart', clockTouchEvent['--:20']);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchstart', clockTouchEvent['--:20']);
 
       expect(handleChange.callCount).to.equal(0);
     });
@@ -484,8 +484,8 @@ describe('<TimeClock />', () => {
         />,
       );
 
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchstart', clockTouchEvent['13:--']);
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchmove', clockTouchEvent['19:--']);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchstart', clockTouchEvent['13:--']);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchmove', clockTouchEvent['19:--']);
 
       expect(handleChange.callCount).to.equal(2);
       const [date, selectionState] = handleChange.lastCall.args;
@@ -506,8 +506,8 @@ describe('<TimeClock />', () => {
         />,
       );
 
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchstart', clockTouchEvent['13:--']);
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchend', clockTouchEvent['13:--']);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchstart', clockTouchEvent['13:--']);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchend', clockTouchEvent['13:--']);
 
       expect(handleChange.callCount).to.equal(2);
       const [date, selectionState] = handleChange.lastCall.args;
diff --git a/packages/x-date-pickers/src/TimeClock/tests/timezone.TimeClock.test.tsx b/packages/x-date-pickers/src/TimeClock/tests/timezone.TimeClock.test.tsx
index c3886da5774c8..a798dce98e8cf 100644
--- a/packages/x-date-pickers/src/TimeClock/tests/timezone.TimeClock.test.tsx
+++ b/packages/x-date-pickers/src/TimeClock/tests/timezone.TimeClock.test.tsx
@@ -23,8 +23,8 @@ describe('<TimeClock /> - Timezone', () => {
       render(<TimeClock onChange={onChange} />);
 
       const hourClockEvent = getClockTouchEvent(8, '12hours');
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchmove', hourClockEvent);
-      fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchend', hourClockEvent);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchmove', hourClockEvent);
+      fireTouchChangedEvent(screen.getByTestId('clock'), 'touchend', hourClockEvent);
 
       const expectedDate = adapter.setHours(adapter.date(), 8);
 
@@ -44,8 +44,8 @@ describe('<TimeClock /> - Timezone', () => {
           render(<TimeClock onChange={onChange} timezone={timezone} />);
 
           const hourClockEvent = getClockTouchEvent(8, '12hours');
-          fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchmove', hourClockEvent);
-          fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchend', hourClockEvent);
+          fireTouchChangedEvent(screen.getByTestId('clock'), 'touchmove', hourClockEvent);
+          fireTouchChangedEvent(screen.getByTestId('clock'), 'touchend', hourClockEvent);
 
           const expectedDate = adapter.setHours(
             adapter.startOfDay(adapter.date(undefined, timezone)),
@@ -81,8 +81,8 @@ describe('<TimeClock /> - Timezone', () => {
           );
 
           const hourClockEvent = getClockTouchEvent(8, '12hours');
-          fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchmove', hourClockEvent);
-          fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchend', hourClockEvent);
+          fireTouchChangedEvent(screen.getByTestId('clock'), 'touchmove', hourClockEvent);
+          fireTouchChangedEvent(screen.getByTestId('clock'), 'touchend', hourClockEvent);
 
           const actualDate = onChange.lastCall.firstArg;
 
diff --git a/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx b/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx
index 2e6c844f72561..da6d7ae1d88a1 100644
--- a/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx
+++ b/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx
@@ -201,7 +201,7 @@ function TimePickerToolbar<TDate extends PickerValidDate>(inProps: TimePickerToo
       <TimePickerToolbarHourMinuteLabel className={classes.hourMinuteLabel} ownerState={ownerState}>
         {arrayIncludes(views, 'hours') && (
           <PickersToolbarButton
-            data-mui-test="hours"
+            data-testid="hours"
             tabIndex={-1}
             variant="h3"
             onClick={() => onViewChange('hours')}
@@ -213,7 +213,7 @@ function TimePickerToolbar<TDate extends PickerValidDate>(inProps: TimePickerToo
         {arrayIncludes(views, ['hours', 'minutes']) && separator}
         {arrayIncludes(views, 'minutes') && (
           <PickersToolbarButton
-            data-mui-test="minutes"
+            data-testid="minutes"
             tabIndex={-1}
             variant="h3"
             onClick={() => onViewChange('minutes')}
@@ -225,7 +225,7 @@ function TimePickerToolbar<TDate extends PickerValidDate>(inProps: TimePickerToo
         {arrayIncludes(views, ['minutes', 'seconds']) && separator}
         {arrayIncludes(views, 'seconds') && (
           <PickersToolbarButton
-            data-mui-test="seconds"
+            data-testid="seconds"
             variant="h3"
             onClick={() => onViewChange('seconds')}
             selected={view === 'seconds'}
@@ -238,7 +238,7 @@ function TimePickerToolbar<TDate extends PickerValidDate>(inProps: TimePickerToo
           <PickersToolbarButton
             disableRipple
             variant="subtitle2"
-            data-mui-test="toolbar-am-btn"
+            data-testid="toolbar-am-btn"
             selected={meridiemMode === 'am'}
             typographyClassName={classes.ampmLabel}
             value={formatMeridiem(utils, 'am')}
@@ -248,7 +248,7 @@ function TimePickerToolbar<TDate extends PickerValidDate>(inProps: TimePickerToo
           <PickersToolbarButton
             disableRipple
             variant="subtitle2"
-            data-mui-test="toolbar-pm-btn"
+            data-testid="toolbar-pm-btn"
             selected={meridiemMode === 'pm'}
             typographyClassName={classes.ampmLabel}
             value={formatMeridiem(utils, 'pm')}
diff --git a/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx b/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx
index 4cfd69ba8232a..6425f9936431a 100644
--- a/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx
+++ b/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx
@@ -164,7 +164,7 @@ export const PickersYear = React.memo(function PickersYear(inProps: PickersYearP
 
   return (
     <PickersYearRoot
-      data-mui-test="year"
+      data-testid="year"
       className={clsx(classes.root, className)}
       ownerState={props}
       {...other}
diff --git a/packages/x-date-pickers/src/YearCalendar/tests/YearCalendar.test.tsx b/packages/x-date-pickers/src/YearCalendar/tests/YearCalendar.test.tsx
index fc22b7a902db1..630b5ab09fdd5 100644
--- a/packages/x-date-pickers/src/YearCalendar/tests/YearCalendar.test.tsx
+++ b/packages/x-date-pickers/src/YearCalendar/tests/YearCalendar.test.tsx
@@ -57,7 +57,7 @@ describe('<YearCalendar />', () => {
       />,
     );
 
-    const yearButttons = screen.queryAllByMuiTest('year');
+    const yearButttons = screen.queryAllByTestId('year');
     expect(yearButttons[0].children.item(0)?.textContent).to.equal('2020');
   });
 
@@ -70,7 +70,7 @@ describe('<YearCalendar />', () => {
       />,
     );
 
-    const yearButtons = screen.queryAllByMuiTest('year');
+    const yearButtons = screen.queryAllByTestId('year');
     expect(yearButtons[0].children.item(0)?.textContent).to.equal('2024');
   });
 
diff --git a/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx b/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx
index 3f42795403360..47a6e0fa53da0 100644
--- a/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx
+++ b/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx
@@ -119,13 +119,13 @@ export const PickersToolbar = React.forwardRef(function PickersToolbar<
   return (
     <PickersToolbarRoot
       ref={ref}
-      data-mui-test="picker-toolbar"
+      data-testid="picker-toolbar"
       className={clsx(classes.root, className)}
       ownerState={ownerState}
       {...other}
     >
       <Typography
-        data-mui-test="picker-toolbar-title"
+        data-testid="picker-toolbar-title"
         color="text.secondary"
         variant="overline"
         id={titleId}
diff --git a/packages/x-date-pickers/src/internals/components/PickersToolbarButton.tsx b/packages/x-date-pickers/src/internals/components/PickersToolbarButton.tsx
index d5f20b9cc52a1..0d777e3726613 100644
--- a/packages/x-date-pickers/src/internals/components/PickersToolbarButton.tsx
+++ b/packages/x-date-pickers/src/internals/components/PickersToolbarButton.tsx
@@ -50,7 +50,7 @@ export const PickersToolbarButton = React.forwardRef(function PickersToolbarButt
 
   return (
     <PickersToolbarButtonRoot
-      data-mui-test="toolbar-button"
+      data-testid="toolbar-button"
       variant="text"
       ref={ref}
       className={clsx(classes.root, className)}
diff --git a/test/utils/pickers/viewHandlers.ts b/test/utils/pickers/viewHandlers.ts
index 845261f64156b..84086aa100296 100644
--- a/test/utils/pickers/viewHandlers.ts
+++ b/test/utils/pickers/viewHandlers.ts
@@ -28,8 +28,8 @@ export const timeClockHandler: ViewHandler<TimeView> = {
 
     const hourClockEvent = getClockTouchEvent(valueInt, clockView);
 
-    fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchmove', hourClockEvent);
-    fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchend', hourClockEvent);
+    fireTouchChangedEvent(screen.getByTestId('clock'), 'touchmove', hourClockEvent);
+    fireTouchChangedEvent(screen.getByTestId('clock'), 'touchend', hourClockEvent);
   },
 };