[code-infra] Fix StrictMode effects not being called twice in React 19 tests (#45812)

Author: bernardobelchior

.mocharc.js

@@ -20,4 +20,7 @@ module.exports = {
     '**/build/**',
     'docs/.next/**',
   ],
+  // detect-modules doesn't work with @babel/register
+  // https://github.com/babel/babel/issues/6737
+  'node-option': ['no-experimental-detect-module'],
 };

package.json

@@ -132,6 +132,7 @@
     "@pigment-css/react": "0.0.30",
     "@playwright/test": "1.51.1",
     "@types/babel__core": "^7.20.5",
+    "@types/babel__register": "^7.17.3",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash": "^4.17.16",
     "@types/mocha": "^10.0.10",

packages-internal/test-utils/src/createRenderer.tsx

@@ -12,6 +12,7 @@ import {
   screen as rtlScreen,
   Screen,
   render as testingLibraryRender,
+  RenderOptions as TestingLibraryRenderOptions,
   within,
 } from '@testing-library/react/pure';
 import { userEvent } from '@testing-library/user-event';
@@ -201,7 +202,7 @@ const customQueries = {
   findAllDescriptionsOf,
 };
 
-interface RenderConfiguration {
+interface RenderConfiguration extends Pick<TestingLibraryRenderOptions, 'reactStrictMode'> {
   /**
    * https://testing-library.com/docs/react-testing-library/api#container
    */
@@ -232,7 +233,7 @@ interface ServerRenderConfiguration extends RenderConfiguration {
   container: HTMLElement;
 }
 
-export type RenderOptions = Partial<RenderConfiguration>;
+export type RenderOptions = Omit<Partial<RenderConfiguration>, 'reactStrictMode'>;
 
 export interface MuiRenderResult extends RenderResult<typeof queries & typeof customQueries> {
   user: ReturnType<typeof userEvent.setup>;
@@ -256,14 +257,15 @@ function render(
   element: React.ReactElement<DataAttributes>,
   configuration: ClientRenderConfiguration,
 ): MuiRenderResult {
-  const { container, hydrate, wrapper } = configuration;
+  const { container, hydrate, wrapper, reactStrictMode } = configuration;
 
   const testingLibraryRenderResult = traceSync('render', () =>
     testingLibraryRender(element, {
       container,
       hydrate,
       queries: { ...queries, ...customQueries },
       wrapper,
+      reactStrictMode,
     }),
   );
   const result: MuiRenderResult = {
@@ -628,24 +630,16 @@ export function createRenderer(globalOptions: CreateRendererOptions = {}): Rende
     serverContainer = null!;
   });
 
-  function createWrapper(options: Partial<RenderConfiguration>) {
-    const {
-      strict = globalStrict,
-      strictEffects = globalStrictEffects,
-      wrapper: InnerWrapper = React.Fragment,
-    } = options;
+  function createWrapper(options: Pick<RenderOptions, 'wrapper'>) {
+    const { wrapper: InnerWrapper = React.Fragment } = options;
 
-    const usesLegacyRoot = reactMajor < 18;
-    const Mode = strict && (strictEffects || usesLegacyRoot) ? React.StrictMode : React.Fragment;
     return function Wrapper({ children }: { children?: React.ReactNode }) {
       return (
-        <Mode>
-          <EmotionCacheProvider value={emotionCache}>
-            <React.Profiler id={profiler.id} onRender={profiler.onRender}>
-              <InnerWrapper>{children}</InnerWrapper>
-            </React.Profiler>
-          </EmotionCacheProvider>
-        </Mode>
+        <EmotionCacheProvider value={emotionCache}>
+          <React.Profiler id={profiler.id} onRender={profiler.onRender}>
+            <InnerWrapper>{children}</InnerWrapper>
+          </React.Profiler>
+        </EmotionCacheProvider>
       );
     };
   }
@@ -661,8 +655,14 @@ export function createRenderer(globalOptions: CreateRendererOptions = {}): Rende
         );
       }
 
+      const usesLegacyRoot = reactMajor < 18;
+      const reactStrictMode =
+        (options.strict ?? globalStrict) &&
+        ((options.strictEffects ?? globalStrictEffects) || usesLegacyRoot);
+
       return render(element, {
         ...options,
+        reactStrictMode,
         hydrate: false,
         wrapper: createWrapper(options),
       });

packages-internal/test-utils/src/setupBabel.js

@@ -1,3 +1,3 @@
 require('@babel/register')({
-  extensions: ['.js', '.mjs', '.ts', '.tsx'],
+  extensions: ['.js', '.mjs', '.cjs', '.jsx', '.ts', '.tsx'],
 });

packages/mui-base/src/FocusTrap/FocusTrap.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { expect } from 'chai';
-import { act, createRenderer, screen } from '@mui/internal-test-utils';
+import { act, createRenderer, reactMajor, screen } from '@mui/internal-test-utils';
 import { FocusTrap } from '@mui/base/FocusTrap';
 import { Portal } from '@mui/base/Portal';
 
@@ -219,7 +219,7 @@ describe('<FocusTrap />', () => {
         </div>
       );
     }
-    const { setProps, getByRole } = render(<Test />);
+    const { setProps, getByRole } = render(<Test />, { strict: reactMajor <= 18 });
     expect(screen.getByTestId('root')).toHaveFocus();
 
     act(() => {

packages/mui-base/src/Input/Input.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { createRenderer, fireEvent, screen, act } from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, screen, act, reactMajor } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { Input, inputClasses, InputOwnerState } from '@mui/base/Input';
@@ -281,8 +281,8 @@ describe('<Input />', () => {
         );
       }).toErrorDev([
         'MUI: You have provided a `slots.input` 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') &&
+        // React Strict Mode runs mount effects twice
+        reactMajor >= 18 &&
           'MUI: You have provided a `slots.input` to the input component\nthat does not correctly handle the `ref` prop.\nMake sure the `ref` prop is called with a HTMLInputElement.',
       ]);
     });

