From 86f792705c38a605032cb6b5d145063dcb518763 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 26 Jul 2024 17:50:53 +0200
Subject: [PATCH 1/5] Fix batch of tests depending on specific React version

---
 .../test-utils/src/createRenderer.tsx         |  2 +-
 .../test-utils/src/fireDiscreteEvent.ts       |  2 +-
 packages-internal/test-utils/src/userEvent.ts |  6 +++--
 .../useAutocomplete/useAutocomplete.test.js   | 12 ++++++----
 .../src/Autocomplete/Autocomplete.test.tsx    | 20 +++++++++-------
 .../src/Autocomplete/Autocomplete.test.js     | 24 ++++++++++---------
 .../src/InputBase/InputBase.test.js           |  6 +++--
 .../src/ListItem/ListItem.test.js             |  4 +++-
 packages/mui-material/src/Menu/Menu.test.js   |  4 +++-
 .../mui-material/src/Popover/Popover.test.js  | 12 ++++++----
 .../mui-material/src/Select/Select.test.js    |  6 +++--
 packages/mui-material/src/Tabs/Tabs.test.js   |  6 +++--
 .../src/internal/SwitchBase.test.js           | 20 +++++++++++-----
 .../useAutocomplete/useAutocomplete.test.js   | 12 ++++++----
 14 files changed, 83 insertions(+), 53 deletions(-)

diff --git a/packages-internal/test-utils/src/createRenderer.tsx b/packages-internal/test-utils/src/createRenderer.tsx
index 170c179a7a862c..aeb3381663f187 100644
--- a/packages-internal/test-utils/src/createRenderer.tsx
+++ b/packages-internal/test-utils/src/createRenderer.tsx
@@ -568,7 +568,7 @@ export function createRenderer(globalOptions: CreateRendererOptions = {}): Rende
       wrapper: InnerWrapper = React.Fragment,
     } = options;
 
