Skip to content

Commit 42ec588

Browse files
author
Sebastian Silbermann
committed
Remove ReactTestUtils from ReactDOM-test
1 parent c1fd2a9 commit 42ec588

File tree

1 file changed

+86
-47
lines changed

1 file changed

+86
-47
lines changed

‎packages/react-dom/src/__tests__/ReactDOM-test.js

Lines changed: 86 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ let React;
1313
let ReactDOM;
1414
let ReactDOMClient;
1515
let ReactDOMServer;
16-
let ReactTestUtils;
1716

1817
let act;
1918

@@ -24,7 +23,6 @@ describe('ReactDOM', () => {
2423
ReactDOM = require('react-dom');
2524
ReactDOMClient = require('react-dom/client');
2625
ReactDOMServer = require('react-dom/server');
27-
ReactTestUtils = require('react-dom/test-utils');
2826

2927
act = require('internal-test-utils').act;
3028
});
@@ -68,69 +66,105 @@ describe('ReactDOM', () => {
6866
}
6967
});
7068

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 () => {
7270
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;
7478
expect(node.tagName).toBe('DIV');
7579
});
7680

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;
8189
expect(argNode.innerHTML).toBe('child');
8290
});
8391

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;
88100
expect(conflictNode.innerHTML).toBe('child');
89101
});
90102

91103
/**
92104
* We need to make sure that updates occur to the actual node that's in the
93105
* DOM, instead of a stale cache.
94106
*/
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+
});
102118
// 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+
});
109129
// 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+
});
115139
// 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+
});
122150
// 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;
129163
const dog = myDiv.childNodes[0];
130164
expect(dog.className).toBe('bigdog');
131165
});
132166

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 () => {
134168
function Foo() {
135169
this.a = 1;
136170
this.b = 2;
@@ -182,7 +216,7 @@ describe('ReactDOM', () => {
182216
);
183217
});
184218

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 () => {
186220
function Foo() {
187221
this.a = 1;
188222
this.b = 2;
@@ -411,21 +445,26 @@ describe('ReactDOM', () => {
411445
});
412446

413447
it('should not crash calling findDOMNode inside a function component', async () => {
414-
const root = ReactDOMClient.createRoot(document.createElement('div'));
415-
416448
class Component extends React.Component {
417449
render() {
418450
return <div />;
419451
}
420452
}
421453

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+
423461
const App = () => {
424462
ReactDOM.findDOMNode(instance);
425463
return <div />;
426464
};
427465

428466
if (__DEV__) {
467+
root = ReactDOMClient.createRoot(document.createElement('div'));
429468
await act(() => {
430469
root.render(<App />);
431470
});

0 commit comments

Comments
 (0)