packages/mui-base/src/Portal/Portal.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer } from '@mui/internal-test-utils';
+import { createRenderer, reactMajor } from '@mui/internal-test-utils';
 import { Portal, PortalProps } from '@mui/base/Portal';
 
 describe('<Portal />', () => {
@@ -44,6 +44,7 @@ describe('<Portal />', () => {
         <Portal disablePortal ref={refSpy}>
           <h1 className="woofPortal">Foo</h1>
         </Portal>,
+        { strict: reactMajor <= 18 },
       );
       const mountNode = document.querySelector('.woofPortal');
       expect(refSpy.args).to.deep.equal([[mountNode]]);
@@ -57,6 +58,7 @@ describe('<Portal />', () => {
         <Portal disablePortal ref={refSpy}>
           <h1 className="woofPortal">Foo</h1>
         </Portal>,
+        { strict: reactMajor <= 18 },
       );
       const mountNode = document.querySelector('.woofPortal');
       expect(refSpy.args).to.deep.equal([[mountNode]]);

packages/mui-base/src/useAutocomplete/useAutocomplete.test.js

@@ -313,6 +313,14 @@ describe('useAutocomplete', () => {
         aboveErrorTestComponentMessage,
         aboveErrorTestComponentMessage,
       ],
+      19: [
+        muiErrorMessage,
+        muiErrorMessage,
+        nodeErrorMessage,
+        nodeErrorMessage,
+        nodeErrorMessage,
+        nodeErrorMessage,
+      ],
     };
 
     const devErrorMessages = errorMessagesByReactMajor[reactMajor] || defaultErrorMessages;

packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx

@@ -1931,7 +1931,8 @@ describe('Joy <Autocomplete />', () => {
 
       await user.click(screen.getByText('Reset'));
 
-      const expectedCallCount = reactMajor === 18 ? 4 : 2;
+      // eslint-disable-next-line no-nested-ternary
+      const expectedCallCount = reactMajor >= 19 ? 3 : reactMajor === 18 ? 4 : 2;
 
       expect(handleInputChange.callCount).to.equal(expectedCallCount);
       expect(handleInputChange.args[expectedCallCount - 1][1]).to.equal(options[1].name);
@@ -2209,7 +2210,8 @@ describe('Joy <Autocomplete />', () => {
 
       expect(handleHighlightChange.callCount).to.equal(
         // FIXME: highlighted index implementation should be implemented using React not the DOM.
-        reactMajor >= 18 ? 4 : 3,
+        // eslint-disable-next-line no-nested-ternary
+        reactMajor >= 19 ? 5 : reactMajor >= 18 ? 4 : 3,
       );
       if (reactMajor >= 18) {
         expect(handleHighlightChange.args[2][0]).to.equal(undefined);
@@ -2223,7 +2225,8 @@ 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.
-        reactMajor >= 18 ? 5 : 4,
+        // eslint-disable-next-line no-nested-ternary
+        reactMajor >= 19 ? 6 : reactMajor >= 18 ? 5 : 4,
       );
       expect(handleHighlightChange.lastCall.args[0]).not.to.equal(undefined);
       expect(handleHighlightChange.lastCall.args[1]).to.equal(options[1]);
@@ -2240,7 +2243,8 @@ describe('Joy <Autocomplete />', () => {
       fireEvent.mouseMove(firstOption);
       expect(handleHighlightChange.callCount).to.equal(
         // FIXME: highlighted index implementation should be implemented using React not the DOM.
-        reactMajor >= 18 ? 4 : 3,
+        // eslint-disable-next-line no-nested-ternary
+        reactMajor >= 19 ? 5 : reactMajor >= 18 ? 4 : 3,
       );
       if (reactMajor >= 18) {
         expect(handleHighlightChange.args[2][0]).to.equal(undefined);

packages/mui-material/src/InputBase/InputBase.test.js

@@ -282,7 +282,7 @@ describe('<InputBase />', () => {
 
         let expectedOccurrences = 1;
 
-        if (reactMajor === 18) {
+        if (reactMajor >= 18) {
           expectedOccurrences = 2;
         }
 
@@ -507,7 +507,7 @@ describe('<InputBase />', () => {
 
         let expectedOccurrences = 1;
 
-        if (reactMajor === 18) {
+        if (reactMajor >= 18) {
           expectedOccurrences = 2;
         }
         expect(() => {