/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @emails react-core
* @jest-environment ./scripts/jest/ReactDOMServerIntegrationEnvironment
*/
'use strict';
import {
insertNodesAndExecuteScripts,
mergeOptions,
} from '../test-utils/FizzTestUtils';
let JSDOM;
let Stream;
let React;
let ReactDOM;
let ReactDOMClient;
let ReactDOMFizzServer;
let Suspense;
let SuspenseList;
let textCache;
let loadCache;
let writable;
let CSPnonce = null;
let container;
let buffer = '';
let hasErrored = false;
let fatalError = undefined;
let renderOptions;
let waitForAll;
let assertLog;
let Scheduler;
let clientAct;
let streamingContainer;
let assertConsoleErrorDev;
describe('ReactDOMFloat', () => {
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 = global.window.document;
global.navigator = global.window.navigator;
global.Node = global.window.Node;
global.addEventListener = global.window.addEventListener;
global.MutationObserver = global.window.MutationObserver;
// The Fizz runtime assumes requestAnimationFrame exists so we need to polyfill it.
global.requestAnimationFrame = global.window.requestAnimationFrame = cb =>
setTimeout(cb);
container = document.getElementById('container');
CSPnonce = null;
React = require('react');
ReactDOM = require('react-dom');
ReactDOMClient = require('react-dom/client');
ReactDOMFizzServer = require('react-dom/server');
Stream = require('stream');
Suspense = React.Suspense;
SuspenseList = React.unstable_SuspenseList;
Scheduler = require('scheduler/unstable_mock');
const InternalTestUtils = require('internal-test-utils');
waitForAll = InternalTestUtils.waitForAll;
assertLog = InternalTestUtils.assertLog;
clientAct = InternalTestUtils.act;
assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
textCache = new Map();
loadCache = new Set();
buffer = '';
hasErrored = false;
writable = new Stream.PassThrough();
writable.setEncoding('utf8');
writable.on('data', chunk => {
buffer += chunk;
});
writable.on('error', error => {
hasErrored = true;
fatalError = error;
});
renderOptions = {};
if (gate(flags => flags.shouldUseFizzExternalRuntime)) {
renderOptions.unstable_externalRuntimeSrc =
'react-dom/unstable_server-external-runtime';
}
});
const bodyStartMatch = /| .*?>)/;
const headStartMatch = /| .*?>)/;
async function act(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;
}
// 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.
let bufferedContent = buffer;
buffer = '';
if (!bufferedContent) {
jest.runAllTimers();
return;
}
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);
}
await 0;
// Let throttled boundaries reveal
jest.runAllTimers();
}
function getMeaningfulChildren(element) {
const children = [];
let node = element.firstChild;
while (node) {
if (node.nodeType === 1) {
if (
// some tags are ambiguous and might be hidden because they look like non-meaningful children
// so we have a global override where if this data attribute is included we also include the node
node.hasAttribute('data-meaningful') ||
(node.tagName === 'SCRIPT' &&
node.hasAttribute('src') &&
node.getAttribute('src') !==
renderOptions.unstable_externalRuntimeSrc &&
node.hasAttribute('async')) ||
(node.tagName !== 'SCRIPT' &&
node.tagName !== 'TEMPLATE' &&
node.tagName !== 'template' &&
!node.hasAttribute('hidden') &&
!node.hasAttribute('aria-hidden') &&
// Ignore the render blocking expect
(node.getAttribute('rel') !== 'expect' ||
node.getAttribute('blocking') !== 'render'))
) {
const props = {};
const attributes = node.attributes;
for (let i = 0; i < attributes.length; i++) {
if (
attributes[i].name === 'id' &&
attributes[i].value.includes(':')
) {
// We assume this is a React added ID that's a non-visual implementation detail.
continue;
}
props[attributes[i].name] = attributes[i].value;
}
props.children = getMeaningfulChildren(node);
children.push(React.createElement(node.tagName.toLowerCase(), props));
}
} else if (node.nodeType === 3) {
children.push(node.data);
}
node = node.nextSibling;
}
return children.length === 0
? undefined
: children.length === 1
? children[0]
: children;
}
function BlockedOn({value, children}) {
readText(value);
return children;
}
function resolveText(text) {
const record = textCache.get(text);
if (record === undefined) {
const newRecord = {
status: 'resolved',
value: text,
};
textCache.set(text, newRecord);
} else if (record.status === 'pending') {
const thenable = record.value;
record.status = 'resolved';
record.value = text;
thenable.pings.forEach(t => t());
}
}
function readText(text) {
const record = textCache.get(text);
if (record !== undefined) {
switch (record.status) {
case 'pending':
throw record.value;
case 'rejected':
throw record.value;
case 'resolved':
return record.value;
}
} else {
const thenable = {
pings: [],
then(resolve) {
if (newRecord.status === 'pending') {
thenable.pings.push(resolve);
} else {
Promise.resolve().then(() => resolve(newRecord.value));
}
},
};
const newRecord = {
status: 'pending',
value: thenable,
};
textCache.set(text, newRecord);
throw thenable;
}
}
function AsyncText({text}) {
return readText(text);
}
function renderToPipeableStream(jsx, options) {
// Merge options with renderOptions, which may contain featureFlag specific behavior
return ReactDOMFizzServer.renderToPipeableStream(
jsx,
mergeOptions(options, renderOptions),
);
}
function loadPreloads(hrefs) {
const event = new window.Event('load');
const nodes = document.querySelectorAll('link[rel="preload"]');
resolveLoadables(hrefs, nodes, event, href =>
Scheduler.log('load preload: ' + href),
);
}
function errorPreloads(hrefs) {
const event = new window.Event('error');
const nodes = document.querySelectorAll('link[rel="preload"]');
resolveLoadables(hrefs, nodes, event, href =>
Scheduler.log('error preload: ' + href),
);
}
function loadStylesheets(hrefs) {
loadStylesheetsFrom(document, hrefs);
}
function loadStylesheetsFrom(root, hrefs) {
const event = new window.Event('load');
const nodes = root.querySelectorAll('link[rel="stylesheet"]');
resolveLoadables(hrefs, nodes, event, href => {
Scheduler.log('load stylesheet: ' + href);
});
}
function errorStylesheets(hrefs) {
const event = new window.Event('error');
const nodes = document.querySelectorAll('link[rel="stylesheet"]');
resolveLoadables(hrefs, nodes, event, href => {
Scheduler.log('error stylesheet: ' + href);
});
}
function resolveLoadables(hrefs, nodes, event, onLoad) {
const hrefSet = hrefs ? new Set(hrefs) : null;
for (let i = 0; i < nodes.length; i++) {
const node = nodes[i];
if (loadCache.has(node)) {
continue;
}
const href = node.getAttribute('href');
if (!hrefSet || hrefSet.has(href)) {
loadCache.add(node);
onLoad(href);
node.dispatchEvent(event);
}
}
}
it('can render resources before singletons', async () => {
const root = ReactDOMClient.createRoot(document);
root.render(
<>
foo
hello world
,
);
try {
await waitForAll([]);
} catch (e) {
// for DOMExceptions that happen when expecting this test to fail we need
// to clear the scheduler first otherwise the expected failure will fail
await waitForAll([]);
throw e;
}
expect(getMeaningfulChildren(document)).toEqual(
foo
hello world
,
);
});
it('can hydrate non Resources in head when Resources are also inserted there', async () => {
await act(() => {
const {pipe} = renderToPipeableStream(
{}} />
foo
' +
(gate(flags => flags.shouldUseFizzExternalRuntime)
? ''
: '') +
(gate(flags => flags.enableFizzBlockingRender)
? ''
: '') +
'foo' +
'bar' +
(gate(flags => flags.enableFizzBlockingRender)
? ''
: ''),
'',
]);
});
it('dedupes if the external runtime is explicitly loaded using preinit', async () => {
const unstable_externalRuntimeSrc = 'src-of-external-runtime';
function App() {
ReactDOM.preinit(unstable_externalRuntimeSrc, {as: 'script'});
return (
loading...
,
);
await act(() => {
resolveText('unblock');
});
expect(getMeaningfulChildren(document)).toEqual(
loading...
,
);
errorStylesheets(['bar']);
assertLog(['error stylesheet: bar']);
await waitForAll([]);
const boundaryTemplateInstance = document.getElementById('B:0');
const suspenseInstance = boundaryTemplateInstance.previousSibling;
expect(suspenseInstance.data).toEqual('$!');
expect(boundaryTemplateInstance.dataset.dgst).toBe('CSS failed to load');
expect(getMeaningfulChildren(document)).toEqual(
loading...
,
);
const errors = [];
ReactDOMClient.hydrateRoot(document, , {
onRecoverableError(err, errInfo) {
errors.push(err.message);
errors.push(err.digest);
},
});
await waitForAll([]);
// When binding a stylesheet that was SSR'd in a boundary reveal there is a loadingState promise
// We need to use that promise to resolve the suspended commit because we don't know if the load or error
// events have already fired. This requires the load to be awaited for the commit to have a chance to flush
// We could change this by tracking the loadingState's fulfilled status directly on the loadingState similar
// to thenables however this slightly increases the fizz runtime code size.
await clientAct(() => loadStylesheets());
assertLog(['load stylesheet: foo']);
expect(getMeaningfulChildren(document)).toEqual(
Hello
,
);
expect(errors).toEqual([
'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
'CSS failed to load',
]);
});
it('treats stylesheet links with a precedence as a resource', async () => {
await act(() => {
const {pipe} = renderToPipeableStream(
Hello
,
);
await waitForAll([]);
expect(getMeaningfulChildren(document)).toEqual(
Hello
,
);
});
it('inserts text separators following text when followed by an element that is converted to a resource and thus removed from the html inline', async () => {
// If you render many of these as siblings the values get emitted as a single text with no separator sometimes
// because the link gets elided as a resource
function AsyncTextWithResource({text, href, precedence}) {
const value = readText(text);
return (
<>
{value}
);
}
await act(() => {
const {pipe} = renderToPipeableStream(
,
);
});
it('normalizes stylesheet resource precedence for all boundaries inlined as part of the shell flush', async () => {
await act(() => {
const {pipe} = renderToPipeableStream(
,
);
});
it('stylesheet resources are inserted according to precedence order on the client', async () => {
await act(() => {
const {pipe} = renderToPipeableStream(
,
);
});
it('will hoist resources of child boundaries emitted as part of a partial boundary to the parent boundary', async () => {
await act(() => {
const {pipe} = renderToPipeableStream(
,
);
// This will enqueue a stylesheet resource in a deep blocked boundary (loading baz...).
await act(() => {
resolveText('baz');
});
expect(getMeaningfulChildren(document)).toEqual(
loading...
,
);
// This will enqueue a stylesheet resource in the intermediate blocked boundary (loading bar...).
await act(() => {
resolveText('bar');
});
expect(getMeaningfulChildren(document)).toEqual(
loading...
,
);
// This will complete a segment in the top level boundary that is still blocked on another segment.
// It will flush the completed segment however the inner boundaries should not emit their style dependencies
// because they are not going to be revealed yet. instead their dependencies are hoisted to the blocked
// boundary (top level).
await act(() => {
resolveText('foo');
});
expect(getMeaningfulChildren(document)).toEqual(
loading...
,
);
// This resolves the last blocked segment on the top level boundary so we see all dependencies of the
// nested boundaries emitted at this level
await act(() => {
resolveText('qux');
});
expect(getMeaningfulChildren(document)).toEqual(
loading...
,
);
// We load all stylesheets and confirm the content is revealed
await act(() => {
const event = document.createEvent('Events');
event.initEvent('load', true, true);
Array.from(document.querySelectorAll('link[rel="stylesheet"]')).forEach(
el => {
el.dispatchEvent(event);
},
);
});
expect(getMeaningfulChildren(document)).toEqual(
foo
bar
baz
qux
,
);
});
it('encodes attributes consistently whether resources are flushed in shell or in late boundaries', async () => {
function App() {
return (
,
);
assertConsoleErrorDev([
'React does not recognize the `nonStandardAttr` prop on a DOM element. ' +
'If you intentionally want it to appear in the DOM as a custom attribute, ' +
'spell it as lowercase `nonstandardattr` instead. If you accidentally passed it from a ' +
'parent component, remove it from the DOM element.\n' +
' in link (at **)\n' +
' in App (at **)',
'Invalid values for props `shouldnotincludefunctions`, `norsymbols` on tag. ' +
'Either remove them from the element, or pass a string or number value to keep them in the DOM. ' +
'For details, see https://react.dev/link/attribute-behavior \n' +
' in link (at **)\n' +
' in App (at **)',
]);
// Now we flush the stylesheet with the boundary
await act(() => {
resolveText('unblock');
});
expect(getMeaningfulChildren(document)).toEqual(
loading...
,
);
});
it('boundary stylesheet resource dependencies hoist to a parent boundary when flushed inline', async () => {
await act(() => {
const {pipe} = renderToPipeableStream(
,
);
});
it('does not hoist anything with an itemprop prop', async () => {
function App() {
return (
title
);
}
await act(() => {
renderToPipeableStream().pipe(writable);
});
expect(getMeaningfulChildren(document)).toEqual(
title
title
,
);
ReactDOMClient.hydrateRoot(document, );
await waitForAll([]);
expect(getMeaningfulChildren(document)).toEqual(
title
title
,
);
});
it('warns if you render tag with itemProp outside or ', async () => {
const root = ReactDOMClient.createRoot(document);
root.render(
,
);
await waitForAll([]);
assertConsoleErrorDev([
'Cannot render a outside the main document if it has an `itemProp` prop. ' +
'`itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. ' +
'If you were intending for React to hoist this remove the `itemProp` prop. ' +
'Otherwise, try moving this tag into the or of the Document.\n' +
' in html (at **)',
'In HTML, cannot be a child of .\n' +
'This will cause a hydration error.\n' +
'\n' +
'> \n' +
'> ' +
'\n' +
'\n in meta (at **)',
]);
});
it('warns if you render a tag with itemProp outside <body> or <head>', async () => {
const root = ReactDOMClient.createRoot(document);
root.render(
<html>
<title itemProp="foo">title
,
);
await waitForAll([]);
assertConsoleErrorDev([
'Cannot render a outside the main document if it has an `itemProp` prop. ' +
'`itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. ' +
'If you were intending for React to hoist this <title> remove the `itemProp` prop. ' +
'Otherwise, try moving this tag into the <head> or <body> of the Document.\n' +
' in html (at **)',
'In HTML, <title> cannot be a child of <html>.\n' +
'This will cause a hydration error.\n' +
'\n' +
'> <html>\n' +
'> <title itemProp="foo">' +
'\n' +
'\n in title (at **)',
]);
});
it('warns if you render a <style> tag with itemProp outside <body> or <head>', async () => {
const root = ReactDOMClient.createRoot(document);
root.render(
<html>
<style itemProp="foo">style</style>
</html>,
);
await waitForAll([]);
assertConsoleErrorDev([
'Cannot render a <style> outside the main document if it has an `itemProp` prop. ' +
'`itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. ' +
'If you were intending for React to hoist this <style> remove the `itemProp` prop. ' +
'Otherwise, try moving this tag into the <head> or <body> of the Document.\n' +
' in html (at **)',
'In HTML, <style> cannot be a child of <html>.\n' +
'This will cause a hydration error.\n' +
'\n' +
'> <html>\n' +
'> <style itemProp="foo">' +
'\n' +
'\n in style (at **)',
]);
});
it('warns if you render a <link> tag with itemProp outside <body> or <head>', async () => {
const root = ReactDOMClient.createRoot(document);
root.render(
<html>
<link itemProp="foo" />
</html>,
);
await waitForAll([]);
assertConsoleErrorDev([
'Cannot render a <link> outside the main document if it has an `itemProp` prop. ' +
'`itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. ' +
'If you were intending for React to hoist this <link> remove the `itemProp` prop. ' +
'Otherwise, try moving this tag into the <head> or <body> of the Document.\n' +
' in html (at **)',
'In HTML, <link> cannot be a child of <html>.\n' +
'This will cause a hydration error.\n' +
'\n' +
'> <html>\n' +
'> <link itemProp="foo">\n' +
'\n' +
' in link (at **)',
]);
});
it('warns if you render a <script> tag with itemProp outside <body> or <head>', async () => {
const root = ReactDOMClient.createRoot(document);
root.render(
<html>
<script itemProp="foo" />
</html>,
);
await waitForAll([]);
assertConsoleErrorDev([
'Cannot render a <script> outside the main document if it has an `itemProp` prop. ' +
'`itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. ' +
'If you were intending for React to hoist this <script> remove the `itemProp` prop. ' +
'Otherwise, try moving this tag into the <head> or <body> of the Document.\n' +
' in html (at **)',
'In HTML, <script> cannot be a child of <html>.\n' +
'This will cause a hydration error.\n' +
'\n' +
'> <html>\n' +
'> <script itemProp="foo">\n' +
'\n' +
' in script (at **)',
...(gate('enableTrustedTypesIntegration')
? [
'Encountered a script tag while rendering React component. ' +
'Scripts inside React components are never executed when rendering on the client. ' +
'Consider using template tag instead (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n' +
' in script (at **)',
]
: []),
]);
});
it('can hydrate resources and components in the head and body even if a browser or 3rd party script injects extra html nodes', async () => {
// This is a stress test case for hydrating a complex combination of hoistable elements, hoistable resources and host components
// in an environment that has been manipulated by 3rd party scripts/extensions to modify the <head> and <body>
function App() {
return (
<>
<link rel="foo" href="foo" />
<script async={true} src="rendered" />
<link rel="stylesheet" href="stylesheet" precedence="default" />
<html itemScope={true}>
<head>
{/* Component */}
<link rel="stylesheet" href="stylesheet" />
<script src="sync rendered" data-meaningful="" />
<style>{'body { background-color: red; }'}</style>
<script src="async rendered" async={true} onLoad={() => {}} />
<noscript>
<meta name="noscript" content="noscript" />
</noscript>
<link rel="foo" href="foo" onLoad={() => {}} />
</head>
<body>
{/* Component because it has itemProp */}
<meta name="foo" content="foo" itemProp="a prop" />
{/* regular Hoistable */}
<meta name="foo" content="foo" />
{/* regular Hoistable */}
<title>title
deep hello
{/* Component because it has itemProp */}
);
}
await act(() => {
renderToPipeableStream().pipe(writable);
});
expect(getMeaningfulChildren(document)).toEqual(
{/* Hoisted Resources and elements */}
title
{/* rendered host components */}
deep hello
,
);
// We inject some styles, divs, scripts into the begginning, middle, and end
// of the head / body.
const injectedStyle = document.createElement('style');
injectedStyle.textContent = 'body { background-color: blue; }';
document.head.prepend(injectedStyle.cloneNode(true));
document.head.appendChild(injectedStyle.cloneNode(true));
document.body.prepend(injectedStyle.cloneNode(true));
document.body.appendChild(injectedStyle.cloneNode(true));
const injectedDiv = document.createElement('div');
document.head.prepend(injectedDiv);
document.head.appendChild(injectedDiv.cloneNode(true));
// We do not prepend a
in body because this will conflict with hyration
// We still mostly hydrate by matchign tag and
does not have any attributes to
// differentiate between likely-inject and likely-rendered cases. If a
is prepended
// in the and you render a
as the first child of there will be a conflict.
// We consider this a rare edge case and even if it does happen the fallback to client rendering
// should patch up the DOM correctly
document.body.appendChild(injectedDiv.cloneNode(true));
const injectedScript = document.createElement('script');
injectedScript.setAttribute('async', '');
injectedScript.setAttribute('src', 'injected');
document.head.prepend(injectedScript);
document.head.appendChild(injectedScript.cloneNode(true));
document.body.prepend(injectedScript.cloneNode(true));
document.body.appendChild(injectedScript.cloneNode(true));
// We hydrate the same App and confirm the output is identical except for the async
// script insertion that happens because we do not SSR async scripts with load handlers.
// All the extra inject nodes are preset
const root = ReactDOMClient.hydrateRoot(document, );
await waitForAll([]);
expect(getMeaningfulChildren(document)).toEqual(
title
deep hello
,
);
// We unmount. The nodes that remain are
// 1. Hoisted resources (we don't clean these up on unmount to address races with streaming suspense and navigation)
// 2. preloads that are injected to hint the browser to load a resource but are not associated to Fibers directly
// 3. Nodes that React skipped over during hydration
root.unmount();
expect(getMeaningfulChildren(document)).toEqual(
,
);
});
it('does not preload nomodule scripts', async () => {
await act(() => {
renderToPipeableStream(
,
).pipe(writable);
});
expect(getMeaningfulChildren(document)).toEqual(
,
);
});
it('can delay commit until css resources load', async () => {
const root = ReactDOMClient.createRoot(container);
expect(getMeaningfulChildren(container)).toBe(undefined);
React.startTransition(() => {
root.render(
<>
hello
,
);
});
await waitForAll([]);
expect(getMeaningfulChildren(container)).toBe(undefined);
expect(getMeaningfulChildren(document.head)).toEqual(
,
);
loadPreloads();
assertLog(['load preload: foo']);
// We expect that the stylesheet is inserted now but the commit has not happened yet.
expect(getMeaningfulChildren(container)).toBe(undefined);
expect(getMeaningfulChildren(document.head)).toEqual([
,
,
]);
loadStylesheets();
assertLog(['load stylesheet: foo']);
// We expect that the commit finishes synchronously after the stylesheet loads.
expect(getMeaningfulChildren(container)).toEqual(
hello
);
expect(getMeaningfulChildren(document.head)).toEqual([
,
,
]);
});
// https://github.com/facebook/react/issues/27585
it('does not reinsert already inserted stylesheets during a delayed commit', async () => {
await act(() => {
renderToPipeableStream(
server
,
).pipe(writable);
});
expect(getMeaningfulChildren(document)).toEqual(
server
,
);
const root = ReactDOMClient.createRoot(document.body);
expect(getMeaningfulChildren(container)).toBe(undefined);
root.render(
<>
,
);
// In a transition we add another reference to an already loaded resource
// https://github.com/facebook/react/issues/27585
React.startTransition(() => {
root.render(
<>
client
,
);
});
await waitForAll([]);
// In https://github.com/facebook/react/issues/27585 the order updated
// to second, third, first
expect(getMeaningfulChildren(document)).toEqual(
client
,
);
});
// eslint-disable-next-line jest/no-disabled-tests
it.skip('can delay commit until css resources error', async () => {
// TODO: This test fails and crashes jest. need to figure out why before unskipping.
const root = ReactDOMClient.createRoot(container);
expect(getMeaningfulChildren(container)).toBe(undefined);
React.startTransition(() => {
root.render(
<>
hello
,
);
});
await waitForAll([]);
expect(getMeaningfulChildren(container)).toBe(undefined);
expect(getMeaningfulChildren(document.head)).toEqual([
,
,
]);
loadPreloads(['foo']);
errorPreloads(['bar']);
assertLog(['load preload: foo', 'error preload: bar']);
// We expect that the stylesheet is inserted now but the commit has not happened yet.
expect(getMeaningfulChildren(container)).toBe(undefined);
expect(getMeaningfulChildren(document.head)).toEqual([
,
,
,
,
]);
errorStylesheets(['bar']);
loadStylesheets(['foo']);
assertLog(['load stylesheet: foo', 'error stylesheet: bar']);
// We expect that the commit finishes synchronously after the stylesheet loads.
expect(getMeaningfulChildren(container)).toEqual(
hello
);
expect(getMeaningfulChildren(document.head)).toEqual([
,
,
,
,
]);
});
it('assumes stylesheets that load in the shell loaded already', async () => {
await act(() => {
renderToPipeableStream(
hello
,
).pipe(writable);
});
let root;
React.startTransition(() => {
root = ReactDOMClient.hydrateRoot(
document,
hello
,
);
});
await waitForAll([]);
expect(getMeaningfulChildren(document)).toEqual(
hello
,
);
React.startTransition(() => {
root.render(
hello2
,
);
});
await waitForAll([]);
expect(getMeaningfulChildren(document)).toEqual(
hello2
,
);
React.startTransition(() => {
root.render(
hello3
,
);
});
await waitForAll([]);
expect(getMeaningfulChildren(document)).toEqual(
hello2
,
);
loadPreloads();
assertLog(['load preload: bar']);
expect(getMeaningfulChildren(document)).toEqual(
hello2
,
);
loadStylesheets(['bar']);
assertLog(['load stylesheet: bar']);
expect(getMeaningfulChildren(document)).toEqual(
hello3
,
);
});
it('can interrupt a suspended commit with a new update', async () => {
function App({children}) {
return (
{children}
);
}
const root = ReactDOMClient.createRoot(document);
// Do an initial render. This means subsequent insertions will suspend,
// unless they are wrapped inside a fresh Suspense boundary.
root.render();
await waitForAll([]);
// Insert a stylesheet. This will suspend because it's a transition.
React.startTransition(() => {
root.render(
hello
,
);
});
await waitForAll([]);
// Although the commit suspended, a preload was inserted.
expect(getMeaningfulChildren(document)).toEqual(
,
);
// Before the stylesheet has loaded, do an urgent update. This will insert a
// different stylesheet, and cancel the first one. This stylesheet will not
// suspend, even though it hasn't loaded, because it's an urgent update.
root.render(
hello2
{null}
,
);
await waitForAll([]);
await act(() => {
loadPreloads(['bar']);
loadStylesheets(['bar']);
});
await assertLog(['load preload: bar', 'load stylesheet: bar']);
// The bar stylesheet was inserted. There's still a "foo" preload, even
// though that update was superseded.
expect(getMeaningfulChildren(document)).toEqual(
hello2
,
);
// When "foo" finishes loading, nothing happens, because "foo" was not
// included in the last root update. However, if we insert "foo" again
// later, it should immediately commit without suspending, because it's
// been preloaded.
loadPreloads(['foo']);
assertLog(['load preload: foo']);
expect(getMeaningfulChildren(document)).toEqual(
hello2
,
);
// Now insert "foo" again.
React.startTransition(() => {
root.render(
hello3
,
);
});
await waitForAll([]);
// Commits without suspending because "foo" was preloaded.
expect(getMeaningfulChildren(document)).toEqual(
hello3
,
);
loadStylesheets(['foo']);
assertLog(['load stylesheet: foo']);
expect(getMeaningfulChildren(document)).toEqual(
hello3
,
);
});
it('will put a Suspense boundary into fallback if it contains a stylesheet not loaded during a sync update', async () => {
function App({children}) {
return (
{children}
);
}
const root = ReactDOMClient.createRoot(document);
await clientAct(() => {
root.render();
});
await waitForAll([]);
await clientAct(() => {
root.render(
hello
,
);
});
await waitForAll([]);
if (gate(flags => flags.alwaysThrottleRetries)) {
// Although the commit suspended, a preload was inserted.
expect(getMeaningfulChildren(document)).toEqual(
loading...
,
);
loadPreloads(['foo']);
assertLog(['load preload: foo']);
expect(getMeaningfulChildren(document)).toEqual(
loading...
,
);
}
loadStylesheets(['foo']);
assertLog(['load stylesheet: foo']);
expect(getMeaningfulChildren(document)).toEqual(
,
);
});
it('will assume stylesheets already in the document have loaded if it cannot confirm it is not yet loaded', async () => {
await act(() => {
renderToPipeableStream(
,
).pipe(writable);
});
const root = ReactDOMClient.createRoot(document.querySelector('#foo'));
root.render(
,
);
});
it('will assume wait for loading stylesheets to load before continuing', async () => {
let ssr = true;
function Component() {
if (ssr) {
return null;
} else {
return (
<>
,
);
loadStylesheets();
assertLog(['load stylesheet: foo']);
await waitForAll([]);
assertConsoleErrorDev([
"Error: Hydration failed because the server rendered HTML didn't match the client. " +
'As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:\n\n' +
"- A server/client branch `if (typeof window !== 'undefined')`.\n" +
"- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.\n" +
"- Date formatting in a user's locale which doesn't match the server.\n" +
'- External changing data without sending a snapshot of it along with the HTML.\n' +
'- Invalid HTML tag nesting.\n\n' +
'It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.\n\n' +
'https://react.dev/link/hydration-mismatch\n\n' +
' \n' +
' \n' +
'
\n' +
'
\n' +
' \n' +
' \n' +
' \n' +
'+
' +
'\n in ',
]);
jest.runAllTimers();
expect(getMeaningfulChildren(document)).toEqual(
hello world
hello client
,
);
});
it('does not suspend a transition on a stylesheet whose preload has already loaded', async () => {
const root = ReactDOMClient.createRoot(document);
root.render(
initial
,
);
await waitForAll([]);
ReactDOM.preload('route.css', {as: 'style'});
expect(getMeaningfulChildren(document.head)).toEqual(
,
);
expect(getMeaningfulChildren(document.body)).toEqual('initial');
loadPreloads(['route.css']);
assertLog(['load preload: route.css']);
React.startTransition(() => {
root.render(
next
,
);
});
await waitForAll([]);
expect(getMeaningfulChildren(document.head)).toEqual([
,
,
]);
expect(getMeaningfulChildren(document.body)).toEqual('next');
loadStylesheets(['route.css']);
assertLog(['load stylesheet: route.css']);
expect(getMeaningfulChildren(document.head)).toEqual([
,
,
]);
expect(getMeaningfulChildren(document.body)).toEqual('next');
});
it('suspends a transition on a stylesheet whose preload has not loaded yet', async () => {
const root = ReactDOMClient.createRoot(document);
root.render(
initial
,
);
await waitForAll([]);
ReactDOM.preload('route.css', {as: 'style'});
expect(getMeaningfulChildren(document.head)).toEqual(
,
);
expect(getMeaningfulChildren(document.body)).toEqual('initial');
React.startTransition(() => {
root.render(
next
,
);
});
await waitForAll([]);
expect(getMeaningfulChildren(document.head)).toEqual(
,
);
expect(getMeaningfulChildren(document.body)).toEqual('initial');
loadPreloads(['route.css']);
assertLog(['load preload: route.css']);
await waitForAll([]);
expect(getMeaningfulChildren(document.head)).toEqual([
,
,
]);
expect(getMeaningfulChildren(document.body)).toEqual('initial');
loadStylesheets(['route.css']);
assertLog(['load stylesheet: route.css']);
await waitForAll([]);
expect(getMeaningfulChildren(document.head)).toEqual([
,
,
]);
expect(getMeaningfulChildren(document.body)).toEqual('next');
});
it('can suspend commits on more than one root for the same resource at the same time', async () => {
document.body.innerHTML = '';
const container1 = document.createElement('div');
const container2 = document.createElement('div');
document.body.appendChild(container1);
document.body.appendChild(container2);
const root1 = ReactDOMClient.createRoot(container1);
const root2 = ReactDOMClient.createRoot(container2);
React.startTransition(() => {
root1.render(
,
);
});
it('stylesheets block render, with a really long timeout', async () => {
function App({children}) {
return (
{children}
);
}
const root = ReactDOMClient.createRoot(document);
root.render();
React.startTransition(() => {
root.render(
hello
,
);
});
await waitForAll([]);
expect(getMeaningfulChildren(document)).toEqual(
,
);
// Advance time by 50 seconds. Even still, the transition is suspended.
jest.advanceTimersByTime(50000);
await waitForAll([]);
expect(getMeaningfulChildren(document)).toEqual(
,
);
// Advance time by 10 seconds more. A full minute total has elapsed. At this
// point, something must have really gone wrong, so we time out and allow
// unstyled content to be displayed.
jest.advanceTimersByTime(10000);
expect(getMeaningfulChildren(document)).toEqual(
hello
,
);
// We will load these after the commit finishes to ensure nothing errors and nothing new inserts
loadPreloads(['foo']);
loadStylesheets(['foo']);
expect(getMeaningfulChildren(document)).toEqual(
hello
,
);
});
it('can interrupt a suspended commit with a new transition', async () => {
function App({children}) {
return (
{children}
);
}
const root = ReactDOMClient.createRoot(document);
root.render((empty));
// Start a transition to "A"
React.startTransition(() => {
root.render(
A
,
);
});
await waitForAll([]);
// "A" hasn't loaded yet, so we remain on the initial UI. Its preload
// has been inserted into the head, though.
expect(getMeaningfulChildren(document)).toEqual(
(empty)
,
);
// Interrupt the "A" transition with a new one, "B"
React.startTransition(() => {
root.render(
B
,
);
});
await waitForAll([]);
// Still on the initial UI because "B" hasn't loaded, but its preload
// is now in the head, too.
expect(getMeaningfulChildren(document)).toEqual(
(empty)
,
);
// Finish loading
loadPreloads();
loadStylesheets();
assertLog(['load preload: A', 'load preload: B', 'load stylesheet: B']);
// The "B" transition has finished.
expect(getMeaningfulChildren(document)).toEqual(
B
,
);
});
it('loading a stylesheet as part of an error boundary UI, during initial render', async () => {
class ErrorBoundary extends React.Component {
state = {error: null};
static getDerivedStateFromError(error) {
return {error};
}
render() {
const error = this.state.error;
if (error !== null) {
return (
<>
{error.message}
);
}
return this.props.children;
}
}
function Throws() {
throw new Error('Oops!');
}
function App() {
return (
);
}
// Initial server render. Because something threw, a Suspense fallback
// is shown.
await act(() => {
renderToPipeableStream(, {
onError(x) {
Scheduler.log('Caught server error: ' + x.message);
},
}).pipe(writable);
});
expect(getMeaningfulChildren(document)).toEqual(
Loading...
,
);
assertLog(['Caught server error: Oops!']);
// Hydrate the tree. The error boundary will capture the error and attempt
// to show an error screen. However, the error screen includes a stylesheet,
// so the commit should suspend until the stylesheet loads.
ReactDOMClient.hydrateRoot(document, );
await waitForAll([]);
// A preload for the stylesheet is inserted, but we still haven't committed
// the error screen.
expect(getMeaningfulChildren(document)).toEqual(
Loading...
,
);
// Finish loading the stylesheets. The commit should be unblocked, and the
// error screen should appear.
await clientAct(() => loadStylesheets());
expect(getMeaningfulChildren(document)).toEqual(
Oops!
,
);
});
it('will not flush a preload for a new rendered Stylesheet Resource if one was already flushed', async () => {
function Component() {
ReactDOM.preload('foo', {as: 'style'});
return (
,
);
});
it('will not flush a preload for a new preinitialized Stylesheet Resource if one was already flushed', async () => {
function Component() {
ReactDOM.preload('foo', {as: 'style'});
return (
,
);
});
it('will not insert a preload if the underlying resource already exists in the Document', async () => {
await act(() => {
renderToPipeableStream(
,
).pipe(writable);
});
expect(getMeaningfulChildren(document)).toEqual(
,
);
container = document.getElementById('container');
function ClientApp() {
ReactDOM.preload('foo', {as: 'style'});
ReactDOM.preload('bar', {as: 'script'});
ReactDOM.preload('baz', {as: 'font'});
return 'foo';
}
const root = ReactDOMClient.createRoot(container);
await clientAct(() => root.render());
expect(getMeaningfulChildren(document)).toEqual(
foo
,
);
});
it('uses imageSrcSet and imageSizes when keying image preloads', async () => {
function App({isClient}) {
// Will key off href in absense of imageSrcSet
ReactDOM.preload('foo', {as: 'image'});
ReactDOM.preload('foo', {as: 'image'});
// Will key off imageSrcSet + imageSizes
ReactDOM.preload('foo', {as: 'image', imageSrcSet: 'fooset'});
ReactDOM.preload('foo2', {as: 'image', imageSrcSet: 'fooset'});
// Will key off imageSrcSet + imageSizes
ReactDOM.preload('foo', {
as: 'image',
imageSrcSet: 'fooset',
imageSizes: 'foosizes',
});
ReactDOM.preload('foo2', {
as: 'image',
imageSrcSet: 'fooset',
imageSizes: 'foosizes',
});
// Will key off href in absense of imageSrcSet, imageSizes is ignored. these should match the
// first preloads not not emit a new preload tag
ReactDOM.preload('foo', {as: 'image', imageSizes: 'foosizes'});
ReactDOM.preload('foo', {as: 'image', imageSizes: 'foosizes'});
// These preloads are for something that isn't an image
// They should all key off the href
ReactDOM.preload('bar', {as: 'somethingelse'});
ReactDOM.preload('bar', {
as: 'somethingelse',
imageSrcSet: 'makes no sense',
});
ReactDOM.preload('bar', {
as: 'somethingelse',
imageSrcSet: 'makes no sense',
imageSizes: 'makes no sense',
});
if (isClient) {
// Will key off href in absense of imageSrcSet
ReactDOM.preload('client', {as: 'image'});
ReactDOM.preload('client', {as: 'image'});
// Will key off imageSrcSet + imageSizes
ReactDOM.preload('client', {as: 'image', imageSrcSet: 'clientset'});
ReactDOM.preload('client2', {as: 'image', imageSrcSet: 'clientset'});
// Will key off imageSrcSet + imageSizes
ReactDOM.preload('client', {
as: 'image',
imageSrcSet: 'clientset',
imageSizes: 'clientsizes',
});
ReactDOM.preload('client2', {
as: 'image',
imageSrcSet: 'clientset',
imageSizes: 'clientsizes',
});
// Will key off href in absense of imageSrcSet, imageSizes is ignored. these should match the
// first preloads not not emit a new preload tag
ReactDOM.preload('client', {as: 'image', imageSizes: 'clientsizes'});
ReactDOM.preload('client', {as: 'image', imageSizes: 'clientsizes'});
}
return (
hello
);
}
await act(() => {
renderToPipeableStream().pipe(writable);
});
expect(getMeaningfulChildren(document)).toEqual(
hello
,
);
const root = ReactDOMClient.hydrateRoot(document, );
await waitForAll([]);
expect(getMeaningfulChildren(document)).toEqual(
hello
,
);
root.render();
await waitForAll([]);
expect(getMeaningfulChildren(document)).toEqual(
hello
,
);
});
it('should handle referrerPolicy on image preload', async () => {
function App({isClient}) {
ReactDOM.preload('/server', {
as: 'image',
imageSrcSet: '/server',
imageSizes: '100vw',
referrerPolicy: 'no-referrer',
});
if (isClient) {
ReactDOM.preload('/client', {
as: 'image',
imageSrcSet: '/client',
imageSizes: '100vw',
referrerPolicy: 'no-referrer',
});
}
return (
hello
);
}
await act(() => {
renderToPipeableStream().pipe(writable);
});
expect(getMeaningfulChildren(document)).toEqual(
hello
,
);
const root = ReactDOMClient.hydrateRoot(document, );
await waitForAll([]);
expect(getMeaningfulChildren(document)).toEqual(
hello
,
);
root.render();
await waitForAll([]);
expect(getMeaningfulChildren(document)).toEqual(
hello
,
);
});
it('can emit preloads for non-lazy images that are rendered', async () => {
function App() {
ReactDOM.preload('script', {as: 'script'});
ReactDOM.preload('a', {as: 'image'});
ReactDOM.preload('b', {as: 'image'});
return (
);
}
await act(() => {
renderToPipeableStream().pipe(writable);
});
// non-lazy images are first, then arbitrary preloads like for the script and lazy images
expect(getMeaningfulChildren(document)).toEqual(
,
);
});
it('Does not preload lazy images', async () => {
function App() {
ReactDOM.preload('a', {as: 'image'});
return (
);
}
await act(() => {
renderToPipeableStream().pipe(writable);
});
expect(getMeaningfulChildren(document)).toEqual(
,
);
});
it('preloads up to 10 suspensey images as high priority when fetchPriority is not specified', async () => {
function App() {
ReactDOM.preload('1', {as: 'image', fetchPriority: 'high'});
ReactDOM.preload('auto', {as: 'image'});
ReactDOM.preload('low', {as: 'image', fetchPriority: 'low'});
ReactDOM.preload('9', {as: 'image', fetchPriority: 'high'});
ReactDOM.preload('10', {as: 'image', fetchPriority: 'high'});
return (
{/* skipping 1 */}
{/* skipping 10 */}
);
}
await act(() => {
renderToPipeableStream().pipe(writable);
});
expect(getMeaningfulChildren(document)).toEqual(
{/* First we see the preloads calls that made it to the high priority image queue */}
{/* Next we see up to 7 more images qualify for high priority image queue */}
{/* Next we see images that are explicitly high priority and thus make it to the high priority image queue */}
{/* Next we see the remaining preloads that did not make it to the high priority image queue */}
{/* skipping 1 */}
{/* skipping 10 */}
,
);
});
it('can promote images to high priority when at least one instance specifies a high fetchPriority', async () => {
function App() {
// If a ends up in a higher priority queue than b it will flush first
ReactDOM.preload('a', {as: 'image'});
ReactDOM.preload('b', {as: 'image'});
return (
);
}
await act(() => {
renderToPipeableStream().pipe(writable);
});
expect(getMeaningfulChildren(document)).toEqual(
{/* The First 10 high priority images were just the first 10 rendered images */}
{/* The "a" image was rendered a few times but since at least one of those was with
fetchPriorty="high" it ends up in the high priority queue */}
{/* Stylesheets come in between high priority images and regular preloads */}
{/* The remainig images that preloaded at regular priority */}
,
);
});
it('preloads from rendered images properly use srcSet and sizes', async () => {
function App() {
ReactDOM.preload('1', {as: 'image', imageSrcSet: 'ss1'});
ReactDOM.preload('2', {
as: 'image',
imageSrcSet: 'ss2',
imageSizes: 's2',
});
return (
);
}
await act(() => {
renderToPipeableStream().pipe(writable);
});
expect(getMeaningfulChildren(document)).toEqual(
,
);
});
it('should not preload images that have a data URIs for src or srcSet', async () => {
function App() {
return (
);
}
await act(() => {
renderToPipeableStream().pipe(writable);
});
expect(getMeaningfulChildren(document)).toEqual(
,
);
});
// https://github.com/vercel/next.js/discussions/54799
it('omits preloads when an is inside a ', async () => {
await act(() => {
renderToPipeableStream(
,
).pipe(writable);
});
expect(getMeaningfulChildren(document)).toEqual(
,
);
});
// Fixes: https://github.com/facebook/react/issues/27910
it('omits preloads for images inside noscript tags', async () => {
function App() {
return (
);
}
await act(() => {
renderToPipeableStream().pipe(writable);
});
expect(getMeaningfulChildren(document)).toEqual(
,
);
});
it('should handle media on image preload', async () => {
function App({isClient}) {
ReactDOM.preload('/server', {
as: 'image',
imageSrcSet: '/server',
imageSizes: '100vw',
media: 'print and (min-width: 768px)',
});
if (isClient) {
ReactDOM.preload('/client', {
as: 'image',
imageSrcSet: '/client',
imageSizes: '100vw',
media: 'screen and (max-width: 480px)',
});
}
return (
hello
);
}
await act(() => {
renderToPipeableStream().pipe(writable);
});
expect(getMeaningfulChildren(document)).toEqual(
hello
,
);
const root = ReactDOMClient.hydrateRoot(document, );
await waitForAll([]);
expect(getMeaningfulChildren(document)).toEqual(
hello
,
);
root.render();
await waitForAll([]);
expect(getMeaningfulChildren(document)).toEqual(
hello
,
);
});
it('should warn if you preload a stylesheet and then render a style tag with the same href', async () => {
const style = 'body { color: red; }';
function App() {
ReactDOM.preload('foo', {as: 'style'});
return (
hello
);
}
await act(() => {
renderToPipeableStream().pipe(writable);
});
assertConsoleErrorDev([
'React encountered a hoistable style tag for the same href as a preload: "foo". ' +
'When using a style tag to inline styles you should not also preload it as a stylsheet.\n' +
' in style (at **)\n' +
' in App (at **)',
]);
expect(getMeaningfulChildren(document)).toEqual(
hello
,
);
});
it('should preload only once even if you discover a stylesheet, script, or moduleScript late', async () => {
function App() {
// We start with preinitializing some resources first
ReactDOM.preinit('shell preinit/shell', {as: 'style'});
ReactDOM.preinit('shell preinit/shell', {as: 'script'});
ReactDOM.preinitModule('shell preinit/shell', {as: 'script'});
// We initiate all the shell preloads
ReactDOM.preload('shell preinit/shell', {as: 'style'});
ReactDOM.preload('shell preinit/shell', {as: 'script'});
ReactDOM.preloadModule('shell preinit/shell', {as: 'script'});
ReactDOM.preload('shell/shell preinit', {as: 'style'});
ReactDOM.preload('shell/shell preinit', {as: 'script'});
ReactDOM.preloadModule('shell/shell preinit', {as: 'script'});
ReactDOM.preload('shell/shell render', {as: 'style'});
ReactDOM.preload('shell/shell render', {as: 'script'});
ReactDOM.preloadModule('shell/shell render');
ReactDOM.preload('shell/late preinit', {as: 'style'});
ReactDOM.preload('shell/late preinit', {as: 'script'});
ReactDOM.preloadModule('shell/late preinit');
ReactDOM.preload('shell/late render', {as: 'style'});
ReactDOM.preload('shell/late render', {as: 'script'});
ReactDOM.preloadModule('shell/late render');
// we preinit later ones that should be created by
ReactDOM.preinit('shell/shell preinit', {as: 'style'});
ReactDOM.preinit('shell/shell preinit', {as: 'script'});
ReactDOM.preinitModule('shell/shell preinit');
ReactDOM.preinit('late/shell preinit', {as: 'style'});
ReactDOM.preinit('late/shell preinit', {as: 'script'});
ReactDOM.preinitModule('late/shell preinit');
return (
);
}
function Late() {
ReactDOM.preload('late/later preinit', {as: 'style'});
ReactDOM.preload('late/later preinit', {as: 'script'});
ReactDOM.preloadModule('late/later preinit');
ReactDOM.preload('late/later render', {as: 'style'});
ReactDOM.preload('late/later render', {as: 'script'});
ReactDOM.preloadModule('late/later render');
ReactDOM.preload('late/shell preinit', {as: 'style'});
ReactDOM.preload('late/shell preinit', {as: 'script'});
ReactDOM.preloadModule('late/shell preinit');
ReactDOM.preload('late/shell render', {as: 'style'});
ReactDOM.preload('late/shell render', {as: 'script'});
ReactDOM.preloadModule('late/shell render');
// late preinits don't actually flush so we won't see this in the DOM as a stylesehet but we should see
// the preload for this resource
ReactDOM.preinit('shell/late preinit', {as: 'style'});
ReactDOM.preinit('shell/late preinit', {as: 'script'});
ReactDOM.preinitModule('shell/late preinit');
return (
<>
Late
);
}
function Later() {
// late preinits don't actually flush so we won't see this in the DOM as a stylesehet but we should see
// the preload for this resource
ReactDOM.preinit('late/later preinit', {as: 'style'});
ReactDOM.preinit('late/later preinit', {as: 'script'});
ReactDOM.preinitModule('late/later preinit');
return (
<>
Later
);
}
await act(() => {
renderToPipeableStream().pipe(writable);
});
expect(getMeaningfulChildren(document)).toEqual(
{'late...'}
{'later...'}
,
);
await act(() => {
resolveText('late');
});
expect(getMeaningfulChildren(document)).toEqual(
{/* FROM HERE */}
{/** TO HERE:
* This was hoisted by boundary complete instruction. The preload was already emitted in the
* shell but we see it below because this was inserted clientside by precedence.
* We don't observe the "shell/late preinit" because these do not flush unless they are flushing
* with the shell
* */}
{'late...'}
{'later...'}
{/* FROM HERE */}
{/** TO HERE:
* These resources streamed into the body during the boundary flush. Scripts go first then
* preloads according to our streaming queue priorities. Note also that late/shell resources
* where the resource already emitted in the shell and the preload is invoked later do not
* end up with a preload in the document at all.
* */}
,
);
await act(() => {
resolveText('later');
});
expect(getMeaningfulChildren(document)).toEqual(
{/* FROM HERE */}
{/** TO HERE:
* This was hoisted by boundary complete instruction. The preload was already emitted in the
* shell but we see it below because this was inserted clientside by precedence
* We don't observe the "late/later preinit" because these do not flush unless they are flushing
* with the shell
* */}
{'late...'}
{'later...'}
{/* FROM HERE */}
{/** TO HERE:
* These resources streamed into the body during the boundary flush. Scripts go first then
* preloads according to our streaming queue priorities
* */}
,
);
loadStylesheets();
// Let the styles flush and then flush the boundaries
await 0;
await 0;
jest.runAllTimers();
assertLog([
'load stylesheet: shell preinit/shell',
'load stylesheet: shell/shell preinit',
'load stylesheet: late/shell preinit',
'load stylesheet: shell/shell render',
'load stylesheet: late/shell render',
'load stylesheet: shell/late render',
'load stylesheet: late/later render',
]);
ReactDOMClient.hydrateRoot(document, );
await waitForAll([]);
expect(getMeaningfulChildren(document)).toEqual(
{/* FROM HERE */}
{/** TO HERE:
* The client render patches in the two missing preinit stylesheets when hydration happens
* Note that this is only because we repeated the calls to preinit on the client
* */}
{'Late'}
{'Later'}
,
);
});
it('does not flush hoistables for fallbacks', async () => {
function App() {
return (
);
}
await act(() => {
renderToPipeableStream().pipe(writable);
});
expect(getMeaningfulChildren(document)).toEqual(
{/* The primary content hoistables emit */}
{/* The fallback content emits but the hoistables do not even if they
inside a nested suspense boundary that is resolved */}
,
);
});
it('should never flush hoistables before the preamble', async () => {
let resolve;
const promise = new Promise(res => {
resolve = res;
});
function App() {
ReactDOM.preinit('foo', {as: 'script'});
React.use(promise);
return (
hello
);
}
await act(() => {
renderToPipeableStream().pipe(writable);
});
// we assert the default JSDOM still in tact
expect(getMeaningfulChildren(document)).toEqual(
,
);
await act(() => {
resolve();
});
// we assert the DOM was replaced entirely because we streamed an opening html tag
expect(getMeaningfulChildren(document)).toEqual(
hello
,
);
});
describe('ReactDOM.prefetchDNS(href)', () => {
it('creates a dns-prefetch resource when called', async () => {
function App({url}) {
ReactDOM.prefetchDNS(url);
ReactDOM.prefetchDNS(url);
ReactDOM.prefetchDNS(url, {});
ReactDOM.prefetchDNS(url, {crossOrigin: 'use-credentials'});
return (
hello world
);
}
await act(() => {
renderToPipeableStream().pipe(writable);
});
assertConsoleErrorDev([
'ReactDOM.prefetchDNS(): Expected only one argument, `href`, ' +
'but encountered something with type "object" as a second argument instead. ' +
'This argument is reserved for future options and is currently disallowed. ' +
'Try calling ReactDOM.prefetchDNS() with just a single string argument, `href`.\n' +
' in App (at **)',
'ReactDOM.prefetchDNS(): Expected only one argument, `href`, ' +
'but encountered something with type "object" as a second argument instead. ' +
'This argument is reserved for future options and is currently disallowed. ' +
'It looks like the you are attempting to set a crossOrigin property for this DNS lookup hint. ' +
'Browsers do not perform DNS queries using CORS and setting this attribute ' +
'on the resource hint has no effect. Try calling ReactDOM.prefetchDNS() with just ' +
'a single string argument, `href`.\n' +
' in App (at **)',
]);
expect(getMeaningfulChildren(document)).toEqual(
hello world
,
);
const root = ReactDOMClient.hydrateRoot(document, );
await waitForAll([]);
assertConsoleErrorDev([
'ReactDOM.prefetchDNS(): Expected only one argument, `href`, ' +
'but encountered something with type "object" as a second argument instead. ' +
'This argument is reserved for future options and is currently disallowed. ' +
'Try calling ReactDOM.prefetchDNS() with just a single string argument, `href`.\n' +
' in App (at **)',
'ReactDOM.prefetchDNS(): Expected only one argument, `href`, ' +
'but encountered something with type "object" as a second argument instead. ' +
'This argument is reserved for future options and is currently disallowed. ' +
'It looks like the you are attempting to set a crossOrigin property for this DNS lookup hint. ' +
'Browsers do not perform DNS queries using CORS and setting this attribute ' +
'on the resource hint has no effect. Try calling ReactDOM.prefetchDNS() with just ' +
'a single string argument, `href`.\n' +
' in App (at **)',
]);
expect(getMeaningfulChildren(document)).toEqual(
hello world
,
);
root.render();
await waitForAll([]);
assertConsoleErrorDev([
'ReactDOM.prefetchDNS(): Expected only one argument, `href`, ' +
'but encountered something with type "object" as a second argument instead. ' +
'This argument is reserved for future options and is currently disallowed. ' +
'Try calling ReactDOM.prefetchDNS() with just a single string argument, `href`.\n' +
' in App (at **)',
'ReactDOM.prefetchDNS(): Expected only one argument, `href`, ' +
'but encountered something with type "object" as a second argument instead. ' +
'This argument is reserved for future options and is currently disallowed. ' +
'It looks like the you are attempting to set a crossOrigin property for this DNS lookup hint. ' +
'Browsers do not perform DNS queries using CORS and setting this attribute ' +
'on the resource hint has no effect. Try calling ReactDOM.prefetchDNS() with just ' +
'a single string argument, `href`.\n' +
' in App (at **)',
]);
expect(getMeaningfulChildren(document)).toEqual(
hello world
,
);
});
});
it('does not wait for stylesheets of completed fallbacks', async () => {
function Unblock({value}) {
resolveText(value);
return null;
}
function App() {
return (
,
);
});
it('warns if you do not pass in a valid href argument or options argument', async () => {
function App() {
ReactDOM.preload();
ReactDOM.preload('');
ReactDOM.preload('foo', null);
ReactDOM.preload('foo', {});
ReactDOM.preload('foo', {as: 'foo'});
return
foo
;
}
await act(() => {
renderToPipeableStream().pipe(writable);
});
assertConsoleErrorDev([
'ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an ' +
'`options` object with an `as` property valid for a `` tag. ' +
'The `href` argument encountered was `undefined`. ' +
'The `options` argument encountered was `undefined`.\n' +
' in App (at **)',
'ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an ' +
'`options` object with an `as` property valid for a `` tag. ' +
'The `href` argument encountered was an empty string. ' +
'The `options` argument encountered was `undefined`.\n' +
' in App (at **)',
'ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an ' +
'`options` object with an `as` property valid for a `` tag. ' +
'The `options` argument encountered was `null`.\n' +
' in App (at **)',
'ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an ' +
'`options` object with an `as` property valid for a `` tag. ' +
'The `as` option encountered was `undefined`.\n' +
' in App (at **)',
]);
});
it('supports fetchPriority', async () => {
function Component({isServer}) {
ReactDOM.preload(isServer ? 'highserver' : 'highclient', {
as: 'script',
fetchPriority: 'high',
});
ReactDOM.preload(isServer ? 'lowserver' : 'lowclient', {
as: 'style',
fetchPriority: 'low',
});
ReactDOM.preload(isServer ? 'autoserver' : 'autoclient', {
as: 'style',
fetchPriority: 'auto',
});
return 'hello';
}
await act(() => {
renderToPipeableStream(
,
).pipe(writable);
});
expect(getMeaningfulChildren(document)).toEqual(
hello
,
);
ReactDOMClient.hydrateRoot(
document,
,
);
await waitForAll([]);
expect(getMeaningfulChildren(document)).toEqual(
hello
,
);
});
it('supports nonce', async () => {
function App({url}) {
ReactDOM.preload(url, {as: 'script', nonce: 'abc'});
return 'hello';
}
await act(() => {
renderToPipeableStream().pipe(writable);
});
expect(getMeaningfulChildren(document)).toEqual(
,
);
ReactDOMClient.hydrateRoot(container, );
await waitForAll([]);
expect(getMeaningfulChildren(document.head)).toEqual(
,
);
});
it('warns if you provide invalid arguments', async () => {
function App() {
ReactDOM.preloadModule();
ReactDOM.preloadModule(() => {});
ReactDOM.preloadModule('');
ReactDOM.preloadModule('1', true);
ReactDOM.preloadModule('2', {as: true});
return
hello
;
}
await act(() => {
renderToPipeableStream().pipe(writable);
});
assertConsoleErrorDev([
'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, ' +
'an `options` object with an `as` property valid for a `` tag. ' +
'The `href` argument encountered was `undefined`.\n' +
' in App (at **)',
'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, ' +
'an `options` object with an `as` property valid for a `` tag. ' +
'The `href` argument encountered was something with type "function".\n' +
' in App (at **)',
'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, ' +
'an `options` object with an `as` property valid for a `` tag. ' +
'The `href` argument encountered was an empty string.\n' +
' in App (at **)',
'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, ' +
'an `options` object with an `as` property valid for a `` tag. ' +
'The `options` argument encountered was something with type "boolean".\n' +
' in App (at **)',
'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally,' +
' an `options` object with an `as` property valid for a `` tag. ' +
'The `as` option encountered was something with type "boolean".\n' +
' in App (at **)',
]);
expect(getMeaningfulChildren(document.body)).toEqual(
hello
,
);
const root = ReactDOMClient.createRoot(
document.getElementById('container'),
);
root.render();
await waitForAll([]);
assertConsoleErrorDev([
'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, ' +
'an `options` object with an `as` property valid for a `` tag. ' +
'The `href` argument encountered was `undefined`.\n' +
' in App (at **)',
'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, ' +
'an `options` object with an `as` property valid for a `` tag. ' +
'The `href` argument encountered was something with type "function".\n' +
' in App (at **)',
'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an ' +
'`options` object with an `as` property valid for a `` tag. ' +
'The `href` argument encountered was an empty string.\n' +
' in App (at **)',
'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an ' +
'`options` object with an `as` property valid for a `` tag. ' +
'The `options` argument encountered was something with type "boolean".\n' +
' in App (at **)',
'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an ' +
'`options` object with an `as` property valid for a `` tag. ' +
'The `as` option encountered was something with type "boolean".\n' +
' in App (at **)',
]);
});
});
describe('ReactDOM.preinit(href, { as: ... })', () => {
it('creates a stylesheet resource when ReactDOM.preinit(..., {as: "style" }) is called', async () => {
function App() {
ReactDOM.preinit('foo', {as: 'style'});
return (
);
}
function Component() {
ReactDOM.preinit('bar', {as: 'style'});
return
hello
;
}
await act(() => {
const {pipe} = renderToPipeableStream();
pipe(writable);
});
expect(getMeaningfulChildren(document)).toEqual(
loading...
,
);
await act(() => {
resolveText('bar');
});
// The reason we do not see the "bar" stylesheet here is that ReactDOM.preinit is not about
// encoding a resource dependency but is a hint that a resource will be used in the near future.
// If we call preinit on the server after the shell has flushed the best we can do is emit a preload
// because any flushing suspense boundaries are not actually dependent on that resource and we don't
// want to delay reveal based on when that resource loads.
expect(getMeaningfulChildren(document)).toEqual(
hello
,
);
function ClientApp() {
ReactDOM.preinit('bar', {as: 'style'});
return (
,
);
});
it('creates a stylesheet resource in the ownerDocument when ReactDOM.preinit(..., {as: "style" }) is called outside of render on the client', async () => {
function App() {
React.useEffect(() => {
ReactDOM.preinit('foo', {as: 'style'});
}, []);
return (
foo
);
}
const root = ReactDOMClient.createRoot(document);
root.render();
await waitForAll([]);
expect(getMeaningfulChildren(document)).toEqual(
foo
,
);
});
it('creates a stylesheet resource in the ownerDocument when ReactDOM.preinit(..., {as: "style" }) is called in shadowRoot', async () => {
// This is testing behavior, but it shows that it is not a good idea to preinit inside a shadowRoot. The point is we are asserting a behavior
// you would want to avoid in a real app.
const shadow = document.body.attachShadow({mode: 'open'});
function ShadowComponent() {
ReactDOM.preinit('bar', {as: 'style'});
return null;
}
function App() {
React.useEffect(() => {
ReactDOM.preinit('foo', {as: 'style'});
}, []);
return (
foo
{ReactDOM.createPortal(
,
);
});
it('creates a script resource when ReactDOM.preinit(..., {as: "script" }) is called outside of render on the client', async () => {
function App() {
React.useEffect(() => {
ReactDOM.preinit('foo', {as: 'script'});
}, []);
return (
foo
);
}
const root = ReactDOMClient.createRoot(document);
root.render();
await waitForAll([]);
expect(getMeaningfulChildren(document)).toEqual(
foo
,
);
});
it('warns if you do not pass in a valid href argument or options argument', async () => {
function App() {
ReactDOM.preinit();
ReactDOM.preinit('');
ReactDOM.preinit('foo', null);
ReactDOM.preinit('foo', {});
ReactDOM.preinit('foo', {as: 'foo'});
return
foo
;
}
await act(() => {
renderToPipeableStream().pipe(writable);
});
assertConsoleErrorDev([
'ReactDOM.preinit(): Expected the `href` argument (first) to be a non-empty string ' +
'but encountered `undefined` instead.\n' +
' in App (at **)',
'ReactDOM.preinit(): Expected the `href` argument (first) to be a non-empty string ' +
'but encountered an empty string instead.\n' +
' in App (at **)',
'ReactDOM.preinit(): Expected the `options` argument (second) to be an object with an `as` ' +
'property describing the type of resource to be preinitialized but encountered `null` instead.\n' +
' in App (at **)',
'ReactDOM.preinit(): Expected the `as` property in the `options` argument (second) to contain ' +
'a valid value describing the type of resource to be preinitialized but encountered `undefined` instead. ' +
'Valid values for `as` are "style" and "script".\n' +
' in App (at **)',
'ReactDOM.preinit(): Expected the `as` property in the `options` argument (second) to contain ' +
'a valid value describing the type of resource to be preinitialized but encountered "foo" instead. ' +
'Valid values for `as` are "style" and "script".\n' +
' in App (at **)',
]);
});
it('accepts a `nonce` option for `as: "script"`', async () => {
function Component({src}) {
ReactDOM.preinit(src, {as: 'script', nonce: 'R4nD0m'});
return 'hello';
}
await act(() => {
renderToPipeableStream(
,
{
nonce: 'R4nD0m',
},
).pipe(writable);
});
expect(getMeaningfulChildren(document)).toEqual(
hello
,
);
await clientAct(() => {
ReactDOMClient.hydrateRoot(
document,
,
);
});
expect(getMeaningfulChildren(document)).toEqual(
hello
,
);
});
it('accepts an `integrity` option for `as: "script"`', async () => {
function Component({src, hash}) {
ReactDOM.preinit(src, {as: 'script', integrity: hash});
return 'hello';
}
await act(() => {
renderToPipeableStream(
,
{
nonce: 'R4nD0m',
},
).pipe(writable);
});
expect(getMeaningfulChildren(document)).toEqual(
hello
,
);
await clientAct(() => {
ReactDOMClient.hydrateRoot(
document,
,
);
});
expect(getMeaningfulChildren(document)).toEqual(
hello
,
);
});
it('accepts an `integrity` option for `as: "style"`', async () => {
function Component({src, hash}) {
ReactDOM.preinit(src, {as: 'style', integrity: hash});
return 'hello';
}
await act(() => {
renderToPipeableStream(
,
{
nonce: 'R4nD0m',
},
).pipe(writable);
});
expect(getMeaningfulChildren(document)).toEqual(
hello
,
);
await clientAct(() => {
ReactDOMClient.hydrateRoot(
document,
,
);
});
expect(getMeaningfulChildren(document)).toEqual(
hello
,
);
});
it('supports fetchPriority', async () => {
function Component({isServer}) {
ReactDOM.preinit(isServer ? 'highserver' : 'highclient', {
as: 'script',
fetchPriority: 'high',
});
ReactDOM.preinit(isServer ? 'lowserver' : 'lowclient', {
as: 'style',
fetchPriority: 'low',
});
ReactDOM.preinit(isServer ? 'autoserver' : 'autoclient', {
as: 'style',
fetchPriority: 'auto',
});
return 'hello';
}
await act(() => {
renderToPipeableStream(
,
).pipe(writable);
});
expect(getMeaningfulChildren(document)).toEqual(
hello
,
);
ReactDOMClient.hydrateRoot(
document,
,
);
await waitForAll([]);
expect(getMeaningfulChildren(document)).toEqual(
hello
,
);
});
});
describe('ReactDOM.preinitModule(href, options)', () => {
it('creates a script module resources', async () => {
function App({ssr}) {
const prefix = ssr ? 'ssr ' : 'browser ';
ReactDOM.preinitModule(prefix + 'plain');
ReactDOM.preinitModule(prefix + 'default', {as: 'script'});
ReactDOM.preinitModule(prefix + 'cors', {
crossOrigin: 'use-credentials',
});
ReactDOM.preinitModule(prefix + 'integrity', {integrity: 'some hash'});
ReactDOM.preinitModule(prefix + 'warning', {as: 'style'});
return
hello
;
}
await act(() => {
renderToPipeableStream().pipe(writable);
});
assertConsoleErrorDev([
'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
'string and, optionally, an `options` object with a valid `as` property. ' +
'The `as` option encountered was "style".\n' +
' in App (at **)',
]);
expect(getMeaningfulChildren(document.body)).toEqual(
hello
,
);
ReactDOMClient.hydrateRoot(container, );
await waitForAll([]);
assertConsoleErrorDev([
'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
'string and, optionally, an `options` object with a valid `as` property. ' +
'The `as` option encountered was "style".\n' +
' in App (at **)',
]);
expect(getMeaningfulChildren(document)).toEqual(
;
}
await act(() => {
renderToPipeableStream().pipe(writable);
});
assertConsoleErrorDev([
'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
'string and, optionally, an `options` object with a valid `as` property. ' +
'The `href` argument encountered was `undefined`.\n' +
' in App (at **)',
'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
'string and, optionally, an `options` object with a valid `as` property. ' +
'The `href` argument encountered was something with type "function".\n' +
' in App (at **)',
'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
'string and, optionally, an `options` object with a valid `as` property. ' +
'The `href` argument encountered was an empty string.\n' +
' in App (at **)',
'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
'string and, optionally, an `options` object with a valid `as` property. ' +
'The `options` argument encountered was something with type "boolean".\n' +
' in App (at **)',
'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
'string and, optionally, an `options` object with a valid `as` property. ' +
'The `as` option encountered was something with type "boolean".\n' +
' in App (at **)',
]);
expect(getMeaningfulChildren(document.body)).toEqual(
hello
,
);
const root = ReactDOMClient.createRoot(
document.getElementById('container'),
);
root.render();
await waitForAll([]);
assertConsoleErrorDev([
'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
'string and, optionally, an `options` object with a valid `as` property. ' +
'The `href` argument encountered was `undefined`.\n' +
' in App (at **)',
'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
'string and, optionally, an `options` object with a valid `as` property. ' +
'The `href` argument encountered was something with type "function".\n' +
' in App (at **)',
'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
'string and, optionally, an `options` object with a valid `as` property. ' +
'The `href` argument encountered was an empty string.\n' +
' in App (at **)',
'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
'string and, optionally, an `options` object with a valid `as` property. ' +
'The `options` argument encountered was something with type "boolean".\n' +
' in App (at **)',
'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
'string and, optionally, an `options` object with a valid `as` property. ' +
'The `as` option encountered was something with type "boolean".\n' +
' in App (at **)',
]);
});
});
describe('Stylesheet Resources', () => {
it('treats link rel stylesheet elements as a stylesheet resource when it includes a precedence when server rendering', async () => {
await act(() => {
const {pipe} = renderToPipeableStream(
,
);
});
it('treats link rel stylesheet elements as a stylesheet resource when it includes a precedence when client rendering', async () => {
const root = ReactDOMClient.createRoot(document);
root.render(
,
);
});
it('treats link rel stylesheet elements as a stylesheet resource when it includes a precedence when hydrating', async () => {
await act(() => {
const {pipe} = renderToPipeableStream(
,
);
});
it('retains styles even after the last referring Resource unmounts', async () => {
// This test is true until a future update where there is some form of garbage collection.
const root = ReactDOMClient.createRoot(document);
root.render(
{null}
hello
,
);
await waitForAll([]);
await act(() => {
loadPreloads();
loadStylesheets();
});
await assertLog(['load preload: baz', 'load stylesheet: baz']);
// The reason we do not see preloads in the head is they are inserted synchronously
// during render and then when the new singleton mounts it resets it's content, retaining only styles
expect(getMeaningfulChildren(document)).toEqual(
hello
,
);
});
it('can support styles inside portals to a shadowRoot', async () => {
const shadow = document.body.attachShadow({mode: 'open'});
const root = ReactDOMClient.createRoot(container);
root.render(
<>
{ReactDOM.createPortal(
,
]);
});
it('can support styles inside portals to an element in shadowRoots', async () => {
const template = document.createElement('template');
template.innerHTML =
"
,
]);
});
it('escapes hrefs when selecting matching elements in the document when rendering Resources', async () => {
function App() {
ReactDOM.preload('preload', {as: 'style'});
ReactDOM.preload('with\nnewline', {as: 'style'});
return (
,
);
});
it('escapes hrefs when selecting matching elements in the document when using preload and preinit', async () => {
await act(() => {
const {pipe} = renderToPipeableStream(
,
);
});
it('can hoist styles flushed early even when no other style dependencies are flushed on completion', async () => {
await act(() => {
renderToPipeableStream(
loading...
,
);
// When we resolve first we flush the style tag because it is ready but we aren't yet ready to
// flush the entire boundary and reveal it.
await act(() => {
resolveText('first');
});
expect(getMeaningfulChildren(document)).toEqual(
loading...
,
);
// When we resolve second we flush the rest of the boundary segments and reveal the boundary. The style tag
// is hoisted during this reveal process even though no other styles flushed during this tick
await act(() => {
resolveText('second');
});
expect(getMeaningfulChildren(document)).toEqual(
first
second
,
);
});
it('can emit multiple style rules into a single style tag for a given precedence', async () => {
await act(() => {
renderToPipeableStream(
loading...
,
);
// When we resolve first we flush the style tag because it is ready but we aren't yet ready to
// flush the entire boundary and reveal it.
await act(() => {
resolveText('first');
});
await act(() => {
resolveText('second');
});
// Some sets of styles were ready before the entire boundary and they got emitted as early as they were
// ready. The remaining styles were ready when the boundary finished and they got grouped as well
expect(getMeaningfulChildren(document)).toEqual(
initial
first
second
,
);
// Client inserted style tags are not grouped together but can hydrate against a grouped set
ReactDOMClient.hydrateRoot(
document,
,
);
await waitForAll([]);
expect(getMeaningfulChildren(document)).toEqual(
initial
first
second
,
);
});
it('warns if you render a
,
).pipe(writable);
});
assertConsoleErrorDev([
'React expected the `href` prop for a
{/* skipping 10 */}
);
}
await act(() => {
renderToPipeableStream(
);
}
await act(() => {
renderToPipeableStream(