[test] Speed up regression and E2E tests (#1354)

test/e2e/TestViewer.tsx

@@ -12,11 +12,9 @@ function TestViewer(props: { children: React.ReactNode }) {
   }, []);
 
   return (
-    <React.Suspense fallback={<div aria-busy />}>
-      <div aria-busy={!ready} data-testid="testcase">
-        {children}
-      </div>
-    </React.Suspense>
+    <div aria-busy={!ready} data-testid="testcase">
+      {children}
+    </div>
   );
 }
 

test/e2e/main.tsx

@@ -6,27 +6,32 @@ import TestViewer from './TestViewer';
 import 'docs/src/styles.css';
 
 interface Fixture {
-  Component: React.LazyExoticComponent<React.ComponentType<any>>;
+  Component: React.ComponentType<any>;
   name: string;
   path: string;
   suite: string;
 }
 
 const globbedFixtures = import.meta.glob<{ default: React.ComponentType<unknown> }>(
   './fixtures/**/*.{js,jsx,ts,tsx}',
+  {
+    eager: true,
+  },
 );
+
 const fixtures: Fixture[] = [];
 
 for (const path in globbedFixtures) {
   const [suite, name] = path
     .replace('./', '')
     .replace(/\.\w+$/, '')
     .split('/');
+
   fixtures.push({
     path,
     suite: `e2e-${suite}`,
     name,
-    Component: React.lazy(() => globbedFixtures[path]()),
+    Component: globbedFixtures[path].default,
   });
 }
 

test/regressions/TestViewer.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useFakeTimers } from 'sinon';
 
 function TestViewer(props: { children: React.ReactNode }) {
   const { children } = props;
@@ -24,12 +23,6 @@ function TestViewer(props: { children: React.ReactNode }) {
     document.fonts.addEventListener('loading', handleFontsEvent);
     document.fonts.addEventListener('loadingdone', handleFontsEvent);
 
-    // Use a "real timestamp" so that we see a useful date instead of "00:00"
-    // eslint-disable-next-line react-hooks/rules-of-hooks -- not a React hook
-    const clock = useFakeTimers({
-      now: new Date('Mon Aug 18 14:11:54 2014 -0500'),
-      toFake: ['Date'],
-    });
     // In case the child triggered font fetching we're not ready yet.
     // The fonts event handler will mark the test as ready on `loadingdone`
     if (document.fonts.status === 'loaded') {
@@ -39,7 +32,6 @@ function TestViewer(props: { children: React.ReactNode }) {
     return () => {
       document.fonts.removeEventListener('loading', handleFontsEvent);
       document.fonts.removeEventListener('loadingdone', handleFontsEvent);
-      clock.restore();
     };
   }, []);
 
@@ -68,11 +60,9 @@ function TestViewer(props: { children: React.ReactNode }) {
     <React.Fragment>
       {/* eslint-disable-next-line react/no-danger */}
       <style dangerouslySetInnerHTML={{ __html: globalStyles }} />
-      <React.Suspense fallback={<div aria-busy />}>
-        <div aria-busy={!ready} data-testid="testcase" style={{ display: 'block', padding: '8px' }}>
-          {children}
-        </div>
-      </React.Suspense>
+      <div aria-busy={!ready} data-testid="testcase" style={{ display: 'block', padding: '8px' }}>
+        {children}
+      </div>
     </React.Fragment>
   );
 }

test/regressions/main.tsx

@@ -5,7 +5,7 @@ import TestViewer from './TestViewer';
 import 'docs/src/styles.css';
 
 interface Fixture {
-  Component: React.LazyExoticComponent<React.ComponentType<any>>;
+  Component: React.ComponentType<unknown>;
   name: string;
   path: string;
   suite: string;
@@ -14,7 +14,9 @@ interface Fixture {
 // Get all the fixtures specifically written for preventing visual regressions.
 const globbedRegressionFixtures = import.meta.glob<{ default: React.ComponentType<unknown> }>(
   './fixtures/**/*.tsx',
+  { eager: true },
 );
+
 const regressionFixtures: Fixture[] = [];
 
 for (const path in globbedRegressionFixtures) {
@@ -23,11 +25,12 @@ for (const path in globbedRegressionFixtures) {
     .replace('./', '')
     .replace(/\.\w+$/, '')
     .split('/');
+
   regressionFixtures.push({
     path,
     suite: `regression-${suite}`,
     name,
-    Component: React.lazy(() => globbedRegressionFixtures[path]()),
+    Component: globbedRegressionFixtures[path].default,
   });
 }
 
@@ -76,6 +79,7 @@ function excludeDemoFixture(suite: string, name: string, path: string) {
 const globbedDemos = import.meta.glob<{ default: React.ComponentType<unknown> }>(
   // technically it should be 'docs/src/app/\\(public\\)/\\(content\\)/react/**/*.tsx' but tinyglobby doesn't resolve this on Windows
   'docs/src/app/?public?/?content?/react/**/*.tsx',
+  { eager: true },
 );
 
 const demoFixtures: Fixture[] = [];
@@ -92,7 +96,7 @@ for (const path in globbedDemos) {
       path,
       suite,
       name,
-      Component: React.lazy(() => globbedDemos[path]()),
+      Component: globbedDemos[path].default,
     });
   }
 }