[code-infra] Stabilize fake timers in regression tests (#19719)

Author: Janpot

test/regressions/TestViewer.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { useLocation } from 'react-router';
 import { styled } from '@mui/material/styles';
 import GlobalStyles from '@mui/material/GlobalStyles';
-import { fakeClock, setupFakeClock } from '../utils/setupFakeClock'; // eslint-disable-line
+// eslint-disable-next-line import/no-relative-packages
+import { fakeClock, setupFakeClock } from '../utils/setupFakeClock';
 
 const StyledBox = styled('div', {
   shouldForwardProp: (prop) => prop !== 'isDataGridTest' && prop !== 'isDataGridPivotTest',
@@ -75,15 +76,16 @@ function TestViewer(props: any) {
 }
 
 function MockTime(props: React.PropsWithChildren<{ shouldAdvanceTime: boolean }>) {
-  const [ready, setReady] = React.useState(false);
+  const [dispose, setDispose] = React.useState<(() => void) | null>(null);
+  const [prevShouldAdvanceTime, setPrevShouldAdvanceTime] = React.useState(props.shouldAdvanceTime);
 
-  React.useEffect(() => {
-    const dispose = setupFakeClock(props.shouldAdvanceTime);
-    setReady(true);
-    return dispose;
-  }, [props.shouldAdvanceTime]);
+  if (!dispose || prevShouldAdvanceTime !== props.shouldAdvanceTime) {
+    dispose?.();
+    setDispose(() => setupFakeClock(props.shouldAdvanceTime));
+    setPrevShouldAdvanceTime(props.shouldAdvanceTime);
+  }
 
-  return ready ? props.children : null;
+  return props.children;
 }
 
 function LoadFont(props: any) {

test/regressions/index.tsx

@@ -2,10 +2,12 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { createBrowserRouter, RouterProvider, Outlet, NavLink, useNavigate } from 'react-router';
 import { Globals } from '@react-spring/web';
-import { setupFakeClock, restoreFakeClock } from '../utils/setupFakeClock'; // eslint-disable-line
-import { generateTestLicenseKey, setupTestLicenseKey } from '../utils/testLicense'; // eslint-disable-line
+// eslint-disable-next-line import/no-relative-packages
+import '../utils/setupFakeClock';
+// eslint-disable-next-line import/no-relative-packages
+import { generateTestLicenseKey, setupTestLicenseKey } from '../utils/testLicense';
 import TestViewer from './TestViewer';
-import type { Test } from './testsBySuite';
+import { type Test, testsBySuite } from './testsBySuite';
 
 setupTestLicenseKey(generateTestLicenseKey(new Date('2099-01-01')));
 
@@ -29,17 +31,9 @@ window.muiFixture = {
   },
 };
 
-let testsBySuite: typeof import('./testsBySuite').testsBySuite;
-
 main();
 
 async function main() {
-  setupFakeClock();
-
-  testsBySuite = (await import('./testsBySuite')).testsBySuite;
-
-  restoreFakeClock();
-
   ReactDOM.createRoot(document.getElementById('react-root')!).render(<App />);
 }
 

test/regressions/vite.config.mts

@@ -1,6 +1,7 @@
 import path from 'path';
 import { defineConfig, transformWithEsbuild } from 'vite';
 import react from '@vitejs/plugin-react';
+import * as fs from 'fs/promises';
 import { alias } from '../../vitest.shared.mts';
 
 export default defineConfig({
@@ -20,6 +21,26 @@ export default defineConfig({
   worker: {
     format: 'es',
   },
+  optimizeDeps: {
+    esbuildOptions: {
+      plugins: [
+        {
+          name: 'js-as-jsx',
+          setup(build) {
+            build.onLoad({ filter: /\.js$/ }, async (args) => {
+              if (args.path.includes('/node_modules/')) {
+                return null;
+              }
+
+              const contents = await fs.readFile(args.path, 'utf8');
+
+              return { contents, loader: 'jsx' };
+            });
+          },
+        },
+      ],
+    },
+  },
   plugins: [
     react(),
     {