diff --git a/packages-internal/test-utils/src/createRenderer.tsx b/packages-internal/test-utils/src/createRenderer.tsx index 170c179a7a862c..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 = !React.version.startsWith('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 65157f9acf9689..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 (React.version.startsWith('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 7bf5cd34950572..ada372c3c4eae5 100644 --- a/packages-internal/test-utils/src/userEvent.ts +++ b/packages-internal/test-utils/src/userEvent.ts @@ -1,6 +1,6 @@ -import * as React from 'react'; import { click, mouseDown, mouseUp, keyDown, keyUp } from './fireDiscreteEvent'; import { act, fireEvent } from './createRenderer'; +import reactMajor from './reactMajor'; export function touch(target: Element): void { fireEvent.touchStart(target); @@ -11,7 +11,7 @@ export const mousePress: (...args: Parameters<(typeof fireEvent)['mouseUp']>) => target, options, ) => { - if (React.version.startsWith('18')) { + if (reactMajor >= 18) { fireEvent.mouseDown(target, options); fireEvent.mouseUp(target, options); fireEvent.click(target, options); @@ -24,7 +24,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 (reactMajor >= 18) { fireEvent.keyDown(target, options); fireEvent.keyUp(target, options); } else { 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('', () => { }} />, ); - }).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 72ac62297340d0..ea2198ba61c93e 100644 --- a/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js +++ b/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js @@ -1,6 +1,13 @@ 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'; @@ -276,28 +283,39 @@ describe('useAutocomplete', () => { ); } + const muiErrorMessage = 'MUI: Unable to find the input element.'; + const aboveErrorUlElementMessage = 'The above error occurred in the