diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js index 70ed3a55945ec..0728845ceed41 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js @@ -8,7 +8,12 @@ */ 'use strict'; -import {replaceScriptsAndMove, mergeOptions} from '../test-utils/FizzTestUtils'; +import { + replaceScriptsAndMove, + mergeOptions, + stripExternalRuntimeInString, + stripExternalRuntimeInNodes, +} from '../test-utils/FizzTestUtils'; let JSDOM; let Stream; @@ -577,7 +582,12 @@ describe('ReactDOMFizzServer', () => { // Because there is no content inside the Suspense boundary that could've // been written, we expect to not see any additional partial data flushed // yet. - expect(container.childNodes.length).toBe(1); + expect( + stripExternalRuntimeInNodes( + container.childNodes, + renderOptions.unstable_externalRuntimeSrc, + ).length, + ).toBe(1); await act(async () => { resolveElement({default: }); }); @@ -3471,21 +3481,19 @@ describe('ReactDOMFizzServer', () => { , ); - const expectedScripts = [ + expect( + stripExternalRuntimeInNodes( + document.getElementsByTagName('script'), + renderOptions.unstable_externalRuntimeSrc, + ).map(n => n.outerHTML), + ).toEqual([ '', '', '', '', '', '', - ]; - let actualScripts = Array.from(document.getElementsByTagName('script')).map( - n => n.outerHTML, - ); - if (gate(flags => flags.enableFizzExternalRuntime)) { - actualScripts = actualScripts.slice(1); - } - expect(actualScripts).toEqual(expectedScripts); + ]); }); describe('bootstrapScriptContent escaping', () => { @@ -4494,10 +4502,12 @@ describe('ReactDOMFizzServer', () => { const {pipe} = renderToPipeableStream(); pipe(writable); }); - - expect(container.innerHTML).toEqual( - '
helloworld, Foo!
', - ); + expect( + stripExternalRuntimeInString( + container.innerHTML, + renderOptions.unstable_externalRuntimeSrc, + ), + ).toEqual('
helloworld, Foo!
'); const errors = []; ReactDOMClient.hydrateRoot(container, , { onRecoverableError(error) { @@ -4542,13 +4552,14 @@ describe('ReactDOMFizzServer', () => { expect(container.firstElementChild.outerHTML).toEqual( '
helloworld, Foo!
', ); - // there are extra script / data nodes at the end of container - if (gate(flags => flags.enableFizzExternalRuntime)) { - // extra script node inserted for the external runtime - expect(container.childNodes.length).toBe(6); - } else { - expect(container.childNodes.length).toBe(5); - } + // there are extra script nodes at the end of container + expect( + stripExternalRuntimeInNodes( + container.childNodes, + renderOptions.unstable_externalRuntimeSrc, + ).length, + ).toBe(5); + const div = container.childNodes[1]; expect(div.childNodes.length).toBe(3); const b = div.childNodes[1]; @@ -4851,8 +4862,12 @@ describe('ReactDOMFizzServer', () => { pipe(writable); }); - // strip inserted external runtime - expect(container.innerHTML).toEqual( + expect( + stripExternalRuntimeInString( + container.innerHTML, + renderOptions.unstable_externalRuntimeSrc, + ), + ).toEqual( '
helloworldworldhelloworld
world
', ); diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js index 615d615e1515e..298c0674576ee 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js @@ -8,7 +8,11 @@ */ 'use strict'; -import {replaceScriptsAndMove, mergeOptions} from '../test-utils/FizzTestUtils'; +import { + replaceScriptsAndMove, + mergeOptions, + stripExternalRuntimeInString, +} from '../test-utils/FizzTestUtils'; let JSDOM; let Stream; @@ -26,7 +30,7 @@ let container; let buffer = ''; let hasErrored = false; let fatalError = undefined; -const renderOptions = {}; +let renderOptions; const rollupCache: Map = new Map(); describe('ReactDOMFloat', () => { @@ -65,6 +69,12 @@ describe('ReactDOMFloat', () => { hasErrored = true; fatalError = error; }); + + renderOptions = {}; + if (gate(flags => flags.enableFizzExternalRuntime)) { + renderOptions.unstable_externalRuntimeSrc = + '../server/ReactDOMServerExternalRuntime.js'; + } }); function normalizeCodeLocInfo(str) { @@ -529,6 +539,12 @@ describe('ReactDOMFloat', () => { ); pipe(writable); }); + if (gate(flags => flags.enableFizzExternalRuntime)) { + chunks[0] = stripExternalRuntimeInString( + chunks[0], + renderOptions.unstable_externalRuntimeSrc, + ); + } expect(chunks).toEqual([ 'foobar', '', diff --git a/packages/react-dom/src/test-utils/FizzTestUtils.js b/packages/react-dom/src/test-utils/FizzTestUtils.js index 051a3d7ef02e0..4f5320675a2f0 100644 --- a/packages/react-dom/src/test-utils/FizzTestUtils.js +++ b/packages/react-dom/src/test-utils/FizzTestUtils.js @@ -122,4 +122,40 @@ function mergeOptions(options: Object, defaultOptions: Object): Object { }; } -export {replaceScriptsAndMove, mergeOptions}; +function stripExternalRuntimeInString( + source: string, + externalRuntimeSrc: string | null, +): string { + if (externalRuntimeSrc == null) { + return source; + } + const matchExternalRuntimeTag = new RegExp( + '