main
js 123 lines 3.96 KB
Raw
1 /**
2 * Copyright (c) Meta Platforms, Inc. and affiliates.
3 *
4 * This source code is licensed under the MIT license found in the
5 * LICENSE file in the root directory of this source tree.
6 *
7 * @emails react-core
8 * @jest-environment ./scripts/jest/ReactDOMServerIntegrationEnvironment
9 */
10
11 'use strict';
12
13 let JSDOM;
14 let React;
15 let ReactDOMClient;
16 let container;
17 let waitForAll;
18
19 describe('ReactDOM HostSingleton', () => {
20 beforeEach(() => {
21 jest.resetModules();
22 JSDOM = require('jsdom').JSDOM;
23 // Test Environment
24 const jsdom = new JSDOM(
25 '<!DOCTYPE html><html><head></head><body><div id="container">',
26 {
27 runScripts: 'dangerously',
28 },
29 );
30 global.window = jsdom.window;
31 global.document = jsdom.window.document;
32 container = global.document.getElementById('container');
33
34 React = require('react');
35 ReactDOMClient = require('react-dom/client');
36
37 const InternalTestUtils = require('internal-test-utils');
38 waitForAll = InternalTestUtils.waitForAll;
39 });
40
41 it('errors when a hoistable component becomes a Resource', async () => {
42 const errors = [];
43 function onError(e) {
44 errors.push(e.message);
45 }
46 const root = ReactDOMClient.createRoot(container, {
47 onUncaughtError: onError,
48 });
49
50 root.render(
51 <div>
52 <link rel="preload" href="bar" as="style" />
53 </div>,
54 );
55 await waitForAll([]);
56
57 root.render(
58 <div>
59 <link rel="stylesheet" href="bar" precedence="default" />
60 </div>,
61 );
62 await waitForAll([]);
63 if (__DEV__) {
64 expect(errors).toEqual([
65 `Expected <link> not to update to be updated to a stylesheet with precedence. Check the \`rel\`, \`href\`, and \`precedence\` props of this component. Alternatively, check whether two different <link> components render in the same slot or share the same key.
66
67 - <link rel=\"preload\" href=\"bar\" ... />
68 + <link rel=\"stylesheet\" href=\"bar\" precedence=\"default\" />`,
69 ]);
70 } else {
71 expect(errors).toEqual([
72 'Expected <link> not to update to be updated to a stylesheet with precedence. Check the `rel`, `href`, and `precedence` props of this component. Alternatively, check whether two different <link> components render in the same slot or share the same key.',
73 ]);
74 }
75 });
76
77 it('errors when a hoistable Resource becomes an instance', async () => {
78 const errors = [];
79 function onError(e) {
80 errors.push(e.message);
81 }
82 const root = ReactDOMClient.createRoot(container, {
83 onUncaughtError: onError,
84 });
85
86 root.render(
87 <div>
88 <link rel="stylesheet" href="bar" precedence="default" />
89 </div>,
90 );
91 await waitForAll([]);
92 const event = new window.Event('load');
93 const preloads = document.querySelectorAll('link[rel="preload"]');
94 for (let i = 0; i < preloads.length; i++) {
95 const node = preloads[i];
96 node.dispatchEvent(event);
97 }
98 const stylesheets = document.querySelectorAll('link[rel="preload"]');
99 for (let i = 0; i < stylesheets.length; i++) {
100 const node = stylesheets[i];
101 node.dispatchEvent(event);
102 }
103
104 root.render(
105 <div>
106 <link rel="foo" href="bar" />
107 </div>,
108 );
109 await waitForAll([]);
110 if (__DEV__) {
111 expect(errors).toEqual([
112 `Expected stylesheet with precedence to not be updated to a different kind of <link>. Check the \`rel\`, \`href\`, and \`precedence\` props of this component. Alternatively, check whether two different <link> components render in the same slot or share the same key.
113
114 - <link rel=\"stylesheet\" href=\"bar\" precedence=\"default\" />
115 + <link rel=\"foo\" href=\"bar\" />`,
116 ]);
117 } else {
118 expect(errors).toEqual([
119 'Expected stylesheet with precedence to not be updated to a different kind of <link>. Check the `rel`, `href`, and `precedence` props of this component. Alternatively, check whether two different <link> components render in the same slot or share the same key.',
120 ]);
121 }
122 });
123 });