Use require() to implement script src in tests (facebook#26717)

We currently use rollup to make an adhoc bundle from the file system when we're testing an import of an external file. This doesn't follow all the interception rules that we use in jest and in our actual builds. This switches to just using jest require() to load these. This means that they effectively have to load into the global document so this only works with global document tests which is all we have now anyway.
EdisonVan · Apr 15, 2024 · dae14af · dae14af
1 parent f66cf85
commit dae14af
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 71 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -64,7 +64,11 @@ describe('ReactDOMFizzServer', () => {
     });
     streamingContainer = null;
     global.window = jsdom.window;
-    global.document = jsdom.window.document;
+    global.document = global.window.document;
+    global.navigator = global.window.navigator;
+    global.Node = global.window.Node;
+    global.addEventListener = global.window.addEventListener;
+    global.MutationObserver = global.window.MutationObserver;
     container = document.getElementById('container');
 
     Scheduler = require('scheduler');

diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -59,7 +59,11 @@ describe('ReactDOMFloat', () => {
     });
     streamingContainer = null;
     global.window = jsdom.window;
-    global.document = jsdom.window.document;
+    global.document = global.window.document;
+    global.navigator = global.window.navigator;
+    global.Node = global.window.Node;
+    global.addEventListener = global.window.addEventListener;
+    global.MutationObserver = global.window.MutationObserver;
     container = document.getElementById('container');
 
     React = require('react');
@@ -95,7 +99,7 @@ describe('ReactDOMFloat', () => {
     renderOptions = {};
     if (gate(flags => flags.enableFizzExternalRuntime)) {
       renderOptions.unstable_externalRuntimeSrc =
-        'react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js';
+        'react-dom/unstable_server-external-runtime';
     }
   });
 

diff --git a/packages/react-dom/src/test-utils/FizzTestUtils.js b/packages/react-dom/src/test-utils/FizzTestUtils.js
@@ -8,68 +8,6 @@
  */
 'use strict';
 
-import * as tmp from 'tmp';
-import * as fs from 'fs';
-import replace from '@rollup/plugin-replace';
-import resolve from '@rollup/plugin-node-resolve';
-import {rollup} from 'rollup';
-import path from 'path';
-
-const rollupCache: Map<string, string | null> = new Map();
-
-// Utility function to read and bundle a standalone browser script
-async function getRollupResult(scriptSrc: string): Promise<string | null> {
-  const cachedResult = rollupCache.get(scriptSrc);
-  if (cachedResult !== undefined) {
-    return cachedResult;
-  }
-  let tmpFile;
-  try {
-    tmpFile = tmp.fileSync();
-    const rollupConfig = {
-      input: require.resolve(scriptSrc),
-      onwarn: console.warn,
-      plugins: [
-        replace({__DEV__: 'true', preventAssignment: true}),
-        resolve({
-          rootDir: path.join(__dirname, '..', '..', '..'),
-        }),
-      ],
-      output: {
-        externalLiveBindings: false,
-        freeze: false,
-        interop: false,
-        esModule: false,
-      },
-    };
-    const outputConfig = {
-      file: tmpFile.name,
-      format: 'iife',
-    };
-    const bundle = await rollup(rollupConfig);
-    await bundle.write(outputConfig);
-    const bundleBuffer = Buffer.alloc(4096);
-    let bundleStr = '';
-    while (true) {
-      // $FlowFixMe[incompatible-call]
-      const bytes = fs.readSync(tmpFile.fd, bundleBuffer);
-      if (bytes <= 0) {
-        break;
-      }
-      bundleStr += bundleBuffer.slice(0, bytes).toString();
-    }
-    rollupCache.set(scriptSrc, bundleStr);
-    return bundleStr;
-  } catch (e) {
-    rollupCache.set(scriptSrc, null);
-    return null;
-  } finally {
-    if (tmpFile) {
-      tmpFile.removeCallback();
-    }
-  }
-}
-
 async function insertNodesAndExecuteScripts(
   source: Document | Element,
   target: Node,
@@ -150,12 +88,17 @@ async function executeScript(script: Element) {
   const parent = script.parentNode;
   const scriptSrc = script.getAttribute('src');
   if (scriptSrc) {
-    const rollupOutput = await getRollupResult(scriptSrc);
-    if (rollupOutput) {
-      const transientScript = ownerDocument.createElement('script');
-      transientScript.textContent = rollupOutput;
-      parent.appendChild(transientScript);
-      parent.removeChild(transientScript);
+    if (document !== ownerDocument) {
+      throw new Error(
+        'You must set the current document to the global document to use script src in tests',
+      );
+    }
+    try {
+      // $FlowFixMe
+      require(scriptSrc);
+    } catch (x) {
+      const event = new window.ErrorEvent('error', {error: x});
+      window.dispatchEvent(event);
     }
   } else {
     const newScript = ownerDocument.createElement('script');

diff --git a/scripts/jest/ReactDOMServerIntegrationEnvironment.js b/scripts/jest/ReactDOMServerIntegrationEnvironment.js
@@ -16,6 +16,8 @@ class ReactDOMServerIntegrationEnvironment extends NodeEnvironment {
     this.global.document = this.global.window.document;
     this.global.navigator = this.global.window.navigator;
     this.global.Node = this.global.window.Node;
+    this.global.addEventListener = this.global.window.addEventListener;
+    this.global.MutationObserver = this.global.window.MutationObserver;
   }
 
   async setup() {