@samitouri / QOS-React / commits / 7b196be091

Remove ReactTestUtils from ReactDOM-test (#28377)

Sebastian Silbermann committed Feb 20, 2024 at 16:51 UTC 7b196be09167f8fe9091168dab1769a552263065
1 file changed +86 -47
packages/react-dom/src/__tests__/ReactDOM-test.js
+86 -47
@@ -13,7 +13,6 @@ let React;
13 let ReactDOM;
14 let ReactDOMClient;
15 let ReactDOMServer;
16 -let ReactTestUtils;
16
17 let act;
18
@@ -24,7 +23,6 @@ describe('ReactDOM', () => {
23 ReactDOM = require('react-dom');
24 ReactDOMClient = require('react-dom/client');
25 ReactDOMServer = require('react-dom/server');
27 - ReactTestUtils = require('react-dom/test-utils');
26
27 act = require('internal-test-utils').act;
28 });
@@ -68,23 +66,37 @@ describe('ReactDOM', () => {
66 }
67 });
68
71 - it('allows a DOM element to be used with a string', () => {
69 + it('allows a DOM element to be used with a string', async () => {
70 const element = React.createElement('div', {className: 'foo'});
73 - const node = ReactTestUtils.renderIntoDocument(element);
71 + const container = document.createElement('div');
72 + const root = ReactDOMClient.createRoot(container);
73 + await act(() => {
74 + root.render(element);
75 + });
76 +
77 + const node = container.firstChild;
78 expect(node.tagName).toBe('DIV');
79 });
80
77 - it('should allow children to be passed as an argument', () => {
78 - const argNode = ReactTestUtils.renderIntoDocument(
79 - React.createElement('div', null, 'child'),
80 - );
81 + it('should allow children to be passed as an argument', async () => {
82 + const container = document.createElement('div');
83 + const root = ReactDOMClient.createRoot(container);
84 + await act(() => {
85 + root.render(React.createElement('div', null, 'child'));
86 + });
87 +
88 + const argNode = container.firstChild;
89 expect(argNode.innerHTML).toBe('child');
90 });
91
84 - it('should overwrite props.children with children argument', () => {
85 - const conflictNode = ReactTestUtils.renderIntoDocument(
86 - React.createElement('div', {children: 'fakechild'}, 'child'),
87 - );
92 + it('should overwrite props.children with children argument', async () => {
93 + const container = document.createElement('div');
94 + const root = ReactDOMClient.createRoot(container);
95 + await act(() => {
96 + root.render(React.createElement('div', {children: 'fakechild'}, 'child'));
97 + });
98 +
99 + const conflictNode = container.firstChild;
100 expect(conflictNode.innerHTML).toBe('child');
101 });
102
@@ -92,45 +104,67 @@ describe('ReactDOM', () => {
104 * We need to make sure that updates occur to the actual node that's in the
105 * DOM, instead of a stale cache.
106 */
95 - it('should purge the DOM cache when removing nodes', () => {
96 - let myDiv = ReactTestUtils.renderIntoDocument(
97 - <div>
98 - <div key="theDog" className="dog" />,
99 - <div key="theBird" className="bird" />
100 - </div>,
101 - );
107 + it('should purge the DOM cache when removing nodes', async () => {
108 + let container = document.createElement('div');
109 + let root = ReactDOMClient.createRoot(container);
110 + await act(() => {
111 + root.render(
112 + <div>
113 + <div key="theDog" className="dog" />,
114 + <div key="theBird" className="bird" />
115 + </div>,
116 + );
117 + });
118 // Warm the cache with theDog
103 - myDiv = ReactTestUtils.renderIntoDocument(
104 - <div>
105 - <div key="theDog" className="dogbeforedelete" />,
106 - <div key="theBird" className="bird" />,
107 - </div>,
108 - );
119 + container = document.createElement('div');
120 + root = ReactDOMClient.createRoot(container);
121 + await act(() => {
122 + root.render(
123 + <div>
124 + <div key="theDog" className="dogbeforedelete" />,
125 + <div key="theBird" className="bird" />,
126 + </div>,
127 + );
128 + });
129 // Remove theDog - this should purge the cache
110 - myDiv = ReactTestUtils.renderIntoDocument(
111 - <div>
112 - <div key="theBird" className="bird" />,
113 - </div>,
114 - );
130 + container = document.createElement('div');
131 + root = ReactDOMClient.createRoot(container);
132 + await act(() => {
133 + root.render(
134 + <div>
135 + <div key="theBird" className="bird" />,
136 + </div>,
137 + );
138 + });
139 // Now, put theDog back. It's now a different DOM node.
116 - myDiv = ReactTestUtils.renderIntoDocument(
117 - <div>
118 - <div key="theDog" className="dog" />,
119 - <div key="theBird" className="bird" />,
120 - </div>,
121 - );
140 + container = document.createElement('div');
141 + root = ReactDOMClient.createRoot(container);
142 + await act(() => {
143 + root.render(
144 + <div>
145 + <div key="theDog" className="dog" />,
146 + <div key="theBird" className="bird" />,
147 + </div>,
148 + );
149 + });
150 // Change the className of theDog. It will use the same element
123 - myDiv = ReactTestUtils.renderIntoDocument(
124 - <div>
125 - <div key="theDog" className="bigdog" />,
126 - <div key="theBird" className="bird" />,
127 - </div>,
128 - );
151 + container = document.createElement('div');
152 + root = ReactDOMClient.createRoot(container);
153 + await act(() => {
154 + root.render(
155 + <div>
156 + <div key="theDog" className="bigdog" />,
157 + <div key="theBird" className="bird" />,
158 + </div>,
159 + );
160 + });
161 +
162 + const myDiv = container.firstChild;
163 const dog = myDiv.childNodes[0];
164 expect(dog.className).toBe('bigdog');
165 });
166
133 - it('throws in render() if the mount callback is not a function', () => {
167 + it('throws in render() if the mount callback in legacy roots is not a function', async () => {
168 function Foo() {
169 this.a = 1;
170 this.b = 2;
@@ -182,7 +216,7 @@ describe('ReactDOM', () => {
216 );
217 });
218
185 - it('throws in render() if the update callback is not a function', () => {
219 + it('throws in render() if the update callback in legacy roots is not a function', async () => {
220 function Foo() {
221 this.a = 1;
222 this.b = 2;
@@ -411,21 +445,26 @@ describe('ReactDOM', () => {
445 });
446
447 it('should not crash calling findDOMNode inside a function component', async () => {
414 - const root = ReactDOMClient.createRoot(document.createElement('div'));
415 -
448 class Component extends React.Component {
449 render() {
450 return <div />;
451 }
452 }
453
422 - const instance = ReactTestUtils.renderIntoDocument(<Component />);
454 + const container = document.createElement('div');
455 + let root = ReactDOMClient.createRoot(container);
456 + let instance;
457 + await act(() => {
458 + root.render(<Component ref={current => (instance = current)} />);
459 + });
460 +
461 const App = () => {
462 ReactDOM.findDOMNode(instance);
463 return <div />;
464 };
465
466 if (__DEV__) {
467 + root = ReactDOMClient.createRoot(document.createElement('div'));
468 await act(() => {
469 root.render(<App />);
470 });