[code-infra] Use reactStrictMode from @testing-library/react

Author: bernardobelchior

packages-internal/test-utils/package.json

@@ -40,7 +40,7 @@
     "@emotion/cache": "^11.13.5",
     "@emotion/react": "^11.13.5",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.2.0",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "chai": "^4.5.0",
     "chai-dom": "^1.12.1",

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
    */
@@ -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/mui-base/package.json

@@ -51,7 +51,7 @@
   "devDependencies": {
     "@mui/internal-test-utils": "workspace:^",
     "@mui/types": "workspace:^",
-    "@testing-library/react": "^16.2.0",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/chai": "^4.3.20",
     "@types/prop-types": "^15.7.14",