-    const usesLegacyRoot = !React.version.startsWith('18');
+    const usesLegacyRoot = Number(React.version.split('.')[0]) < 18;
     const Mode = strict && (strictEffects || usesLegacyRoot) ? React.StrictMode : React.Fragment;
     return function Wrapper({ children }: { children?: React.ReactNode }) {
       return (
diff --git a/packages-internal/test-utils/src/fireDiscreteEvent.ts b/packages-internal/test-utils/src/fireDiscreteEvent.ts
index 65157f9acf9689..a171f45c025dc0 100644
--- a/packages-internal/test-utils/src/fireDiscreteEvent.ts
+++ b/packages-internal/test-utils/src/fireDiscreteEvent.ts
@@ -8,7 +8,7 @@ const noWrapper = (callback: () => void) => callback();
  * @returns {void}
  */
 function withMissingActWarningsIgnored(callback: () => void) {
-  if (React.version.startsWith('18')) {
+  if (Number(React.version.split('.')[0]) >= 18) {
     callback();
     return;
   }
diff --git a/packages-internal/test-utils/src/userEvent.ts b/packages-internal/test-utils/src/userEvent.ts
index 7bf5cd34950572..4da5bf2db16c00 100644
--- a/packages-internal/test-utils/src/userEvent.ts
+++ b/packages-internal/test-utils/src/userEvent.ts
@@ -2,6 +2,8 @@ import * as React from 'react';
 import { click, mouseDown, mouseUp, keyDown, keyUp } from './fireDiscreteEvent';
 import { act, fireEvent } from './createRenderer';
 
+const reactVersion = Number(React.version.split('.')[0]);
+
 export function touch(target: Element): void {
   fireEvent.touchStart(target);
   fireEvent.touchEnd(target);
@@ -11,7 +13,7 @@ export const mousePress: (...args: Parameters<(typeof fireEvent)['mouseUp']>) =>
   target,
   options,
 ) => {
-  if (React.version.startsWith('18')) {
+  if (reactVersion >= 18) {
     fireEvent.mouseDown(target, options);
     fireEvent.mouseUp(target, options);
     fireEvent.click(target, options);
@@ -24,7 +26,7 @@ export const mousePress: (...args: Parameters<(typeof fireEvent)['mouseUp']>) =>
 };
 
 export function keyPress(target: Element, options: { key: string; [key: string]: any }): void {
-  if (React.version.startsWith('18')) {
+  if (reactVersion >= 18) {
     fireEvent.keyDown(target, options);
     fireEvent.keyUp(target, options);
   } else {
diff --git a/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js b/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js
index 72ac62297340d0..9c6657b3cfb911 100644
--- a/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js
+++ b/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js
@@ -4,6 +4,8 @@ import { createRenderer, screen, ErrorBoundary, act, fireEvent } from '@mui/inte
 import { spy } from 'sinon';
 import { useAutocomplete, createFilterOptions } from '@mui/base/useAutocomplete';
 
+const reactVersion = Number(React.version.split('.')[0]);
+
 describe('useAutocomplete', () => {
   const { render } = createRenderer();
 
@@ -289,14 +291,14 @@ describe('useAutocomplete', () => {
       'MUI: Unable to find the input element.',
       errorMessage,
       // strict effects runs effects twice
-      React.version.startsWith('18') && 'MUI: Unable to find the input element.',
-      React.version.startsWith('18') && errorMessage,
+      reactVersion >= 18 && 'MUI: Unable to find the input element.',
+      reactVersion >= 18 && errorMessage,
       'The above error occurred in the <ul> component',
-      React.version.startsWith('16') && 'The above error occurred in the <ul> component',
+      reactVersion === 16 && 'The above error occurred in the <ul> component',
       'The above error occurred in the <Test> component',
       // strict effects runs effects twice
-      React.version.startsWith('18') && 'The above error occurred in the <Test> component',
-      React.version.startsWith('16') && 'The above error occurred in the <Test> component',
+      reactVersion >= 18 && 'The above error occurred in the <Test> component',
+      reactVersion === 16 && 'The above error occurred in the <Test> component',
     ];
 
     expect(() => {
diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
index 0faa8ba03dc113..ffa435a5cf47ae 100644
--- a/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
+++ b/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
@@ -21,6 +21,8 @@ import Option from '@mui/joy/Option';
 import { ThemeProvider, styled } from '@mui/joy/styles';
 import describeConformance from '../../test/describeConformance';
 
+const reactVersion = Number(React.version.split('.')[0]);
+
 function checkHighlightIs(listbox: HTMLElement, expected: string | null) {
   const focused = listbox.querySelector(`.${classes.focused}`);
 
@@ -1217,8 +1219,8 @@ describe('Joy <Autocomplete />', () => {
         'None of the options match with `"not a good value"`',
         !strictModeDoubleLoggingSuppressed && 'None of the options match with `"not a good value"`',
         // React 18 Strict Effects run mount effects twice which lead to a cascading update
-        React.version.startsWith('18') && 'None of the options match with `"not a good value"`',
-        React.version.startsWith('18') &&
+        reactVersion >= 18 && 'None of the options match with `"not a good value"`',
+        reactVersion >= 18 &&
           !strictModeDoubleLoggingSuppressed &&
           'None of the options match with `"not a good value"`',
       ]);
@@ -2186,10 +2188,10 @@ describe('Joy <Autocomplete />', () => {
       );
       expect(handleHighlightChange.callCount).to.equal(
         // FIXME: highlighted index implementation should be implemented using React not the DOM.
-        React.version.startsWith('18') ? 2 : 1,
+        reactVersion >= 18 ? 2 : 1,
       );
       expect(handleHighlightChange.args[0]).to.deep.equal([undefined, options[0], 'auto']);
-      if (React.version.startsWith('18')) {
+      if (reactVersion >= 18) {
         expect(handleHighlightChange.args[1]).to.deep.equal([undefined, options[0], 'auto']);
       }
     });
@@ -2206,9 +2208,9 @@ describe('Joy <Autocomplete />', () => {
 
       expect(handleHighlightChange.callCount).to.equal(
         // FIXME: highlighted index implementation should be implemented using React not the DOM.
-        React.version.startsWith('18') ? 4 : 3,
+        reactVersion >= 18 ? 4 : 3,
       );
-      if (React.version.startsWith('18')) {
+      if (reactVersion >= 18) {
         expect(handleHighlightChange.args[2][0]).to.equal(undefined);
         expect(handleHighlightChange.args[2][1]).to.equal(null);
         expect(handleHighlightChange.args[2][2]).to.equal('auto');
@@ -2220,7 +2222,7 @@ describe('Joy <Autocomplete />', () => {
       fireEvent.keyDown(textbox, { key: 'ArrowDown' });
       expect(handleHighlightChange.callCount).to.equal(
         // FIXME: highlighted index implementation should be implemented using React not the DOM.
-        React.version.startsWith('18') ? 5 : 4,
+        reactVersion >= 18 ? 5 : 4,
       );
       expect(handleHighlightChange.lastCall.args[0]).not.to.equal(undefined);
       expect(handleHighlightChange.lastCall.args[1]).to.equal(options[1]);
@@ -2237,9 +2239,9 @@ describe('Joy <Autocomplete />', () => {
       fireEvent.mouseMove(firstOption);
       expect(handleHighlightChange.callCount).to.equal(
         // FIXME: highlighted index implementation should be implemented using React not the DOM.
-        React.version.startsWith('18') ? 4 : 3,
+        reactVersion >= 18 ? 4 : 3,
       );
-      if (React.version.startsWith('18')) {
+      if (reactVersion >= 18) {
         expect(handleHighlightChange.args[2][0]).to.equal(undefined);
         expect(handleHighlightChange.args[2][1]).to.equal(null);
         expect(handleHighlightChange.args[2][2]).to.equal('auto');
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
index 7fda0169707e28..543c2560539599 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
@@ -24,6 +24,8 @@ import InputAdornment from '@mui/material/InputAdornment';
 import Tooltip from '@mui/material/Tooltip';
 import describeConformance from '../../test/describeConformance';
 
+const reactVersion = Number(React.version.split('.')[0]);
+
 function checkHighlightIs(listbox, expected) {
   const focused = listbox.querySelector(`.${classes.focused}`);
 
@@ -1736,8 +1738,8 @@ describe('<Autocomplete />', () => {
         'None of the options match with `"not a good value"`',
         !strictModeDoubleLoggingSuppressed && 'None of the options match with `"not a good value"`',
         // React 18 Strict Effects run mount effects twice which lead to a cascading update
-        React.version.startsWith('18') && 'None of the options match with `"not a good value"`',
-        React.version.startsWith('18') &&
+        reactVersion >= 18 && 'None of the options match with `"not a good value"`',
+        reactVersion >= 18 &&
           !strictModeDoubleLoggingSuppressed &&
           'None of the options match with `"not a good value"`',
       ]);
@@ -2866,10 +2868,10 @@ describe('<Autocomplete />', () => {
     );
     expect(handleHighlightChange.callCount).to.equal(
       // FIXME: highlighted index implementation should be implemented using React not the DOM.
-      React.version.startsWith('18') ? 2 : 1,
+      reactVersion >= 18 ? 2 : 1,
     );
     expect(handleHighlightChange.args[0]).to.deep.equal([undefined, options[0], 'auto']);
-    if (React.version.startsWith('18')) {
+    if (reactVersion >= 18) {
       expect(handleHighlightChange.args[1]).to.deep.equal([undefined, options[0], 'auto']);
     }
   });
@@ -2889,10 +2891,10 @@ describe('<Autocomplete />', () => {
       );
       expect(handleHighlightChange.callCount).to.equal(
         // FIXME: highlighted index implementation should be implemented using React not the DOM.
-        React.version.startsWith('18') ? 2 : 1,
+        reactVersion >= 18 ? 2 : 1,
       );
       expect(handleHighlightChange.args[0]).to.deep.equal([undefined, options[0], 'auto']);
-      if (React.version.startsWith('18')) {
+      if (reactVersion >= 18) {
         expect(handleHighlightChange.args[1]).to.deep.equal([undefined, options[0], 'auto']);
       }
     });
@@ -2914,9 +2916,9 @@ describe('<Autocomplete />', () => {
 
       expect(handleHighlightChange.callCount).to.equal(
         // FIXME: highlighted index implementation should be implemented using React not the DOM.
-        React.version.startsWith('18') ? 4 : 3,
+        reactVersion >= 18 ? 4 : 3,
       );
-      if (React.version.startsWith('18')) {
+      if (reactVersion >= 18) {
         expect(handleHighlightChange.args[2][0]).to.equal(undefined);
         expect(handleHighlightChange.args[2][1]).to.equal(null);
         expect(handleHighlightChange.args[2][2]).to.equal('auto');
@@ -2928,7 +2930,7 @@ describe('<Autocomplete />', () => {
       fireEvent.keyDown(textbox, { key: 'ArrowDown' });
       expect(handleHighlightChange.callCount).to.equal(
         // FIXME: highlighted index implementation should be implemented using React not the DOM.
-        React.version.startsWith('18') ? 5 : 4,
+        reactVersion >= 18 ? 5 : 4,
       );
       expect(handleHighlightChange.lastCall.args[0]).not.to.equal(undefined);
       expect(handleHighlightChange.lastCall.args[1]).to.equal(options[1]);
@@ -2950,9 +2952,9 @@ describe('<Autocomplete />', () => {
       fireEvent.mouseMove(firstOption);
       expect(handleHighlightChange.callCount).to.equal(
         // FIXME: highlighted index implementation should be implemented using React not the DOM.
-        React.version.startsWith('18') ? 4 : 3,
+        reactVersion >= 18 ? 4 : 3,
       );
-      if (React.version.startsWith('18')) {
+      if (reactVersion >= 18) {
         expect(handleHighlightChange.args[2][0]).to.equal(undefined);
         expect(handleHighlightChange.args[2][1]).to.equal(null);
         expect(handleHighlightChange.args[2][2]).to.equal('auto');
diff --git a/packages/mui-material/src/InputBase/InputBase.test.js b/packages/mui-material/src/InputBase/InputBase.test.js
index 05307db95e3af6..5baff43dfbeec4 100644
--- a/packages/mui-material/src/InputBase/InputBase.test.js
+++ b/packages/mui-material/src/InputBase/InputBase.test.js
@@ -12,6 +12,8 @@ import InputBase, { inputBaseClasses as classes } from '@mui/material/InputBase'
 import { createTheme } from '@mui/material/styles';
 import describeConformance from '../../test/describeConformance';
 
+const reactVersion = Number(React.version.split('.')[0]);
+
 describe('<InputBase />', () => {
   const { render } = createRenderer();
 
@@ -283,7 +285,7 @@ describe('<InputBase />', () => {
         }).toErrorDev([
           'MUI: You have provided a `inputComponent` to the input component\nthat does not correctly handle the `ref` prop.\nMake sure the `ref` prop is called with a HTMLInputElement.',
           // React 18 Strict Effects run mount effects twice
-          React.version.startsWith('18') &&
+          reactVersion >= 18 &&
             'MUI: You have provided a `inputComponent` to the input component\nthat does not correctly handle the `ref` prop.\nMake sure the `ref` prop is called with a HTMLInputElement.',
         ]);
       });
@@ -510,7 +512,7 @@ describe('<InputBase />', () => {
         }).toErrorDev([
           'MUI: There are multiple `InputBase` components inside a FormControl.\nThis creates visual inconsistencies, only use one `InputBase`.',
           // React 18 Strict Effects run mount effects twice
-          React.version.startsWith('18') &&
+          reactVersion >= 18 &&
             'MUI: There are multiple `InputBase` components inside a FormControl.\nThis creates visual inconsistencies, only use one `InputBase`.',
         ]);
       });
diff --git a/packages/mui-material/src/ListItem/ListItem.test.js b/packages/mui-material/src/ListItem/ListItem.test.js
index 9fde560ae2b03b..3eb586b68c13b7 100644
--- a/packages/mui-material/src/ListItem/ListItem.test.js
+++ b/packages/mui-material/src/ListItem/ListItem.test.js
@@ -9,6 +9,8 @@ import ListItem, { listItemClasses as classes } from '@mui/material/ListItem';
 import ListContext from '../List/ListContext';
 import describeConformance from '../../test/describeConformance';
 
+const reactVersion = Number(React.version.split('.')[0]);
+
 const NoContent = React.forwardRef(() => {
   return null;
 });
@@ -191,7 +193,7 @@ describe('<ListItem />', () => {
         }).toErrorDev([
           'MUI: Unable to set focus to a ListItem whose component has not been rendered.',
           // React 18 Strict Effects run mount effects twice
-          React.version.startsWith('18') &&
+          reactVersion === 18 &&
             'MUI: Unable to set focus to a ListItem whose component has not been rendered.',
         ]);
       });
diff --git a/packages/mui-material/src/Menu/Menu.test.js b/packages/mui-material/src/Menu/Menu.test.js
index f29294702731af..1f67995800e7aa 100644
--- a/packages/mui-material/src/Menu/Menu.test.js
+++ b/packages/mui-material/src/Menu/Menu.test.js
@@ -13,6 +13,8 @@ import { createTheme, ThemeProvider } from '@mui/material/styles';
 import describeConformance from '../../test/describeConformance';
 import { paperClasses } from '../Paper';
 
+const reactVersion = Number(React.version.split('.')[0]);
+
 describe('<Menu />', () => {
   const { render } = createRenderer({ clock: 'fake' });
 
@@ -59,7 +61,7 @@ describe('<Menu />', () => {
 
         expect(handleEnter.callCount).to.equal(
           // onEnter is called on mount which is run twice with Strict Effects
-          React.version.startsWith('18') ? 2 : 1,
+          reactVersion >= 18 ? 2 : 1,
         );
         expect(handleEnter.args[0].length).to.equal(2);
         expect(handleEntering.callCount).to.equal(1);
diff --git a/packages/mui-material/src/Popover/Popover.test.js b/packages/mui-material/src/Popover/Popover.test.js
index db6210e99c2976..b6ba632a0d87ff 100644
--- a/packages/mui-material/src/Popover/Popover.test.js
+++ b/packages/mui-material/src/Popover/Popover.test.js
@@ -12,6 +12,8 @@ import useForkRef from '../utils/useForkRef';
 import styled from '../styles/styled';
 import describeConformance from '../../test/describeConformance';
 
+const reactVersion = Number(React.version.split('.')[0]);
+
 const FakePaper = React.forwardRef(function FakeWidthPaper(props, ref) {
   const handleMocks = React.useCallback((paperInstance) => {
     if (paperInstance) {
@@ -206,7 +208,7 @@ describe('<Popover />', () => {
 
       expect(handleEnter.callCount).to.equal(
         // onEnter is called on mount which is run twice with Strict Effects
-        React.version.startsWith('18') ? 2 : 1,
+        reactVersion >= 18 ? 2 : 1,
       );
     });
 
@@ -245,7 +247,7 @@ describe('<Popover />', () => {
         onExiting: handleExiting.callCount,
       }).to.deep.equal({
         // onEnter is called on mount which is run twice with Strict Effects
-        onEnter: React.version.startsWith('18') ? 2 : 1,
+        onEnter: reactVersion >= 18 ? 2 : 1,
         onEntering: 1,
         onEntered: 0,
         onExit: 0,
@@ -264,7 +266,7 @@ describe('<Popover />', () => {
         onExiting: handleExiting.callCount,
       }).to.deep.equal({
         // onEnter is called on mount which is run twice with Strict Effects
-        onEnter: React.version.startsWith('18') ? 2 : 1,
+        onEnter: reactVersion >= 18 ? 2 : 1,
         onEntering: 1,
         onEntered: 1,
         onExit: 0,
@@ -283,7 +285,7 @@ describe('<Popover />', () => {
         onExiting: handleExiting.callCount,
       }).to.deep.equal({
         // onEnter is called on mount which is run twice with Strict Effects
-        onEnter: React.version.startsWith('18') ? 2 : 1,
+        onEnter: reactVersion >= 18 ? 2 : 1,
         onEntering: 1,
         onEntered: 1,
         onExit: 1,
@@ -302,7 +304,7 @@ describe('<Popover />', () => {
         onExiting: handleExiting.callCount,
       }).to.deep.equal({
         // onEnter is called on mount which is run twice with Strict Effects
-        onEnter: React.version.startsWith('18') ? 2 : 1,
+        onEnter: reactVersion >= 18 ? 2 : 1,
         onEntering: 1,
         onEntered: 1,
         onExit: 1,
diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js
index d425e6e82b40c0..fd5703d2add73f 100644
--- a/packages/mui-material/src/Select/Select.test.js
+++ b/packages/mui-material/src/Select/Select.test.js
@@ -14,6 +14,8 @@ import classes from './selectClasses';
 import { nativeSelectClasses } from '../NativeSelect';
 import describeConformance from '../../test/describeConformance';
 
+const reactVersion = Number(React.version.split('.')[0]);
+
 describe('<Select />', () => {
   const { clock, render } = createRenderer({ clock: 'fake' });
 
@@ -378,7 +380,7 @@ describe('<Select />', () => {
         ).toWarnDev([
           'MUI: You have provided an out-of-range value `20` for the select component.',
           // React 18 Strict Effects run mount effects twice
-          React.version.startsWith('18') &&
+          reactVersion >= 18 &&
             'MUI: You have provided an out-of-range value `20` for the select component.',
           'MUI: You have provided an out-of-range value `20` for the select component.',
         ]);
@@ -1175,7 +1177,7 @@ describe('<Select />', () => {
         }).toErrorDev([
           'MUI: The `value` prop must be an array',
           // React 18 Strict Effects run mount effects twice
-          React.version.startsWith('18') && 'MUI: The `value` prop must be an array',
+          reactVersion >= 18 && 'MUI: The `value` prop must be an array',
           'The above error occurred in the <ForwardRef(SelectInput)> component',
         ]);
         const {
diff --git a/packages/mui-material/src/Tabs/Tabs.test.js b/packages/mui-material/src/Tabs/Tabs.test.js
index 5324acf9245dc4..e84d590d103b11 100644
--- a/packages/mui-material/src/Tabs/Tabs.test.js
+++ b/packages/mui-material/src/Tabs/Tabs.test.js
@@ -17,6 +17,8 @@ import { createSvgIcon } from '@mui/material/utils';
 import capitalize from '../utils/capitalize';
 import describeConformance from '../../test/describeConformance';
 
+const reactVersion = Number(React.version.split('.')[0]);
+
 const ArrowBackIcon = createSvgIcon(<path d="M3 3h18v18H3z" />, 'ArrowBack');
 const ArrowForwardIcon = createSvgIcon(<path d="M3 3h18v18H3z" />, 'ArrowForward');
 
@@ -358,10 +360,10 @@ describe('<Tabs />', () => {
         }).toErrorDev([
           'You can provide one of the following values: 1, 3',
           // React 18 Strict Effects run mount effects twice
-          React.version.startsWith('18') && 'You can provide one of the following values: 1, 3',
+          reactVersion === 18 && 'You can provide one of the following values: 1, 3',
           'You can provide one of the following values: 1, 3',
           // React 18 Strict Effects run mount effects twice
-          React.version.startsWith('18') && 'You can provide one of the following values: 1, 3',
+          reactVersion === 18 && 'You can provide one of the following values: 1, 3',
           'You can provide one of the following values: 1, 3',
           'You can provide one of the following values: 1, 3',
         ]);
diff --git a/packages/mui-material/src/internal/SwitchBase.test.js b/packages/mui-material/src/internal/SwitchBase.test.js
index 52432fc37037e3..aae43ff74d655c 100644
--- a/packages/mui-material/src/internal/SwitchBase.test.js
+++ b/packages/mui-material/src/internal/SwitchBase.test.js
@@ -9,6 +9,8 @@ import classes from './switchBaseClasses';
 import describeConformance from '../../test/describeConformance';
 import * as ripple from '../../test/ripple';
 
+const reactVersion = Number(React.version.split('.')[0]);
+
 describe('<SwitchBase />', () => {
   const { render } = createRenderer();
 
@@ -410,9 +412,12 @@ describe('<SwitchBase />', () => {
         setProps({ checked: true });
         global.didWarnControlledToUncontrolled = true;
       }).toErrorDev([
-        React.version.startsWith('16')
-          ? 'Warning: A component is changing an uncontrolled input of type checkbox to be controlled.'
-          : 'Warning: A component is changing an uncontrolled input to be controlled.',
+        reactVersion === 16 &&
+          'Warning: A component is changing an uncontrolled input of type checkbox to be controlled.',
+        reactVersion >= 19 && 'A component is changing an uncontrolled input to be controlled.',
+        reactVersion < 19 &&
+          reactVersion !== 16 &&
+          'Warning: A component is changing an uncontrolled input to be controlled.',
         'MUI: A component is changing the uncontrolled checked state of SwitchBase to be controlled.',
       ]);
     });
@@ -433,9 +438,12 @@ describe('<SwitchBase />', () => {
         setProps({ checked: undefined });
         global.didWarnControlledToUncontrolled = true;
       }).toErrorDev([
-        React.version.startsWith('16')
-          ? 'Warning: A component is changing an uncontrolled input of type checkbox to be controlled.'
-          : 'Warning: A component is changing an uncontrolled input to be controlled.',
+        reactVersion === 16 &&
+          'Warning: A component is changing an uncontrolled input of type checkbox to be controlled.',
+        reactVersion >= 19 && 'A component is changing an uncontrolled input to be controlled.',
+        reactVersion < 19 &&
+          reactVersion !== 16 &&
+          'Warning: A component is changing an uncontrolled input to be controlled.',
         'MUI: A component is changing the controlled checked state of SwitchBase to be uncontrolled.',
       ]);
     });
diff --git a/packages/mui-material/src/useAutocomplete/useAutocomplete.test.js b/packages/mui-material/src/useAutocomplete/useAutocomplete.test.js
index ffe5f780446fd6..435f6fc22e310b 100644
--- a/packages/mui-material/src/useAutocomplete/useAutocomplete.test.js
+++ b/packages/mui-material/src/useAutocomplete/useAutocomplete.test.js
@@ -4,6 +4,8 @@ import { createRenderer, screen, ErrorBoundary, act, fireEvent } from '@mui/inte
 import { spy } from 'sinon';
 import useAutocomplete, { createFilterOptions } from '@mui/material/useAutocomplete';
 
+const reactVersion = Number(React.version.split('.')[0]);
+
 describe('useAutocomplete', () => {
   const { render } = createRenderer();
 
@@ -289,14 +291,14 @@ describe('useAutocomplete', () => {
       'MUI: Unable to find the input element.',
       errorMessage,
       // strict effects runs effects twice
-      React.version.startsWith('18') && 'MUI: Unable to find the input element.',
-      React.version.startsWith('18') && errorMessage,
+      reactVersion >= 18 && 'MUI: Unable to find the input element.',
+      reactVersion >= 18 && errorMessage,
       'The above error occurred in the <ul> component',
-      React.version.startsWith('16') && 'The above error occurred in the <ul> component',
+      reactVersion === 16 && 'The above error occurred in the <ul> component',
       'The above error occurred in the <Test> component',
       // strict effects runs effects twice
-      React.version.startsWith('18') && 'The above error occurred in the <Test> component',
-      React.version.startsWith('16') && 'The above error occurred in the <Test> component',
+      reactVersion >= 18 && 'The above error occurred in the <Test> component',
+      reactVersion === 16 && 'The above error occurred in the <Test> component',
     ];
 
     expect(() => {

From becb76db45ac0b45390ec28c3355b4bc0cc3d6dd Mon Sep 17 00:00:00 2001
From: DiegoAndai <diego@mui.com>
Date: Thu, 1 Aug 2024 16:05:11 -0400
Subject: [PATCH 2/5] Adapt to error message handling changes

---
 .../Unstable_NumberInput/NumberInput.test.tsx |  2 +-
 .../useAutocomplete/useAutocomplete.test.js   | 52 ++++++++++++-------
 .../src/Autocomplete/Autocomplete.test.tsx    | 24 +++++----
 .../src/Autocomplete/Autocomplete.test.js     | 24 +++++----
 .../src/InputBase/InputBase.test.js           | 34 +++++++-----
 .../mui-material/src/Select/Select.test.js    | 25 +++++----
 .../useAutocomplete/useAutocomplete.test.js   | 52 ++++++++++++-------
 .../src/makeStyles/makeStyles.test.js         | 29 +++++++----
 .../src/getReactMajor/getReactMajor.ts        |  5 ++
 packages/mui-utils/src/getReactMajor/index.ts |  1 +
 packages/mui-utils/src/index.ts               |  1 +
 11 files changed, 154 insertions(+), 95 deletions(-)
 create mode 100644 packages/mui-utils/src/getReactMajor/getReactMajor.ts
 create mode 100644 packages/mui-utils/src/getReactMajor/index.ts

diff --git a/packages/mui-base/src/Unstable_NumberInput/NumberInput.test.tsx b/packages/mui-base/src/Unstable_NumberInput/NumberInput.test.tsx
index 5f3b0fc32b4604..0a2c5ed6697bd3 100644
--- a/packages/mui-base/src/Unstable_NumberInput/NumberInput.test.tsx
+++ b/packages/mui-base/src/Unstable_NumberInput/NumberInput.test.tsx
@@ -166,7 +166,7 @@ describe('<NumberInput />', () => {
             }}
           />,
         );
-      }).toErrorDev('Warning: Unknown event handler property `onInputChange`. It will be ignored.');
+      }).toErrorDev('Unknown event handler property `onInputChange`. It will be ignored.');
     });
 
     it('should fire on keyboard input in the textbox instead of onChange', async () => {
diff --git a/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js b/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js
index 9c6657b3cfb911..91719333168604 100644
--- a/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js
+++ b/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js
@@ -3,8 +3,7 @@ import { expect } from 'chai';
 import { createRenderer, screen, ErrorBoundary, act, fireEvent } from '@mui/internal-test-utils';
 import { spy } from 'sinon';
 import { useAutocomplete, createFilterOptions } from '@mui/base/useAutocomplete';
-
-const reactVersion = Number(React.version.split('.')[0]);
+import getReactMajor from '@mui/utils/getReactMajor';
 
 describe('useAutocomplete', () => {
   const { render } = createRenderer();
@@ -278,29 +277,42 @@ describe('useAutocomplete', () => {
       );
     }
 
+    const muiErrorMessage = 'MUI: Unable to find the input element.';
+    const aboveErrorUlElementMessage = 'The above error occurred in the <ul> component';
+    const aboveErrorTestComponentMessage = 'The above error occurred in the <Test> component';
     const node16ErrorMessage =
-      "Error: Uncaught [TypeError: Cannot read properties of null (reading 'removeAttribute')]";
-    const olderNodeErrorMessage =
-      "Error: Uncaught [TypeError: Cannot read property 'removeAttribute' of null]";
+      "TypeError: Cannot read properties of null (reading 'removeAttribute')";
+    const olderNodeErrorMessage = "TypeError: Cannot read property 'removeAttribute' of null";
 
     const nodeVersion = Number(process.versions.node.split('.')[0]);
-    const errorMessage = nodeVersion >= 16 ? node16ErrorMessage : olderNodeErrorMessage;
-
-    const devErrorMessages = [
-      errorMessage,
-      'MUI: Unable to find the input element.',
-      errorMessage,
-      // strict effects runs effects twice
-      reactVersion >= 18 && 'MUI: Unable to find the input element.',
-      reactVersion >= 18 && errorMessage,
-      'The above error occurred in the <ul> component',
-      reactVersion === 16 && 'The above error occurred in the <ul> component',
-      'The above error occurred in the <Test> component',
-      // strict effects runs effects twice
-      reactVersion >= 18 && 'The above error occurred in the <Test> component',
-      reactVersion === 16 && 'The above error occurred in the <Test> component',
+    const nodeErrorMessage = nodeVersion >= 16 ? node16ErrorMessage : olderNodeErrorMessage;
+
+    const defaultErrorMessages = [
+      nodeErrorMessage,
+      muiErrorMessage,
+      nodeErrorMessage,
+      aboveErrorUlElementMessage,
+      aboveErrorTestComponentMessage,
     ];
 
+    const errorMessagesByReactMajor = {
+      19: [muiErrorMessage, nodeErrorMessage, nodeErrorMessage],
+      18: [
+        nodeErrorMessage,
+        muiErrorMessage,
+        nodeErrorMessage,
+        muiErrorMessage,
+        nodeErrorMessage,
+        aboveErrorUlElementMessage,
+        aboveErrorTestComponentMessage,
+        aboveErrorTestComponentMessage,
+      ],
+    };
+
+    const reactMajor = getReactMajor();
+
+    const devErrorMessages = errorMessagesByReactMajor[reactMajor] || defaultErrorMessages;
+
     expect(() => {
       render(
         <ErrorBoundary>
diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
index ffa435a5cf47ae..ce9c53399b9a77 100644
--- a/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
+++ b/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
@@ -9,6 +9,7 @@ import {
   fireEvent,
   strictModeDoubleLoggingSuppressed,
 } from '@mui/internal-test-utils';
+import getReactMajor from '@mui/utils/getReactMajor';
 import Autocomplete, {
   autocompleteClasses as classes,
   createFilterOptions,
@@ -1211,19 +1212,20 @@ describe('Joy <Autocomplete />', () => {
       const value = 'not a good value';
       const options = ['first option', 'second option'];
 
+      const reactMajor = getReactMajor();
+      const errorMessage = 'None of the options match with `"not a good value"`';
+
+      let expectedOccurrences = 2;
+
+      if (reactMajor === 18) {
+        expectedOccurrences = 6;
+      } else if (reactMajor === 19) {
+        expectedOccurrences = 4;
+      }
+
       expect(() => {
         render(<Autocomplete value={value} options={options} />);
-      }).toWarnDev([
-        'None of the options match with `"not a good value"`',
-        !strictModeDoubleLoggingSuppressed && 'None of the options match with `"not a good value"`',
-        'None of the options match with `"not a good value"`',
-        !strictModeDoubleLoggingSuppressed && 'None of the options match with `"not a good value"`',
-        // React 18 Strict Effects run mount effects twice which lead to a cascading update
-        reactVersion >= 18 && 'None of the options match with `"not a good value"`',
-        reactVersion >= 18 &&
-          !strictModeDoubleLoggingSuppressed &&
-          'None of the options match with `"not a good value"`',
-      ]);
+      }).toWarnDev(Array(expectedOccurrences).fill(errorMessage));
     });
 
     it('warn if groups options are not sorted', () => {
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
index 543c2560539599..18c1298b8acdc6 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
@@ -8,6 +8,7 @@ import {
   screen,
   strictModeDoubleLoggingSuppressed,
 } from '@mui/internal-test-utils';
+import getReactMajor from '@mui/utils/getReactMajor';
 import { spy } from 'sinon';
 import userEvent from '@testing-library/user-event';
 import Box from '@mui/system/Box';
@@ -1724,6 +1725,17 @@ describe('<Autocomplete />', () => {
       const value = 'not a good value';
       const options = ['first option', 'second option'];
 
+      const reactMajor = getReactMajor();
+      const errorMessage = 'None of the options match with `"not a good value"`';
+
+      let expectedOccurrences = 2;
+
+      if (reactMajor === 18) {
+        expectedOccurrences = 6;
+      } else if (reactMajor === 19) {
+        expectedOccurrences = 4;
+      }
+
       expect(() => {
         render(
           <Autocomplete
@@ -1732,17 +1744,7 @@ describe('<Autocomplete />', () => {
             renderInput={(params) => <TextField {...params} />}
           />,
         );
-      }).toWarnDev([
-        'None of the options match with `"not a good value"`',
-        !strictModeDoubleLoggingSuppressed && 'None of the options match with `"not a good value"`',
-        'None of the options match with `"not a good value"`',
-        !strictModeDoubleLoggingSuppressed && 'None of the options match with `"not a good value"`',
-        // React 18 Strict Effects run mount effects twice which lead to a cascading update
-        reactVersion >= 18 && 'None of the options match with `"not a good value"`',
-        reactVersion >= 18 &&
-          !strictModeDoubleLoggingSuppressed &&
-          'None of the options match with `"not a good value"`',
-      ]);
+      }).toWarnDev(Array(expectedOccurrences).fill(errorMessage));
     });
 
     it('warn if groups options are not sorted', () => {
diff --git a/packages/mui-material/src/InputBase/InputBase.test.js b/packages/mui-material/src/InputBase/InputBase.test.js
index 5baff43dfbeec4..7955c0269bb2ad 100644
--- a/packages/mui-material/src/InputBase/InputBase.test.js
+++ b/packages/mui-material/src/InputBase/InputBase.test.js
@@ -4,6 +4,7 @@ import { expect } from 'chai';
 import { spy } from 'sinon';
 import { act, createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@emotion/react';
+import getReactMajor from '@mui/utils/getReactMajor';
 import FormControl, { useFormControl } from '@mui/material/FormControl';
 import InputAdornment from '@mui/material/InputAdornment';
 import TextField from '@mui/material/TextField';
@@ -12,7 +13,7 @@ import InputBase, { inputBaseClasses as classes } from '@mui/material/InputBase'
 import { createTheme } from '@mui/material/styles';
 import describeConformance from '../../test/describeConformance';
 
-const reactVersion = Number(React.version.split('.')[0]);
+const reactMajor = getReactMajor();
 
 describe('<InputBase />', () => {
   const { render } = createRenderer();
@@ -278,16 +279,20 @@ describe('<InputBase />', () => {
 
         const triggerChangeRef = React.createRef();
 
+        const errorMessage =
+          'MUI: You have provided a `inputComponent` to the input component\nthat does not correctly handle the `ref` prop.\nMake sure the `ref` prop is called with a HTMLInputElement.';
+
+        let expectedOccurrences = 1;
+
+        if (reactMajor === 18) {
+          expectedOccurrences = 2;
+        }
+
         expect(() => {
           render(
             <InputBase inputProps={{ ref: triggerChangeRef }} inputComponent={BadInputComponent} />,
           );
-        }).toErrorDev([
-          'MUI: You have provided a `inputComponent` to the input component\nthat does not correctly handle the `ref` prop.\nMake sure the `ref` prop is called with a HTMLInputElement.',
-          // React 18 Strict Effects run mount effects twice
-          reactVersion >= 18 &&
-            'MUI: You have provided a `inputComponent` to the input component\nthat does not correctly handle the `ref` prop.\nMake sure the `ref` prop is called with a HTMLInputElement.',
-        ]);
+        }).toErrorDev(Array(expectedOccurrences).fill(errorMessage));
       });
     });
   });
@@ -499,6 +504,14 @@ describe('<InputBase />', () => {
 
     describe('registering input', () => {
       it("should warn if more than one input is rendered regardless how it's nested", () => {
+        const errorMessage =
+          'MUI: There are multiple `InputBase` components inside a FormControl.\nThis creates visual inconsistencies, only use one `InputBase`.';
+
+        let expectedOccurrences = 1;
+
+        if (reactMajor === 18) {
+          expectedOccurrences = 2;
+        }
         expect(() => {
           render(
             <FormControl>
@@ -509,12 +522,7 @@ describe('<InputBase />', () => {
               </div>
             </FormControl>,
           );
-        }).toErrorDev([
-          'MUI: There are multiple `InputBase` components inside a FormControl.\nThis creates visual inconsistencies, only use one `InputBase`.',
-          // React 18 Strict Effects run mount effects twice
-          reactVersion >= 18 &&
-            'MUI: There are multiple `InputBase` components inside a FormControl.\nThis creates visual inconsistencies, only use one `InputBase`.',
-        ]);
+        }).toErrorDev(Array(expectedOccurrences).fill(errorMessage));
       });
 
       it('should not warn if only one input is rendered', () => {
diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js
index fd5703d2add73f..5b06fb79dfecef 100644
--- a/packages/mui-material/src/Select/Select.test.js
+++ b/packages/mui-material/src/Select/Select.test.js
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy, stub } from 'sinon';
 import { ErrorBoundary, act, createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
+import getReactMajor from '@mui/utils/getReactMajor';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import MenuItem, { menuItemClasses } from '@mui/material/MenuItem';
 import ListSubheader from '@mui/material/ListSubheader';
@@ -14,7 +15,7 @@ import classes from './selectClasses';
 import { nativeSelectClasses } from '../NativeSelect';
 import describeConformance from '../../test/describeConformance';
 
-const reactVersion = Number(React.version.split('.')[0]);
+const reactMajor = getReactMajor();
 
 describe('<Select />', () => {
   const { clock, render } = createRenderer({ clock: 'fake' });
@@ -370,6 +371,15 @@ describe('<Select />', () => {
 
     describe('warnings', () => {
       it('warns when the value is not present in any option', () => {
+        const errorMessage =
+          'MUI: You have provided an out-of-range value `20` for the select component.';
+
+        let expectedOccurrences = 2;
+
+        if (reactMajor === 18) {
+          expectedOccurrences = 3;
+        }
+
         expect(() =>
           render(
             <Select value={20}>
@@ -377,13 +387,7 @@ describe('<Select />', () => {
               <MenuItem value={30}>Thirty</MenuItem>
             </Select>,
           ),
-        ).toWarnDev([
-          'MUI: You have provided an out-of-range value `20` for the select component.',
-          // React 18 Strict Effects run mount effects twice
-          reactVersion >= 18 &&
-            'MUI: You have provided an out-of-range value `20` for the select component.',
-          'MUI: You have provided an out-of-range value `20` for the select component.',
-        ]);
+        ).toWarnDev(Array(expectedOccurrences).fill(errorMessage));
       });
     });
   });
@@ -1177,8 +1181,9 @@ describe('<Select />', () => {
         }).toErrorDev([
           'MUI: The `value` prop must be an array',
           // React 18 Strict Effects run mount effects twice
-          reactVersion >= 18 && 'MUI: The `value` prop must be an array',
-          'The above error occurred in the <ForwardRef(SelectInput)> component',
+          reactMajor === 18 && 'MUI: The `value` prop must be an array',
+          reactMajor !== 19 &&
+            'The above error occurred in the <ForwardRef(SelectInput)> component',
         ]);
         const {
           current: { errors },
diff --git a/packages/mui-material/src/useAutocomplete/useAutocomplete.test.js b/packages/mui-material/src/useAutocomplete/useAutocomplete.test.js
index 435f6fc22e310b..8a75e5de7b5843 100644
--- a/packages/mui-material/src/useAutocomplete/useAutocomplete.test.js
+++ b/packages/mui-material/src/useAutocomplete/useAutocomplete.test.js
@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { createRenderer, screen, ErrorBoundary, act, fireEvent } from '@mui/internal-test-utils';
+import getReactMajor from '@mui/utils/getReactMajor';
 import { spy } from 'sinon';
 import useAutocomplete, { createFilterOptions } from '@mui/material/useAutocomplete';
 
-const reactVersion = Number(React.version.split('.')[0]);
-
 describe('useAutocomplete', () => {
   const { render } = createRenderer();
 
@@ -278,29 +277,42 @@ describe('useAutocomplete', () => {
       );
     }
 
+    const muiErrorMessage = 'MUI: Unable to find the input element.';
+    const aboveErrorUlElementMessage = 'The above error occurred in the <ul> component';
+    const aboveErrorTestComponentMessage = 'The above error occurred in the <Test> component';
     const node16ErrorMessage =
-      "Error: Uncaught [TypeError: Cannot read properties of null (reading 'removeAttribute')]";
-    const olderNodeErrorMessage =
-      "Error: Uncaught [TypeError: Cannot read property 'removeAttribute' of null]";
+      "TypeError: Cannot read properties of null (reading 'removeAttribute')";
+    const olderNodeErrorMessage = "TypeError: Cannot read property 'removeAttribute' of null";
 
     const nodeVersion = Number(process.versions.node.split('.')[0]);
-    const errorMessage = nodeVersion >= 16 ? node16ErrorMessage : olderNodeErrorMessage;
-
-    const devErrorMessages = [
-      errorMessage,
-      'MUI: Unable to find the input element.',
-      errorMessage,
-      // strict effects runs effects twice
-      reactVersion >= 18 && 'MUI: Unable to find the input element.',
-      reactVersion >= 18 && errorMessage,
-      'The above error occurred in the <ul> component',
-      reactVersion === 16 && 'The above error occurred in the <ul> component',
-      'The above error occurred in the <Test> component',
-      // strict effects runs effects twice
-      reactVersion >= 18 && 'The above error occurred in the <Test> component',
-      reactVersion === 16 && 'The above error occurred in the <Test> component',
+    const nodeErrorMessage = nodeVersion >= 16 ? node16ErrorMessage : olderNodeErrorMessage;
+
+    const defaultErrorMessages = [
+      nodeErrorMessage,
+      muiErrorMessage,
+      nodeErrorMessage,
+      aboveErrorUlElementMessage,
+      aboveErrorTestComponentMessage,
     ];
 
+    const errorMessagesByReactMajor = {
+      19: [muiErrorMessage, nodeErrorMessage, nodeErrorMessage],
+      18: [
+        nodeErrorMessage,
+        muiErrorMessage,
+        nodeErrorMessage,
+        muiErrorMessage,
+        nodeErrorMessage,
+        aboveErrorUlElementMessage,
+        aboveErrorTestComponentMessage,
+        aboveErrorTestComponentMessage,
+      ],
+    };
+
+    const reactMajor = getReactMajor();
+
+    const devErrorMessages = errorMessagesByReactMajor[reactMajor] || defaultErrorMessages;
+
     expect(() => {
       render(
         <ErrorBoundary>
diff --git a/packages/mui-styles/src/makeStyles/makeStyles.test.js b/packages/mui-styles/src/makeStyles/makeStyles.test.js
index d2a9b3b896dca3..7d715461995be9 100644
--- a/packages/mui-styles/src/makeStyles/makeStyles.test.js
+++ b/packages/mui-styles/src/makeStyles/makeStyles.test.js
@@ -3,6 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { SheetsRegistry } from 'jss';
 import { createRenderer, screen, renderHook, fireEvent } from '@mui/internal-test-utils';
+import getReactMajor from '@mui/utils/getReactMajor';
 import { createTheme } from '@mui/material/styles';
 import createGenerateClassName from '../createGenerateClassName';
 import makeStyles from './makeStyles';
@@ -81,19 +82,29 @@ describe('makeStyles', () => {
     it('should warn if missing theme', () => {
       const useStyles2 = makeStyles((theme) => ({ root: { padding: theme.spacing(2) } }));
 
+      const reactMajor = getReactMajor();
+      const muiErrorMessage =
+        'MUI: The `styles` argument provided is invalid.\nYou are providing a function without a theme in the context.';
+      const nodeErrorMessage = 'TypeError: theme.spacing is not a function';
+
+      let devErrorMessages = [muiErrorMessage, muiErrorMessage];
+
+      if (reactMajor !== 19) {
+        devErrorMessages = [
+          ...devErrorMessages,
+          nodeErrorMessage,
+          muiErrorMessage,
+          muiErrorMessage,
+          nodeErrorMessage,
+          'The above error occurred in the <TestComponent> component',
+        ];
+      }
+
       expect(() => {
         expect(() => {
           renderHook(() => useStyles2({}));
         }).to.throw('theme.spacing is not a function');
-      }).toErrorDev([
-        'MUI: The `styles` argument provided is invalid.\nYou are providing a function without a theme in the context.',
-        'MUI: The `styles` argument provided is invalid.\nYou are providing a function without a theme in the context.',
-        'Uncaught [TypeError: theme.spacing is not a function',
-        'MUI: The `styles` argument provided is invalid.\nYou are providing a function without a theme in the context.',
-        'MUI: The `styles` argument provided is invalid.\nYou are providing a function without a theme in the context.',
-        'Uncaught [TypeError: theme.spacing is not a function',
-        'The above error occurred in the <TestComponent> component',
-      ]);
+      }).toErrorDev(devErrorMessages);
     });
 
     it('should warn but not throw if providing an invalid styles type', () => {
diff --git a/packages/mui-utils/src/getReactMajor/getReactMajor.ts b/packages/mui-utils/src/getReactMajor/getReactMajor.ts
new file mode 100644
index 00000000000000..26892cdf34e1e9
--- /dev/null
+++ b/packages/mui-utils/src/getReactMajor/getReactMajor.ts
@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+export default function getReactMajor(): number {
+  return Number(React.version.split('.')[0]);
+}
diff --git a/packages/mui-utils/src/getReactMajor/index.ts b/packages/mui-utils/src/getReactMajor/index.ts
new file mode 100644
index 00000000000000..bdb8d39bc492c8
--- /dev/null
+++ b/packages/mui-utils/src/getReactMajor/index.ts
@@ -0,0 +1 @@
+export { default } from './getReactMajor';
diff --git a/packages/mui-utils/src/index.ts b/packages/mui-utils/src/index.ts
index 0cd2308d8650e5..4a65a59a3b395f 100644
--- a/packages/mui-utils/src/index.ts
+++ b/packages/mui-utils/src/index.ts
@@ -46,4 +46,5 @@ export type { UseSlotPropsParameters, UseSlotPropsResult } from './useSlotProps'
 export { default as unstable_resolveComponentProps } from './resolveComponentProps';
 export { default as unstable_extractEventHandlers } from './extractEventHandlers';
 export { default as unstable_getReactNodeRef } from './getReactNodeRef';
+export { default as unstable_getReactMajor } from './getReactMajor';
 export * from './types';

From a4de3200ef8f416dc3d62626de0805332900e308 Mon Sep 17 00:00:00 2001
From: DiegoAndai <diego@mui.com>
Date: Fri, 2 Aug 2024 13:05:59 -0400
Subject: [PATCH 3/5] Refactor React major check and skip proptype tests for
 React 19

---
 .../test-utils/src/createRenderer.tsx         |  3 +-
 .../test-utils/src/fireDiscreteEvent.ts       |  4 +--
 packages-internal/test-utils/src/index.ts     |  3 ++
 .../test-utils/src/reactMajor.ts              |  3 ++
 packages-internal/test-utils/src/userEvent.ts |  8 ++---
 .../useAutocomplete/useAutocomplete.test.js   | 12 ++++---
 .../src/Autocomplete/Autocomplete.test.tsx    | 29 ++++++++-------
 packages/mui-lab/src/Masonry/Masonry.test.js  |  4 +--
 .../src/Accordion/Accordion.test.js           |  9 +++--
 .../src/Autocomplete/Autocomplete.test.js     | 25 ++++++-------
 packages/mui-material/src/Grid/Grid.test.js   | 35 +++++++++++++------
 .../src/IconButton/IconButton.test.js         |  9 +++--
 .../src/InputBase/InputBase.test.js           |  5 +--
 .../src/ListItem/ListItem.test.js             | 13 ++++---
 packages/mui-material/src/Menu/Menu.test.js   |  5 ++-
 .../mui-material/src/Popover/Popover.test.js  | 14 ++++----
 .../mui-material/src/Select/Select.test.js    | 12 ++++---
 packages/mui-material/src/Tabs/Tabs.test.js   |  7 ++--
 .../mui-material/src/Tooltip/Tooltip.test.js  |  8 ++++-
 .../src/internal/SwitchBase.test.js           | 20 +++++------
 .../useAutocomplete/useAutocomplete.test.js   | 12 ++++---
 .../src/makeStyles/makeStyles.test.js         | 10 ++++--
 .../elementAcceptingRef.test.tsx              | 16 ++++++++-
 .../src/getReactMajor/getReactMajor.ts        |  5 ---
 packages/mui-utils/src/getReactMajor/index.ts |  1 -
 packages/mui-utils/src/index.ts               |  1 -
 26 files changed, 160 insertions(+), 113 deletions(-)
 create mode 100644 packages-internal/test-utils/src/reactMajor.ts
 delete mode 100644 packages/mui-utils/src/getReactMajor/getReactMajor.ts
 delete mode 100644 packages/mui-utils/src/getReactMajor/index.ts

diff --git a/packages-internal/test-utils/src/createRenderer.tsx b/packages-internal/test-utils/src/createRenderer.tsx
index aeb3381663f187..85889bc3d911a8 100644
--- a/packages-internal/test-utils/src/createRenderer.tsx
+++ b/packages-internal/test-utils/src/createRenderer.tsx
@@ -19,6 +19,7 @@ import {
 } from '@testing-library/react/pure';
 import { userEvent } from '@testing-library/user-event';
 import { useFakeTimers } from 'sinon';
+import reactMajor from './reactMajor';
 
 interface Interaction {
   id: number;
@@ -568,7 +569,7 @@ export function createRenderer(globalOptions: CreateRendererOptions = {}): Rende
       wrapper: InnerWrapper = React.Fragment,
     } = options;
 
-    const usesLegacyRoot = Number(React.version.split('.')[0]) < 18;
+    const usesLegacyRoot = reactMajor < 18;
     const Mode = strict && (strictEffects || usesLegacyRoot) ? React.StrictMode : React.Fragment;
     return function Wrapper({ children }: { children?: React.ReactNode }) {
       return (
diff --git a/packages-internal/test-utils/src/fireDiscreteEvent.ts b/packages-internal/test-utils/src/fireDiscreteEvent.ts
index a171f45c025dc0..a48f70d9ecbf9a 100644
--- a/packages-internal/test-utils/src/fireDiscreteEvent.ts
+++ b/packages-internal/test-utils/src/fireDiscreteEvent.ts
@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { configure, fireEvent, getConfig } from '@testing-library/react';
+import reactMajor from './reactMajor';
 
 const noWrapper = (callback: () => void) => callback();
 
@@ -8,7 +8,7 @@ const noWrapper = (callback: () => void) => callback();
  * @returns {void}
  */
 function withMissingActWarningsIgnored(callback: () => void) {
-  if (Number(React.version.split('.')[0]) >= 18) {
+  if (reactMajor >= 18) {
     callback();
     return;
   }
diff --git a/packages-internal/test-utils/src/index.ts b/packages-internal/test-utils/src/index.ts
index ab14ee78f83aa0..f7c008b2b95ac7 100644
--- a/packages-internal/test-utils/src/index.ts
+++ b/packages-internal/test-utils/src/index.ts
@@ -15,9 +15,12 @@ export {} from './initMatchers';
 export * as fireDiscreteEvent from './fireDiscreteEvent';
 export * as userEvent from './userEvent';
 export { default as flushMicrotasks } from './flushMicrotasks';
+export { default as reactMajor } from './reactMajor';
 
 /**
  * Set to true if console logs during [lifecycles that are invoked twice in `React.StrictMode`](https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects) are suppressed.
  * Useful for asserting on `console.warn` or `console.error` via `toErrorDev()`.
+ * TODO: Refactor to use reactMajor when fixing the React 17 cron test.
+ * https://github.com/mui/material-ui/issues/43153
  */
 export const strictModeDoubleLoggingSuppressed = React.version.startsWith('17');
diff --git a/packages-internal/test-utils/src/reactMajor.ts b/packages-internal/test-utils/src/reactMajor.ts
new file mode 100644
index 00000000000000..69ae8dc426bafd
--- /dev/null
+++ b/packages-internal/test-utils/src/reactMajor.ts
@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+export default Number(React.version.split('.')[0]);
diff --git a/packages-internal/test-utils/src/userEvent.ts b/packages-internal/test-utils/src/userEvent.ts
index 4da5bf2db16c00..ada372c3c4eae5 100644
--- a/packages-internal/test-utils/src/userEvent.ts
+++ b/packages-internal/test-utils/src/userEvent.ts
@@ -1,8 +1,6 @@
-import * as React from 'react';
 import { click, mouseDown, mouseUp, keyDown, keyUp } from './fireDiscreteEvent';
 import { act, fireEvent } from './createRenderer';
-
-const reactVersion = Number(React.version.split('.')[0]);
+import reactMajor from './reactMajor';
 
 export function touch(target: Element): void {
   fireEvent.touchStart(target);
@@ -13,7 +11,7 @@ export const mousePress: (...args: Parameters<(typeof fireEvent)['mouseUp']>) =>
   target,
   options,
 ) => {
-  if (reactVersion >= 18) {
+  if (reactMajor >= 18) {
     fireEvent.mouseDown(target, options);
     fireEvent.mouseUp(target, options);
     fireEvent.click(target, options);
@@ -26,7 +24,7 @@ export const mousePress: (...args: Parameters<(typeof fireEvent)['mouseUp']>) =>
 };
 
 export function keyPress(target: Element, options: { key: string; [key: string]: any }): void {
-  if (reactVersion >= 18) {
+  if (reactMajor >= 18) {
     fireEvent.keyDown(target, options);
     fireEvent.keyUp(target, options);
   } else {
diff --git a/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js b/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js
index 91719333168604..b148ddbcc10cf3 100644
--- a/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js
+++ b/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js
@@ -1,9 +1,15 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, screen, ErrorBoundary, act, fireEvent } from '@mui/internal-test-utils';
+import {
+  createRenderer,
+  screen,
+  ErrorBoundary,
+  act,
+  fireEvent,
+  reactMajor,
+} from '@mui/internal-test-utils';
 import { spy } from 'sinon';
 import { useAutocomplete, createFilterOptions } from '@mui/base/useAutocomplete';
-import getReactMajor from '@mui/utils/getReactMajor';
 
 describe('useAutocomplete', () => {
   const { render } = createRenderer();
@@ -309,8 +315,6 @@ describe('useAutocomplete', () => {
       ],
     };
 
-    const reactMajor = getReactMajor();
-
     const devErrorMessages = errorMessagesByReactMajor[reactMajor] || defaultErrorMessages;
 
     expect(() => {
diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
index ce9c53399b9a77..0bcd18a9fce0fe 100644
--- a/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
+++ b/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
@@ -8,8 +8,8 @@ import {
   act,
   fireEvent,
   strictModeDoubleLoggingSuppressed,
+  reactMajor,
 } from '@mui/internal-test-utils';
-import getReactMajor from '@mui/utils/getReactMajor';
 import Autocomplete, {
   autocompleteClasses as classes,
   createFilterOptions,
@@ -22,8 +22,6 @@ import Option from '@mui/joy/Option';
 import { ThemeProvider, styled } from '@mui/joy/styles';
 import describeConformance from '../../test/describeConformance';
 
-const reactVersion = Number(React.version.split('.')[0]);
-
 function checkHighlightIs(listbox: HTMLElement, expected: string | null) {
   const focused = listbox.querySelector(`.${classes.focused}`);
 
@@ -1212,7 +1210,6 @@ describe('Joy <Autocomplete />', () => {
       const value = 'not a good value';
       const options = ['first option', 'second option'];
 
-      const reactMajor = getReactMajor();
       const errorMessage = 'None of the options match with `"not a good value"`';
 
       let expectedOccurrences = 2;
@@ -1934,9 +1931,11 @@ describe('Joy <Autocomplete />', () => {
 
       await user.click(screen.getByText('Reset'));
 
-      expect(handleInputChange.callCount).to.equal(4);
-      expect(handleInputChange.args[3][1]).to.equal(options[1].name);
-      expect(handleInputChange.args[3][2]).to.equal('reset');
+      const expectedCallCount = reactMajor === 18 ? 4 : 2;
+
+      expect(handleInputChange.callCount).to.equal(expectedCallCount);
+      expect(handleInputChange.args[expectedCallCount - 1][1]).to.equal(options[1].name);
+      expect(handleInputChange.args[expectedCallCount - 1][2]).to.equal('reset');
     });
 
     it('provides a reason on clear', async () => {
@@ -2190,10 +2189,10 @@ describe('Joy <Autocomplete />', () => {
       );
       expect(handleHighlightChange.callCount).to.equal(
         // FIXME: highlighted index implementation should be implemented using React not the DOM.
-        reactVersion >= 18 ? 2 : 1,
+        reactMajor >= 18 ? 2 : 1,
       );
       expect(handleHighlightChange.args[0]).to.deep.equal([undefined, options[0], 'auto']);
-      if (reactVersion >= 18) {
+      if (reactMajor >= 18) {
         expect(handleHighlightChange.args[1]).to.deep.equal([undefined, options[0], 'auto']);
       }
     });
@@ -2210,9 +2209,9 @@ describe('Joy <Autocomplete />', () => {
 
       expect(handleHighlightChange.callCount).to.equal(
         // FIXME: highlighted index implementation should be implemented using React not the DOM.
-        reactVersion >= 18 ? 4 : 3,
+        reactMajor >= 18 ? 4 : 3,
       );
-      if (reactVersion >= 18) {
+      if (reactMajor >= 18) {
         expect(handleHighlightChange.args[2][0]).to.equal(undefined);
         expect(handleHighlightChange.args[2][1]).to.equal(null);
         expect(handleHighlightChange.args[2][2]).to.equal('auto');
@@ -2224,7 +2223,7 @@ describe('Joy <Autocomplete />', () => {
       fireEvent.keyDown(textbox, { key: 'ArrowDown' });
       expect(handleHighlightChange.callCount).to.equal(
         // FIXME: highlighted index implementation should be implemented using React not the DOM.
-        reactVersion >= 18 ? 5 : 4,
+        reactMajor >= 18 ? 5 : 4,
       );
       expect(handleHighlightChange.lastCall.args[0]).not.to.equal(undefined);
       expect(handleHighlightChange.lastCall.args[1]).to.equal(options[1]);
@@ -2241,9 +2240,9 @@ describe('Joy <Autocomplete />', () => {
       fireEvent.mouseMove(firstOption);
       expect(handleHighlightChange.callCount).to.equal(
         // FIXME: highlighted index implementation should be implemented using React not the DOM.
-        reactVersion >= 18 ? 4 : 3,
+        reactMajor >= 18 ? 4 : 3,
       );
-      if (reactVersion >= 18) {
+      if (reactMajor >= 18) {
         expect(handleHighlightChange.args[2][0]).to.equal(undefined);
         expect(handleHighlightChange.args[2][1]).to.equal(null);
         expect(handleHighlightChange.args[2][2]).to.equal('auto');
@@ -2288,7 +2287,7 @@ describe('Joy <Autocomplete />', () => {
       checkHighlightIs(getByRole('listbox'), 'one');
       setProps({ options: ['four', 'five'] });
       checkHighlightIs(getByRole('listbox'), 'four');
-      expect(handleHighlightChange).to.deep.equal([null, 'one', 'four']);
+      expect(handleHighlightChange).to.deep.equal([null, 'one', 'one', 'four']);
     });
   });
 
diff --git a/packages/mui-lab/src/Masonry/Masonry.test.js b/packages/mui-lab/src/Masonry/Masonry.test.js
index c5e56f2a0ac5b0..14c82fb9aaadf1 100644
--- a/packages/mui-lab/src/Masonry/Masonry.test.js
+++ b/packages/mui-lab/src/Masonry/Masonry.test.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui/internal-test-utils';
+import { createRenderer, reactMajor } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { createTheme } from '@mui/material/styles';
 import defaultTheme from '@mui/material/styles/defaultTheme';
@@ -100,7 +100,7 @@ describe('<Masonry />', () => {
     });
 
     it('should throw console error when children are empty', function test() {
-      if (!/jsdom/.test(window.navigator.userAgent)) {
+      if (!/jsdom/.test(window.navigator.userAgent) || reactMajor === 19) {
         this.skip();
       }
       expect(() => render(<Masonry columns={3} spacing={1} />)).toErrorDev(
diff --git a/packages/mui-material/src/Accordion/Accordion.test.js b/packages/mui-material/src/Accordion/Accordion.test.js
index 815f8afba2bf5f..4a22abe61089ca 100644
--- a/packages/mui-material/src/Accordion/Accordion.test.js
+++ b/packages/mui-material/src/Accordion/Accordion.test.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer, fireEvent } from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, reactMajor } from '@mui/internal-test-utils';
 import Accordion, { accordionClasses as classes } from '@mui/material/Accordion';
 import Paper from '@mui/material/Paper';
 import AccordionSummary from '@mui/material/AccordionSummary';
@@ -158,7 +158,12 @@ describe('<Accordion />', () => {
 
   describe('prop: children', () => {
     describe('first child', () => {
-      beforeEach(() => {
+      beforeEach(function beforeEachCallback() {
+        if (reactMajor >= 19) {
+          // React 19 removed prop types support
+          this.skip();
+        }
+
         PropTypes.resetWarningCache();
       });
 
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
index 18c1298b8acdc6..1afa904b95d20a 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
@@ -7,8 +7,8 @@ import {
   fireEvent,
   screen,
   strictModeDoubleLoggingSuppressed,
+  reactMajor,
 } from '@mui/internal-test-utils';
-import getReactMajor from '@mui/utils/getReactMajor';
 import { spy } from 'sinon';
 import userEvent from '@testing-library/user-event';
 import Box from '@mui/system/Box';
@@ -25,8 +25,6 @@ import InputAdornment from '@mui/material/InputAdornment';
 import Tooltip from '@mui/material/Tooltip';
 import describeConformance from '../../test/describeConformance';
 
-const reactVersion = Number(React.version.split('.')[0]);
-
 function checkHighlightIs(listbox, expected) {
   const focused = listbox.querySelector(`.${classes.focused}`);
 
@@ -1725,7 +1723,6 @@ describe('<Autocomplete />', () => {
       const value = 'not a good value';
       const options = ['first option', 'second option'];
 
-      const reactMajor = getReactMajor();
       const errorMessage = 'None of the options match with `"not a good value"`';
 
       let expectedOccurrences = 2;
@@ -2870,10 +2867,10 @@ describe('<Autocomplete />', () => {
     );
     expect(handleHighlightChange.callCount).to.equal(
       // FIXME: highlighted index implementation should be implemented using React not the DOM.
-      reactVersion >= 18 ? 2 : 1,
+      reactMajor >= 18 ? 2 : 1,
     );
     expect(handleHighlightChange.args[0]).to.deep.equal([undefined, options[0], 'auto']);
-    if (reactVersion >= 18) {
+    if (reactMajor >= 18) {
       expect(handleHighlightChange.args[1]).to.deep.equal([undefined, options[0], 'auto']);
     }
   });
@@ -2893,10 +2890,10 @@ describe('<Autocomplete />', () => {
       );
       expect(handleHighlightChange.callCount).to.equal(
         // FIXME: highlighted index implementation should be implemented using React not the DOM.
-        reactVersion >= 18 ? 2 : 1,
+        reactMajor >= 18 ? 2 : 1,
       );
       expect(handleHighlightChange.args[0]).to.deep.equal([undefined, options[0], 'auto']);
-      if (reactVersion >= 18) {
+      if (reactMajor >= 18) {
         expect(handleHighlightChange.args[1]).to.deep.equal([undefined, options[0], 'auto']);
       }
     });
@@ -2918,9 +2915,9 @@ describe('<Autocomplete />', () => {
 
       expect(handleHighlightChange.callCount).to.equal(
         // FIXME: highlighted index implementation should be implemented using React not the DOM.
-        reactVersion >= 18 ? 4 : 3,
+        reactMajor >= 18 ? 4 : 3,
       );
-      if (reactVersion >= 18) {
+      if (reactMajor >= 18) {
         expect(handleHighlightChange.args[2][0]).to.equal(undefined);
         expect(handleHighlightChange.args[2][1]).to.equal(null);
         expect(handleHighlightChange.args[2][2]).to.equal('auto');
@@ -2932,7 +2929,7 @@ describe('<Autocomplete />', () => {
       fireEvent.keyDown(textbox, { key: 'ArrowDown' });
       expect(handleHighlightChange.callCount).to.equal(
         // FIXME: highlighted index implementation should be implemented using React not the DOM.
-        reactVersion >= 18 ? 5 : 4,
+        reactMajor >= 18 ? 5 : 4,
       );
       expect(handleHighlightChange.lastCall.args[0]).not.to.equal(undefined);
       expect(handleHighlightChange.lastCall.args[1]).to.equal(options[1]);
@@ -2954,9 +2951,9 @@ describe('<Autocomplete />', () => {
       fireEvent.mouseMove(firstOption);
       expect(handleHighlightChange.callCount).to.equal(
         // FIXME: highlighted index implementation should be implemented using React not the DOM.
-        reactVersion >= 18 ? 4 : 3,
+        reactMajor >= 18 ? 4 : 3,
       );
-      if (reactVersion >= 18) {
+      if (reactMajor >= 18) {
         expect(handleHighlightChange.args[2][0]).to.equal(undefined);
         expect(handleHighlightChange.args[2][1]).to.equal(null);
         expect(handleHighlightChange.args[2][2]).to.equal('auto');
@@ -3005,7 +3002,7 @@ describe('<Autocomplete />', () => {
       checkHighlightIs(getByRole('listbox'), 'one');
       setProps({ options: ['four', 'five'] });
       checkHighlightIs(getByRole('listbox'), 'four');
-      expect(handleHighlightChange).to.deep.equal([null, 'one', 'four']);
+      expect(handleHighlightChange).to.deep.equal([null, 'one', 'one', 'four']);
     });
   });
 
diff --git a/packages/mui-material/src/Grid/Grid.test.js b/packages/mui-material/src/Grid/Grid.test.js
index 68ce2ec894958f..4f5599e7281906 100644
--- a/packages/mui-material/src/Grid/Grid.test.js
+++ b/packages/mui-material/src/Grid/Grid.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, screen } from '@mui/internal-test-utils';
+import { createRenderer, screen, reactMajor } from '@mui/internal-test-utils';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import defaultTheme from '@mui/material/styles/defaultTheme';
 import Grid, { gridClasses as classes } from '@mui/material/Grid';
@@ -673,19 +673,32 @@ describe('Material UI <Grid />', () => {
           },
         },
       });
+      const { container } = render(
+        <ThemeProvider theme={theme}>
+          <Grid item spacing={{ mobile: 1.5, desktop: 3 }} />
+        </ThemeProvider>,
+      );
+      expect(container.firstChild).to.not.have.class('MuiGrid-spacing-mobile-1.5');
+      expect(container.firstChild).to.not.have.class('MuiGrid-spacing-desktop-3');
+      expect(container.firstChild).to.not.toHaveComputedStyle({
+        position: 'relative',
+        top: '30px',
+        left: '50px',
+      });
+    });
+
+    it('should warn of failed prop types when providing spacing object without the `container` prop', function test() {
+      if (reactMajor >= 19) {
+        // React 19 removed prop types support
+        this.skip();
+      }
+
       expect(() => {
-        const { container } = render(
-          <ThemeProvider theme={theme}>
-            <Grid item spacing={{ mobile: 1.5, desktop: 3 }} />
+        render(
+          <ThemeProvider>
+            <Grid item spacing={{ mobile: 1, desktop: 3 }} />
           </ThemeProvider>,
         );
-        expect(container.firstChild).to.not.have.class('MuiGrid-spacing-mobile-1.5');
-        expect(container.firstChild).to.not.have.class('MuiGrid-spacing-desktop-3');
-        expect(container.firstChild).to.not.toHaveComputedStyle({
-          position: 'relative',
-          top: '30px',
-          left: '50px',
-        });
       }).toErrorDev(
         'Warning: Failed prop type: The prop `spacing` of `Grid` can only be used together with the `container` prop.',
       );
diff --git a/packages/mui-material/src/IconButton/IconButton.test.js b/packages/mui-material/src/IconButton/IconButton.test.js
index 3fad1d8384fbb5..25ca0ca6b2b9d3 100644
--- a/packages/mui-material/src/IconButton/IconButton.test.js
+++ b/packages/mui-material/src/IconButton/IconButton.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import PropTypes from 'prop-types';
-import { createRenderer } from '@mui/internal-test-utils';
+import { createRenderer, reactMajor } from '@mui/internal-test-utils';
 import capitalize from '@mui/utils/capitalize';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import IconButton, { iconButtonClasses as classes } from '@mui/material/IconButton';
@@ -108,7 +108,12 @@ describe('<IconButton />', () => {
     });
   });
 
-  it('should raise a warning about onClick in children because of Firefox', () => {
+  it('should raise a warning about onClick in children because of Firefox', function test() {
+    if (reactMajor >= 19) {
+      // React 19 removed prop types support
+      this.skip();
+    }
+
     expect(() => {
       PropTypes.checkPropTypes(
         IconButton.propTypes,
diff --git a/packages/mui-material/src/InputBase/InputBase.test.js b/packages/mui-material/src/InputBase/InputBase.test.js
index 7955c0269bb2ad..0b44695890bd41 100644
--- a/packages/mui-material/src/InputBase/InputBase.test.js
+++ b/packages/mui-material/src/InputBase/InputBase.test.js
@@ -2,9 +2,8 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { act, createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
+import { act, createRenderer, fireEvent, screen, reactMajor } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@emotion/react';
-import getReactMajor from '@mui/utils/getReactMajor';
 import FormControl, { useFormControl } from '@mui/material/FormControl';
 import InputAdornment from '@mui/material/InputAdornment';
 import TextField from '@mui/material/TextField';
@@ -13,8 +12,6 @@ import InputBase, { inputBaseClasses as classes } from '@mui/material/InputBase'
 import { createTheme } from '@mui/material/styles';
 import describeConformance from '../../test/describeConformance';
 
-const reactMajor = getReactMajor();
-
 describe('<InputBase />', () => {
   const { render } = createRenderer();
 
diff --git a/packages/mui-material/src/ListItem/ListItem.test.js b/packages/mui-material/src/ListItem/ListItem.test.js
index 3eb586b68c13b7..4c9101020de95d 100644
--- a/packages/mui-material/src/ListItem/ListItem.test.js
+++ b/packages/mui-material/src/ListItem/ListItem.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import PropTypes from 'prop-types';
-import { act, createRenderer, fireEvent, queries } from '@mui/internal-test-utils';
+import { act, createRenderer, fireEvent, queries, reactMajor } from '@mui/internal-test-utils';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
@@ -9,8 +9,6 @@ import ListItem, { listItemClasses as classes } from '@mui/material/ListItem';
 import ListContext from '../List/ListContext';
 import describeConformance from '../../test/describeConformance';
 
-const reactVersion = Number(React.version.split('.')[0]);
-
 const NoContent = React.forwardRef(() => {
   return null;
 });
@@ -170,7 +168,12 @@ describe('<ListItem />', () => {
         PropTypes.resetWarningCache();
       });
 
-      it('warns if it cant detect the secondary action properly', () => {
+      it('warns if it cant detect the secondary action properly', function test() {
+        if (reactMajor >= 19) {
+          // React 19 removed prop types support
+          this.skip();
+        }
+
         expect(() => {
           PropTypes.checkPropTypes(
             ListItem.propTypes,
@@ -193,7 +196,7 @@ describe('<ListItem />', () => {
         }).toErrorDev([
           'MUI: Unable to set focus to a ListItem whose component has not been rendered.',
           // React 18 Strict Effects run mount effects twice
-          reactVersion === 18 &&
+          reactMajor === 18 &&
             'MUI: Unable to set focus to a ListItem whose component has not been rendered.',
         ]);
       });
diff --git a/packages/mui-material/src/Menu/Menu.test.js b/packages/mui-material/src/Menu/Menu.test.js
index 1f67995800e7aa..1d9ca77a1861cd 100644
--- a/packages/mui-material/src/Menu/Menu.test.js
+++ b/packages/mui-material/src/Menu/Menu.test.js
@@ -6,6 +6,7 @@ import {
   screen,
   fireEvent,
   strictModeDoubleLoggingSuppressed,
+  reactMajor,
 } from '@mui/internal-test-utils';
 import Menu, { menuClasses as classes } from '@mui/material/Menu';
 import Popover from '@mui/material/Popover';
@@ -13,8 +14,6 @@ import { createTheme, ThemeProvider } from '@mui/material/styles';
 import describeConformance from '../../test/describeConformance';
 import { paperClasses } from '../Paper';
 
-const reactVersion = Number(React.version.split('.')[0]);
-
 describe('<Menu />', () => {
   const { render } = createRenderer({ clock: 'fake' });
 
@@ -61,7 +60,7 @@ describe('<Menu />', () => {
 
         expect(handleEnter.callCount).to.equal(
           // onEnter is called on mount which is run twice with Strict Effects
-          reactVersion >= 18 ? 2 : 1,
+          reactMajor >= 18 ? 2 : 1,
         );
         expect(handleEnter.args[0].length).to.equal(2);
         expect(handleEntering.callCount).to.equal(1);
diff --git a/packages/mui-material/src/Popover/Popover.test.js b/packages/mui-material/src/Popover/Popover.test.js
index b6ba632a0d87ff..526027469d8c40 100644
--- a/packages/mui-material/src/Popover/Popover.test.js
+++ b/packages/mui-material/src/Popover/Popover.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy, stub, match } from 'sinon';
-import { act, createRenderer, screen } from '@mui/internal-test-utils';
+import { act, createRenderer, reactMajor, screen } from '@mui/internal-test-utils';
 import PropTypes from 'prop-types';
 import Modal from '@mui/material/Modal';
 import Paper, { paperClasses } from '@mui/material/Paper';
@@ -12,8 +12,6 @@ import useForkRef from '../utils/useForkRef';
 import styled from '../styles/styled';
 import describeConformance from '../../test/describeConformance';
 
-const reactVersion = Number(React.version.split('.')[0]);
-
 const FakePaper = React.forwardRef(function FakeWidthPaper(props, ref) {
   const handleMocks = React.useCallback((paperInstance) => {
     if (paperInstance) {
@@ -208,7 +206,7 @@ describe('<Popover />', () => {
 
       expect(handleEnter.callCount).to.equal(
         // onEnter is called on mount which is run twice with Strict Effects
-        reactVersion >= 18 ? 2 : 1,
+        reactMajor >= 18 ? 2 : 1,
       );
     });
 
@@ -247,7 +245,7 @@ describe('<Popover />', () => {
         onExiting: handleExiting.callCount,
       }).to.deep.equal({
         // onEnter is called on mount which is run twice with Strict Effects
-        onEnter: reactVersion >= 18 ? 2 : 1,
+        onEnter: reactMajor >= 18 ? 2 : 1,
         onEntering: 1,
         onEntered: 0,
         onExit: 0,
@@ -266,7 +264,7 @@ describe('<Popover />', () => {
         onExiting: handleExiting.callCount,
       }).to.deep.equal({
         // onEnter is called on mount which is run twice with Strict Effects
-        onEnter: reactVersion >= 18 ? 2 : 1,
+        onEnter: reactMajor >= 18 ? 2 : 1,
         onEntering: 1,
         onEntered: 1,
         onExit: 0,
@@ -285,7 +283,7 @@ describe('<Popover />', () => {
         onExiting: handleExiting.callCount,
       }).to.deep.equal({
         // onEnter is called on mount which is run twice with Strict Effects
-        onEnter: reactVersion >= 18 ? 2 : 1,
+        onEnter: reactMajor >= 18 ? 2 : 1,
         onEntering: 1,
         onEntered: 1,
         onExit: 1,
@@ -304,7 +302,7 @@ describe('<Popover />', () => {
         onExiting: handleExiting.callCount,
       }).to.deep.equal({
         // onEnter is called on mount which is run twice with Strict Effects
-        onEnter: reactVersion >= 18 ? 2 : 1,
+        onEnter: reactMajor >= 18 ? 2 : 1,
         onEntering: 1,
         onEntered: 1,
         onExit: 1,
diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js
index 5b06fb79dfecef..0dccad360bf2c2 100644
--- a/packages/mui-material/src/Select/Select.test.js
+++ b/packages/mui-material/src/Select/Select.test.js
@@ -1,8 +1,14 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy, stub } from 'sinon';
-import { ErrorBoundary, act, createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
-import getReactMajor from '@mui/utils/getReactMajor';
+import {
+  ErrorBoundary,
+  act,
+  createRenderer,
+  fireEvent,
+  screen,
+  reactMajor,
+} from '@mui/internal-test-utils';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import MenuItem, { menuItemClasses } from '@mui/material/MenuItem';
 import ListSubheader from '@mui/material/ListSubheader';
@@ -15,8 +21,6 @@ import classes from './selectClasses';
 import { nativeSelectClasses } from '../NativeSelect';
 import describeConformance from '../../test/describeConformance';
 
-const reactMajor = getReactMajor();
-
 describe('<Select />', () => {
   const { clock, render } = createRenderer({ clock: 'fake' });
 
diff --git a/packages/mui-material/src/Tabs/Tabs.test.js b/packages/mui-material/src/Tabs/Tabs.test.js
index e84d590d103b11..8b9f426c35e1ee 100644
--- a/packages/mui-material/src/Tabs/Tabs.test.js
+++ b/packages/mui-material/src/Tabs/Tabs.test.js
@@ -5,6 +5,7 @@ import {
   act,
   createRenderer,
   fireEvent,
+  reactMajor,
   screen,
   strictModeDoubleLoggingSuppressed,
   waitFor,
@@ -17,8 +18,6 @@ import { createSvgIcon } from '@mui/material/utils';
 import capitalize from '../utils/capitalize';
 import describeConformance from '../../test/describeConformance';
 
-const reactVersion = Number(React.version.split('.')[0]);
-
 const ArrowBackIcon = createSvgIcon(<path d="M3 3h18v18H3z" />, 'ArrowBack');
 const ArrowForwardIcon = createSvgIcon(<path d="M3 3h18v18H3z" />, 'ArrowForward');
 
@@ -360,10 +359,10 @@ describe('<Tabs />', () => {
         }).toErrorDev([
           'You can provide one of the following values: 1, 3',
           // React 18 Strict Effects run mount effects twice
-          reactVersion === 18 && 'You can provide one of the following values: 1, 3',
+          reactMajor === 18 && 'You can provide one of the following values: 1, 3',
           'You can provide one of the following values: 1, 3',
           // React 18 Strict Effects run mount effects twice
-          reactVersion === 18 && 'You can provide one of the following values: 1, 3',
+          reactMajor === 18 && 'You can provide one of the following values: 1, 3',
           'You can provide one of the following values: 1, 3',
           'You can provide one of the following values: 1, 3',
         ]);
diff --git a/packages/mui-material/src/Tooltip/Tooltip.test.js b/packages/mui-material/src/Tooltip/Tooltip.test.js
index 69cb616337e416..0a4d51d7a2fa39 100644
--- a/packages/mui-material/src/Tooltip/Tooltip.test.js
+++ b/packages/mui-material/src/Tooltip/Tooltip.test.js
@@ -9,6 +9,7 @@ import {
   simulatePointerDevice,
   focusVisible,
   programmaticFocusTriggersFocusVisible,
+  reactMajor,
 } from '@mui/internal-test-utils';
 import { camelCase } from 'lodash/string';
 import Tooltip, { tooltipClasses as classes } from '@mui/material/Tooltip';
@@ -1057,7 +1058,12 @@ describe('<Tooltip />', () => {
       );
     });
 
-    it('should warn when children is a string', () => {
+    it('should warn when children is a string', function test() {
+      if (reactMajor >= 19) {
+        // React 19 removed prop types support
+        this.skip();
+      }
+
       expect(() => {
         render(<Tooltip title="Hello World">Hello World</Tooltip>);
       }).toErrorDev('Invalid prop `children` of type `string` supplied');
diff --git a/packages/mui-material/src/internal/SwitchBase.test.js b/packages/mui-material/src/internal/SwitchBase.test.js
index aae43ff74d655c..7e177979efa1ba 100644
--- a/packages/mui-material/src/internal/SwitchBase.test.js
+++ b/packages/mui-material/src/internal/SwitchBase.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { act, createRenderer } from '@mui/internal-test-utils';
+import { act, createRenderer, reactMajor } from '@mui/internal-test-utils';
 import SwitchBase from './SwitchBase';
 import FormControl, { useFormControl } from '../FormControl';
 import ButtonBase from '../ButtonBase';
@@ -9,8 +9,6 @@ import classes from './switchBaseClasses';
 import describeConformance from '../../test/describeConformance';
 import * as ripple from '../../test/ripple';
 
-const reactVersion = Number(React.version.split('.')[0]);
-
 describe('<SwitchBase />', () => {
   const { render } = createRenderer();
 
@@ -412,11 +410,11 @@ describe('<SwitchBase />', () => {
         setProps({ checked: true });
         global.didWarnControlledToUncontrolled = true;
       }).toErrorDev([
-        reactVersion === 16 &&
+        reactMajor === 16 &&
           'Warning: A component is changing an uncontrolled input of type checkbox to be controlled.',
-        reactVersion >= 19 && 'A component is changing an uncontrolled input to be controlled.',
-        reactVersion < 19 &&
-          reactVersion !== 16 &&
+        reactMajor >= 19 && 'A component is changing an uncontrolled input to be controlled.',
+        reactMajor < 19 &&
+          reactMajor !== 16 &&
           'Warning: A component is changing an uncontrolled input to be controlled.',
         'MUI: A component is changing the uncontrolled checked state of SwitchBase to be controlled.',
       ]);
@@ -438,11 +436,11 @@ describe('<SwitchBase />', () => {
         setProps({ checked: undefined });
         global.didWarnControlledToUncontrolled = true;
       }).toErrorDev([
-        reactVersion === 16 &&
+        reactMajor === 16 &&
           'Warning: A component is changing an uncontrolled input of type checkbox to be controlled.',
-        reactVersion >= 19 && 'A component is changing an uncontrolled input to be controlled.',
-        reactVersion < 19 &&
-          reactVersion !== 16 &&
+        reactMajor >= 19 && 'A component is changing an uncontrolled input to be controlled.',
+        reactMajor < 19 &&
+          reactMajor !== 16 &&
           'Warning: A component is changing an uncontrolled input to be controlled.',
         'MUI: A component is changing the controlled checked state of SwitchBase to be uncontrolled.',
       ]);
diff --git a/packages/mui-material/src/useAutocomplete/useAutocomplete.test.js b/packages/mui-material/src/useAutocomplete/useAutocomplete.test.js
index 8a75e5de7b5843..847959561a33f3 100644
--- a/packages/mui-material/src/useAutocomplete/useAutocomplete.test.js
+++ b/packages/mui-material/src/useAutocomplete/useAutocomplete.test.js
@@ -1,7 +1,13 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, screen, ErrorBoundary, act, fireEvent } from '@mui/internal-test-utils';
-import getReactMajor from '@mui/utils/getReactMajor';
+import {
+  createRenderer,
+  screen,
+  ErrorBoundary,
+  act,
+  fireEvent,
+  reactMajor,
+} from '@mui/internal-test-utils';
 import { spy } from 'sinon';
 import useAutocomplete, { createFilterOptions } from '@mui/material/useAutocomplete';
 
@@ -309,8 +315,6 @@ describe('useAutocomplete', () => {
       ],
     };
 
-    const reactMajor = getReactMajor();
-
     const devErrorMessages = errorMessagesByReactMajor[reactMajor] || defaultErrorMessages;
 
     expect(() => {
diff --git a/packages/mui-styles/src/makeStyles/makeStyles.test.js b/packages/mui-styles/src/makeStyles/makeStyles.test.js
index 7d715461995be9..58487812fdca6f 100644
--- a/packages/mui-styles/src/makeStyles/makeStyles.test.js
+++ b/packages/mui-styles/src/makeStyles/makeStyles.test.js
@@ -2,8 +2,13 @@ import { expect } from 'chai';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { SheetsRegistry } from 'jss';
-import { createRenderer, screen, renderHook, fireEvent } from '@mui/internal-test-utils';
-import getReactMajor from '@mui/utils/getReactMajor';
+import {
+  createRenderer,
+  screen,
+  renderHook,
+  fireEvent,
+  reactMajor,
+} from '@mui/internal-test-utils';
 import { createTheme } from '@mui/material/styles';
 import createGenerateClassName from '../createGenerateClassName';
 import makeStyles from './makeStyles';
@@ -82,7 +87,6 @@ describe('makeStyles', () => {
     it('should warn if missing theme', () => {
       const useStyles2 = makeStyles((theme) => ({ root: { padding: theme.spacing(2) } }));
 
-      const reactMajor = getReactMajor();
       const muiErrorMessage =
         'MUI: The `styles` argument provided is invalid.\nYou are providing a function without a theme in the context.';
       const nodeErrorMessage = 'TypeError: theme.spacing is not a function';
diff --git a/packages/mui-utils/src/elementAcceptingRef/elementAcceptingRef.test.tsx b/packages/mui-utils/src/elementAcceptingRef/elementAcceptingRef.test.tsx
index 5a06cdb42f7dec..414df07d9519a1 100644
--- a/packages/mui-utils/src/elementAcceptingRef/elementAcceptingRef.test.tsx
+++ b/packages/mui-utils/src/elementAcceptingRef/elementAcceptingRef.test.tsx
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import PropTypes from 'prop-types';
-import { createRenderer, waitFor } from '@mui/internal-test-utils';
+import { createRenderer, waitFor, reactMajor } from '@mui/internal-test-utils';
 import elementAcceptingRef from './elementAcceptingRef';
 
 describe('elementAcceptingRef', () => {
@@ -22,6 +22,13 @@ describe('elementAcceptingRef', () => {
   });
 
   describe('acceptance when not required', () => {
+    before(function beforeCallback() {
+      if (reactMajor >= 19) {
+        // React 19 removed prop types support
+        this.skip();
+      }
+    });
+
     function assertPass(element: any, { shouldMount = true } = {}) {
       function testAct() {
         checkPropType(element);
@@ -107,6 +114,13 @@ describe('elementAcceptingRef', () => {
   });
 
   describe('rejections', () => {
+    before(function beforeCallback() {
+      if (reactMajor >= 19) {
+        // React 19 removed prop types support
+        this.skip();
+      }
+    });
+
     function assertFail(Component: any, hint: string) {
       expect(() => {
         checkPropType(Component);
diff --git a/packages/mui-utils/src/getReactMajor/getReactMajor.ts b/packages/mui-utils/src/getReactMajor/getReactMajor.ts
deleted file mode 100644
index 26892cdf34e1e9..00000000000000
--- a/packages/mui-utils/src/getReactMajor/getReactMajor.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as React from 'react';
-
-export default function getReactMajor(): number {
-  return Number(React.version.split('.')[0]);
-}
diff --git a/packages/mui-utils/src/getReactMajor/index.ts b/packages/mui-utils/src/getReactMajor/index.ts
deleted file mode 100644
index bdb8d39bc492c8..00000000000000
--- a/packages/mui-utils/src/getReactMajor/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './getReactMajor';
diff --git a/packages/mui-utils/src/index.ts b/packages/mui-utils/src/index.ts
index 4a65a59a3b395f..0cd2308d8650e5 100644
--- a/packages/mui-utils/src/index.ts
+++ b/packages/mui-utils/src/index.ts
@@ -46,5 +46,4 @@ export type { UseSlotPropsParameters, UseSlotPropsResult } from './useSlotProps'
 export { default as unstable_resolveComponentProps } from './resolveComponentProps';
 export { default as unstable_extractEventHandlers } from './extractEventHandlers';
 export { default as unstable_getReactNodeRef } from './getReactNodeRef';
-export { default as unstable_getReactMajor } from './getReactMajor';
 export * from './types';

From 318a6a1c62392a1139c8dd74dae1e9937c55e9ab Mon Sep 17 00:00:00 2001
From: DiegoAndai <diego@mui.com>
Date: Fri, 2 Aug 2024 13:37:44 -0400
Subject: [PATCH 4/5] Fix tests for versions prior to 19

---
 .../src/Autocomplete/Autocomplete.test.tsx    |  6 +++++-
 .../src/Autocomplete/Autocomplete.test.js     |  6 +++++-
 packages/mui-material/src/Grid/Grid.test.js   | 19 +++++++++++++++++--
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
index 0bcd18a9fce0fe..a16babc2e82450 100644
--- a/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
+++ b/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
@@ -2287,7 +2287,11 @@ describe('Joy <Autocomplete />', () => {
       checkHighlightIs(getByRole('listbox'), 'one');
       setProps({ options: ['four', 'five'] });
       checkHighlightIs(getByRole('listbox'), 'four');
-      expect(handleHighlightChange).to.deep.equal([null, 'one', 'one', 'four']);
+
+      const expectedCallHistory =
+        reactMajor === 19 ? [null, 'one', 'one', 'four'] : [null, 'one', 'four'];
+
+      expect(handleHighlightChange).to.deep.equal(expectedCallHistory);
     });
   });
 
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
index 1afa904b95d20a..809d691cfdc5ec 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
@@ -3002,7 +3002,11 @@ describe('<Autocomplete />', () => {
       checkHighlightIs(getByRole('listbox'), 'one');
       setProps({ options: ['four', 'five'] });
       checkHighlightIs(getByRole('listbox'), 'four');
-      expect(handleHighlightChange).to.deep.equal([null, 'one', 'one', 'four']);
+
+      const expectedCallHistory =
+        reactMajor === 19 ? [null, 'one', 'one', 'four'] : [null, 'one', 'four'];
+
+      expect(handleHighlightChange).to.deep.equal(expectedCallHistory);
     });
   });
 
diff --git a/packages/mui-material/src/Grid/Grid.test.js b/packages/mui-material/src/Grid/Grid.test.js
index 4f5599e7281906..dd2c069b9ff9da 100644
--- a/packages/mui-material/src/Grid/Grid.test.js
+++ b/packages/mui-material/src/Grid/Grid.test.js
@@ -647,7 +647,12 @@ describe('Material UI <Grid />', () => {
       });
     });
 
-    it('should ignore grid item with spacing object', () => {
+    it('should ignore grid item with spacing object', function test() {
+      if (reactMajor < 19) {
+        // React 19 removed prop types support
+        this.skip();
+      }
+
       const theme = createTheme({
         breakpoints: {
           keys: ['mobile', 'desktop'],
@@ -693,9 +698,19 @@ describe('Material UI <Grid />', () => {
         this.skip();
       }
 
+      const theme = createTheme({
+        breakpoints: {
+          keys: ['mobile', 'desktop'],
+          values: {
+            mobile: 0,
+            desktop: 1200,
+          },
+        },
+      });
+
       expect(() => {
         render(
-          <ThemeProvider>
+          <ThemeProvider theme={theme}>
             <Grid item spacing={{ mobile: 1, desktop: 3 }} />
           </ThemeProvider>,
         );

From ff53059ecd3bc9559006f0df52a00bbecd17137a Mon Sep 17 00:00:00 2001
From: DiegoAndai <diego@mui.com>
Date: Mon, 5 Aug 2024 12:31:02 -0400
Subject: [PATCH 5/5] Future proof React 19 test changes

---
 .../src/useAutocomplete/useAutocomplete.test.js  | 16 ++++++++--------
 .../src/Autocomplete/Autocomplete.test.tsx       |  8 ++++----
 packages/mui-lab/src/Masonry/Masonry.test.js     |  2 +-
 .../src/Autocomplete/Autocomplete.test.js        |  8 ++++----
 packages/mui-material/src/Select/Select.test.js  |  3 +--
 .../src/useAutocomplete/useAutocomplete.test.js  | 16 ++++++++--------
 .../mui-styles/src/makeStyles/makeStyles.test.js |  2 +-
 7 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js b/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js
index b148ddbcc10cf3..ea2198ba61c93e 100644
--- a/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js
+++ b/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js
@@ -293,16 +293,16 @@ describe('useAutocomplete', () => {
     const nodeVersion = Number(process.versions.node.split('.')[0]);
     const nodeErrorMessage = nodeVersion >= 16 ? node16ErrorMessage : olderNodeErrorMessage;
 
-    const defaultErrorMessages = [
-      nodeErrorMessage,
-      muiErrorMessage,
-      nodeErrorMessage,
-      aboveErrorUlElementMessage,
-      aboveErrorTestComponentMessage,
-    ];
+    const defaultErrorMessages = [muiErrorMessage, nodeErrorMessage, nodeErrorMessage];
 
     const errorMessagesByReactMajor = {
-      19: [muiErrorMessage, nodeErrorMessage, nodeErrorMessage],
+      17: [
+        nodeErrorMessage,
+        muiErrorMessage,
+        nodeErrorMessage,
+        aboveErrorUlElementMessage,
+        aboveErrorTestComponentMessage,
+      ],
       18: [
         nodeErrorMessage,
         muiErrorMessage,
diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
index a16babc2e82450..3a080d07f1df77 100644
--- a/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
+++ b/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
@@ -1212,12 +1212,12 @@ describe('Joy <Autocomplete />', () => {
 
       const errorMessage = 'None of the options match with `"not a good value"`';
 
-      let expectedOccurrences = 2;
+      let expectedOccurrences = 4;
 
       if (reactMajor === 18) {
         expectedOccurrences = 6;
-      } else if (reactMajor === 19) {
-        expectedOccurrences = 4;
+      } else if (reactMajor === 17) {
+        expectedOccurrences = 2;
       }
 
       expect(() => {
@@ -2289,7 +2289,7 @@ describe('Joy <Autocomplete />', () => {
       checkHighlightIs(getByRole('listbox'), 'four');
 
       const expectedCallHistory =
-        reactMajor === 19 ? [null, 'one', 'one', 'four'] : [null, 'one', 'four'];
+        reactMajor >= 19 ? [null, 'one', 'one', 'four'] : [null, 'one', 'four'];
 
       expect(handleHighlightChange).to.deep.equal(expectedCallHistory);
     });
diff --git a/packages/mui-lab/src/Masonry/Masonry.test.js b/packages/mui-lab/src/Masonry/Masonry.test.js
index 14c82fb9aaadf1..790ff5e3a16c19 100644
--- a/packages/mui-lab/src/Masonry/Masonry.test.js
+++ b/packages/mui-lab/src/Masonry/Masonry.test.js
@@ -100,7 +100,7 @@ describe('<Masonry />', () => {
     });
 
     it('should throw console error when children are empty', function test() {
-      if (!/jsdom/.test(window.navigator.userAgent) || reactMajor === 19) {
+      if (!/jsdom/.test(window.navigator.userAgent) || reactMajor >= 19) {
         this.skip();
       }
       expect(() => render(<Masonry columns={3} spacing={1} />)).toErrorDev(
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
index 809d691cfdc5ec..4cea6195fb534c 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
@@ -1725,12 +1725,12 @@ describe('<Autocomplete />', () => {
 
       const errorMessage = 'None of the options match with `"not a good value"`';
 
-      let expectedOccurrences = 2;
+      let expectedOccurrences = 4;
 
       if (reactMajor === 18) {
         expectedOccurrences = 6;
-      } else if (reactMajor === 19) {
-        expectedOccurrences = 4;
+      } else if (reactMajor === 17) {
+        expectedOccurrences = 2;
       }
 
       expect(() => {
@@ -3004,7 +3004,7 @@ describe('<Autocomplete />', () => {
       checkHighlightIs(getByRole('listbox'), 'four');
 
       const expectedCallHistory =
-        reactMajor === 19 ? [null, 'one', 'one', 'four'] : [null, 'one', 'four'];
+        reactMajor >= 19 ? [null, 'one', 'one', 'four'] : [null, 'one', 'four'];
 
       expect(handleHighlightChange).to.deep.equal(expectedCallHistory);
     });
diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js
index 0dccad360bf2c2..c135d483a9fae7 100644
--- a/packages/mui-material/src/Select/Select.test.js
+++ b/packages/mui-material/src/Select/Select.test.js
@@ -1186,8 +1186,7 @@ describe('<Select />', () => {
           'MUI: The `value` prop must be an array',
           // React 18 Strict Effects run mount effects twice
           reactMajor === 18 && 'MUI: The `value` prop must be an array',
-          reactMajor !== 19 &&
-            'The above error occurred in the <ForwardRef(SelectInput)> component',
+          reactMajor < 19 && 'The above error occurred in the <ForwardRef(SelectInput)> component',
         ]);
         const {
           current: { errors },
diff --git a/packages/mui-material/src/useAutocomplete/useAutocomplete.test.js b/packages/mui-material/src/useAutocomplete/useAutocomplete.test.js
index 847959561a33f3..285be9ecad2a62 100644
--- a/packages/mui-material/src/useAutocomplete/useAutocomplete.test.js
+++ b/packages/mui-material/src/useAutocomplete/useAutocomplete.test.js
@@ -293,16 +293,16 @@ describe('useAutocomplete', () => {
     const nodeVersion = Number(process.versions.node.split('.')[0]);
     const nodeErrorMessage = nodeVersion >= 16 ? node16ErrorMessage : olderNodeErrorMessage;
 
-    const defaultErrorMessages = [
-      nodeErrorMessage,
-      muiErrorMessage,
-      nodeErrorMessage,
-      aboveErrorUlElementMessage,
-      aboveErrorTestComponentMessage,
-    ];
+    const defaultErrorMessages = [muiErrorMessage, nodeErrorMessage, nodeErrorMessage];
 
     const errorMessagesByReactMajor = {
-      19: [muiErrorMessage, nodeErrorMessage, nodeErrorMessage],
+      17: [
+        nodeErrorMessage,
+        muiErrorMessage,
+        nodeErrorMessage,
+        aboveErrorUlElementMessage,
+        aboveErrorTestComponentMessage,
+      ],
       18: [
         nodeErrorMessage,
         muiErrorMessage,
diff --git a/packages/mui-styles/src/makeStyles/makeStyles.test.js b/packages/mui-styles/src/makeStyles/makeStyles.test.js
index 58487812fdca6f..b156125e86a1f6 100644
--- a/packages/mui-styles/src/makeStyles/makeStyles.test.js
+++ b/packages/mui-styles/src/makeStyles/makeStyles.test.js
@@ -93,7 +93,7 @@ describe('makeStyles', () => {
 
       let devErrorMessages = [muiErrorMessage, muiErrorMessage];
 
-      if (reactMajor !== 19) {
+      if (reactMajor < 19) {
         devErrorMessages = [
           ...devErrorMessages,
           nodeErrorMessage,