[test] Lazily import fixtures

mui · Sep 9, 2021 · 2a57dfd · 2a57dfd
1 parent 908d7b1
commit 2a57dfd
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 19 deletions.
diff --git a/test/e2e/TestViewer.js b/test/e2e/TestViewer.js
@@ -13,9 +13,11 @@ function TestViewer(props) {
   }, []);
 
   return (
-    <div aria-busy={!ready} data-testid="testcase">
-      {children}
-    </div>
+    <React.Suspense fallback={<div aria-busy />}>
+      <div aria-busy={!ready} data-testid="testcase">
+        {children}
+      </div>
+    </React.Suspense>
   );
 }
 

diff --git a/test/e2e/index.js b/test/e2e/index.js
@@ -6,8 +6,8 @@ import TestViewer from './TestViewer';
 
 const fixtures = [];
 
-const requireFixtures = require.context('./fixtures', true, /\.(js|ts|tsx)$/);
-requireFixtures.keys().forEach((path) => {
+const importFixtures = require.context('./fixtures', true, /\.(js|ts|tsx)$/, 'lazy');
+importFixtures.keys().forEach((path) => {
   const [suite, name] = path
     .replace('./', '')
     .replace(/\.\w+$/, '')
@@ -16,7 +16,7 @@ requireFixtures.keys().forEach((path) => {
     path,
     suite: `e2e/${suite}`,
     name,
-    Component: requireFixtures(path).default,
+    Component: React.lazy(() => importFixtures(path)),
   });
 });
 

diff --git a/test/regressions/TestViewer.js b/test/regressions/TestViewer.js
@@ -67,13 +67,15 @@ function TestViewer(props) {
           },
         }}
       />
-      <Box
-        aria-busy={!ready}
-        data-testid="testcase"
-        sx={{ bgcolor: 'background.default', display: 'inline-block', p: 1 }}
-      >
-        {children}
-      </Box>
+      <React.Suspense fallback={<div aria-busy />}>
+        <Box
+          aria-busy={!ready}
+          data-testid="testcase"
+          sx={{ bgcolor: 'background.default', display: 'inline-block', p: 1 }}
+        >
+          {children}
+        </Box>
+      </React.Suspense>
     </React.Fragment>
   );
 }

diff --git a/test/regressions/index.js b/test/regressions/index.js
@@ -5,9 +5,9 @@ import webfontloader from 'webfontloader';
 import TestViewer from './TestViewer';
 
 // Get all the fixtures specifically written for preventing visual regressions.
-const requireRegressionFixtures = require.context('./fixtures', true, /\.(js|ts|tsx)$/);
+const importRegressionFixtures = require.context('./fixtures', true, /\.(js|ts|tsx)$/, 'lazy');
 const regressionFixtures = [];
-requireRegressionFixtures.keys().forEach((path) => {
+importRegressionFixtures.keys().forEach((path) => {
   const [suite, name] = path
     .replace('./', '')
     .replace(/\.\w+$/, '')
@@ -17,7 +17,7 @@ requireRegressionFixtures.keys().forEach((path) => {
     path,
     suite: `regression-${suite}`,
     name,
-    Component: requireRegressionFixtures(path).default,
+    Component: React.lazy(() => importRegressionFixtures(path)),
   });
 }, []);
 
@@ -197,9 +197,9 @@ function excludeDemoFixture(suite, name) {
 }
 
 // Also use some of the demos to avoid code duplication.
-const requireDemos = require.context('docs/src/pages', true, /js$/);
+const importDemos = require.context('docs/src/pages', true, /js$/, 'lazy');
 const demoFixtures = [];
-requireDemos.keys().forEach((path) => {
+importDemos.keys().forEach((path) => {
   const [name, ...suiteArray] = path.replace('./', '').replace('.js', '').split('/').reverse();
   const suite = `docs-${suiteArray.reverse().join('-')}`;
 
@@ -208,7 +208,7 @@ requireDemos.keys().forEach((path) => {
       path,
       suite,
       name,
-      Component: requireDemos(path).default,
+      Component: React.lazy(() => importDemos(path)),
     });
   }
 }, []);