...` and for
tests that render a full document the HTML will parse like a real
browser would (with some very minor edge case differences)
I also refactored the way we move nodes from buffered content into the
document and execute any scripts we find. Previously we were using
window.eval and I switched this to just setting the external script
content as script text. Additionally the nonce logic is reworked to be a
bit simpler.
---
.../src/__tests__/ReactDOMFizzServer-test.js | 835 ++++++++++--------
.../src/__tests__/ReactDOMFloat-test.js | 343 ++++---
.../react-dom/src/test-utils/FizzTestUtils.js | 140 +--
3 files changed, 759 insertions(+), 559 deletions(-)
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index da59ac66faef5..aa9222adb0766 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -10,7 +10,7 @@
'use strict';
import {
- replaceScriptsAndMove,
+ insertNodesAndExecuteScripts,
mergeOptions,
stripExternalRuntimeInNodes,
withLoadingReadyState,
@@ -29,8 +29,6 @@ let useSyncExternalStoreWithSelector;
let use;
let PropTypes;
let textCache;
-let window;
-let document;
let writable;
let CSPnonce = null;
let container;
@@ -43,20 +41,32 @@ let waitForAll;
let assertLog;
let waitForPaint;
let clientAct;
-
-function resetJSDOM(markup) {
- // Test Environment
- const jsdom = new JSDOM(markup, {
- runScripts: 'dangerously',
- });
- window = jsdom.window;
- document = jsdom.window.document;
-}
+let streamingContainer;
describe('ReactDOMFizzServer', () => {
beforeEach(() => {
jest.resetModules();
JSDOM = require('jsdom').JSDOM;
+
+ const jsdom = new JSDOM(
+ '
',
+ {
+ runScripts: 'dangerously',
+ },
+ );
+ // We mock matchMedia. for simplicity it only matches 'all' or '' and misses everything else
+ Object.defineProperty(jsdom.window, 'matchMedia', {
+ writable: true,
+ value: jest.fn().mockImplementation(query => ({
+ matches: query === 'all' || query === '',
+ media: query,
+ })),
+ });
+ streamingContainer = null;
+ global.window = jsdom.window;
+ global.document = jsdom.window.document;
+ container = document.getElementById('container');
+
Scheduler = require('scheduler');
React = require('react');
ReactDOMClient = require('react-dom/client');
@@ -93,9 +103,6 @@ describe('ReactDOMFizzServer', () => {
textCache = new Map();
- resetJSDOM('
');
- container = document.getElementById('container');
-
buffer = '';
hasErrored = false;
@@ -140,6 +147,9 @@ describe('ReactDOMFizzServer', () => {
.join('');
}
+ const bodyStartMatch = /| .*?>)/;
+ const headStartMatch = /| .*?>)/;
+
async function act(callback) {
await callback();
// Await one turn around the event loop.
@@ -153,40 +163,123 @@ describe('ReactDOMFizzServer', () => {
// JSDOM doesn't support stream HTML parser so we need to give it a proper fragment.
// We also want to execute any scripts that are embedded.
// We assume that we have now received a proper fragment of HTML.
- const bufferedContent = buffer;
+ let bufferedContent = buffer;
buffer = '';
- const fakeBody = document.createElement('body');
- fakeBody.innerHTML = bufferedContent;
- const parent =
- container.nodeName === '#document' ? container.body : container;
- await withLoadingReadyState(async () => {
- while (fakeBody.firstChild) {
- const node = fakeBody.firstChild;
- await replaceScriptsAndMove(window, CSPnonce, node, parent);
- }
- }, document);
- }
-
- async function actIntoEmptyDocument(callback) {
- await callback();
- // Await one turn around the event loop.
- // This assumes that we'll flush everything we have so far.
- await new Promise(resolve => {
- setImmediate(resolve);
- });
- if (hasErrored) {
- throw fatalError;
+ if (!bufferedContent) {
+ return;
}
- // JSDOM doesn't support stream HTML parser so we need to give it a proper fragment.
- // We also want to execute any scripts that are embedded.
- // We assume that we have now received a proper fragment of HTML.
- const bufferedContent = buffer;
- resetJSDOM(bufferedContent);
- container = document;
- buffer = '';
+
await withLoadingReadyState(async () => {
- await replaceScriptsAndMove(window, CSPnonce, document.documentElement);
+ const bodyMatch = bufferedContent.match(bodyStartMatch);
+ const headMatch = bufferedContent.match(headStartMatch);
+
+ if (streamingContainer === null) {
+ // This is the first streamed content. We decide here where to insert it. If we get , , or
+ // we abandon the pre-built document and start from scratch. If we get anything else we assume it goes into the
+ // container. This is not really production behavior because you can't correctly stream into a deep div effectively
+ // but it's pragmatic for tests.
+
+ if (
+ bufferedContent.startsWith('') ||
+ bufferedContent.startsWith('') ||
+ bufferedContent.startsWith('') ||
+ bufferedContent.startsWith(' without a which is almost certainly a bug in React',
+ );
+ }
+
+ if (bufferedContent.startsWith('')) {
+ // we can just use the whole document
+ const tempDom = new JSDOM(bufferedContent);
+
+ // Wipe existing head and body content
+ document.head.innerHTML = '';
+ document.body.innerHTML = '';
+
+ // Copy the attributes over
+ const tempHtmlNode = tempDom.window.document.documentElement;
+ for (let i = 0; i < tempHtmlNode.attributes.length; i++) {
+ const attr = tempHtmlNode.attributes[i];
+ document.documentElement.setAttribute(attr.name, attr.value);
+ }
+
+ if (headMatch) {
+ // We parsed a head open tag. we need to copy head attributes and insert future
+ // content into
+ streamingContainer = document.head;
+ const tempHeadNode = tempDom.window.document.head;
+ for (let i = 0; i < tempHeadNode.attributes.length; i++) {
+ const attr = tempHeadNode.attributes[i];
+ document.head.setAttribute(attr.name, attr.value);
+ }
+ const source = document.createElement('head');
+ source.innerHTML = tempHeadNode.innerHTML;
+ await insertNodesAndExecuteScripts(source, document.head, CSPnonce);
+ }
+
+ if (bodyMatch) {
+ // We parsed a body open tag. we need to copy head attributes and insert future
+ // content into
+ streamingContainer = document.body;
+ const tempBodyNode = tempDom.window.document.body;
+ for (let i = 0; i < tempBodyNode.attributes.length; i++) {
+ const attr = tempBodyNode.attributes[i];
+ document.body.setAttribute(attr.name, attr.value);
+ }
+ const source = document.createElement('body');
+ source.innerHTML = tempBodyNode.innerHTML;
+ await insertNodesAndExecuteScripts(source, document.body, CSPnonce);
+ }
+
+ if (!headMatch && !bodyMatch) {
+ throw new Error('expected or after ');
+ }
+ } else {
+ // we assume we are streaming into the default container'
+ streamingContainer = container;
+ const div = document.createElement('div');
+ div.innerHTML = bufferedContent;
+ await insertNodesAndExecuteScripts(div, container, CSPnonce);
+ }
+ } else if (streamingContainer === document.head) {
+ bufferedContent = '' + bufferedContent;
+ const tempDom = new JSDOM(bufferedContent);
+
+ const tempHeadNode = tempDom.window.document.head;
+ const source = document.createElement('head');
+ source.innerHTML = tempHeadNode.innerHTML;
+ await insertNodesAndExecuteScripts(source, document.head, CSPnonce);
+
+ if (bodyMatch) {
+ streamingContainer = document.body;
+
+ const tempBodyNode = tempDom.window.document.body;
+ for (let i = 0; i < tempBodyNode.attributes.length; i++) {
+ const attr = tempBodyNode.attributes[i];
+ document.body.setAttribute(attr.name, attr.value);
+ }
+ const bodySource = document.createElement('body');
+ bodySource.innerHTML = tempBodyNode.innerHTML;
+ await insertNodesAndExecuteScripts(
+ bodySource,
+ document.body,
+ CSPnonce,
+ );
+ }
+ } else {
+ const div = document.createElement('div');
+ div.innerHTML = bufferedContent;
+ await insertNodesAndExecuteScripts(div, streamingContainer, CSPnonce);
+ }
}, document);
}
@@ -3467,7 +3560,7 @@ describe('ReactDOMFizzServer', () => {
});
it('accepts an integrity property for bootstrapScripts and bootstrapModules', async () => {
- await actIntoEmptyDocument(() => {
+ await act(() => {
const {pipe} = renderToPipeableStream(
@@ -3584,7 +3677,7 @@ describe('ReactDOMFizzServer', () => {
// @gate enableFizzExternalRuntime
it('supports option to load runtime as an external script', async () => {
- await actIntoEmptyDocument(() => {
+ await act(() => {
const {pipe} = renderToPipeableStream(
@@ -3631,7 +3724,7 @@ describe('ReactDOMFizzServer', () => {
);
}
- await actIntoEmptyDocument(() => {
+ await act(() => {
const {pipe} = renderToPipeableStream(
);
pipe(writable);
});
@@ -3644,7 +3737,7 @@ describe('ReactDOMFizzServer', () => {
});
it('does not send the external runtime for static pages', async () => {
- await actIntoEmptyDocument(() => {
+ await act(() => {
const {pipe} = renderToPipeableStream(
@@ -4446,7 +4539,7 @@ describe('ReactDOMFizzServer', () => {
);
}
- await actIntoEmptyDocument(() => {
+ await act(() => {
const {pipe} = renderToPipeableStream(
@@ -4456,17 +4549,13 @@ describe('ReactDOMFizzServer', () => {
);
pipe(writable);
});
- await actIntoEmptyDocument(() => {
+ await act(() => {
resolveText('body');
});
- await actIntoEmptyDocument(() => {
+ await act(() => {
resolveText('nooutput');
});
- // We need to use actIntoEmptyDocument because act assumes that buffered
- // content should be fake streamed into the body which is normally true
- // but in this test the entire shell was delayed and we need the initial
- // construction to be done to get the parsing right
- await actIntoEmptyDocument(() => {
+ await act(() => {
resolveText('head');
});
expect(getVisibleChildren(document)).toEqual(
@@ -4487,7 +4576,7 @@ describe('ReactDOMFizzServer', () => {
chunks.push(chunk);
});
- await actIntoEmptyDocument(() => {
+ await act(() => {
const {pipe} = renderToPipeableStream(