Skip to content

Commit ee10d6d

Browse files
author
Sebastian Silbermann
committed
Convert ReactDOMSVG to createRoot
1 parent 3d9b201 commit ee10d6d

File tree

1 file changed

+66
-52
lines changed

1 file changed

+66
-52
lines changed

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

Lines changed: 66 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,19 @@
66
*
77
* @emails react-core
88
*/
9-
109
'use strict';
1110

1211
let React;
13-
let ReactDOM;
12+
let ReactDOMClient;
1413
let ReactDOMServer;
14+
let act;
1515

1616
describe('ReactDOMSVG', () => {
1717
beforeEach(() => {
1818
React = require('react');
19-
ReactDOM = require('react-dom');
19+
ReactDOMClient = require('react-dom/client');
2020
ReactDOMServer = require('react-dom/server');
21+
act = require('internal-test-utils').act;
2122
});
2223

2324
it('creates initial namespaced markup', () => {
@@ -29,7 +30,7 @@ describe('ReactDOMSVG', () => {
2930
expect(markup).toContain('xlink:href="http://i.imgur.com/w7GCRPb.png"');
3031
});
3132

32-
it('creates elements with SVG namespace inside SVG tag during mount', () => {
33+
it('creates elements with SVG namespace inside SVG tag during mount', async () => {
3334
const node = document.createElement('div');
3435
let div,
3536
div2,
@@ -45,43 +46,45 @@ describe('ReactDOMSVG', () => {
4546
svg2,
4647
svg3,
4748
svg4;
48-
ReactDOM.render(
49-
<div>
50-
<svg ref={el => (svg = el)}>
51-
<g ref={el => (g = el)} strokeWidth="5">
52-
<svg ref={el => (svg2 = el)}>
53-
<foreignObject ref={el => (foreignObject = el)}>
54-
<svg ref={el => (svg3 = el)}>
55-
<svg ref={el => (svg4 = el)} />
56-
<image
57-
ref={el => (image = el)}
58-
xlinkHref="http://i.imgur.com/w7GCRPb.png"
59-
/>
60-
</svg>
61-
<div ref={el => (div = el)} />
49+
const root = ReactDOMClient.createRoot(node);
50+
await act(() => {
51+
root.render(
52+
<div>
53+
<svg ref={el => (svg = el)}>
54+
<g ref={el => (g = el)} strokeWidth="5">
55+
<svg ref={el => (svg2 = el)}>
56+
<foreignObject ref={el => (foreignObject = el)}>
57+
<svg ref={el => (svg3 = el)}>
58+
<svg ref={el => (svg4 = el)} />
59+
<image
60+
ref={el => (image = el)}
61+
xlinkHref="http://i.imgur.com/w7GCRPb.png"
62+
/>
63+
</svg>
64+
<div ref={el => (div = el)} />
65+
</foreignObject>
66+
</svg>
67+
<image
68+
ref={el => (image2 = el)}
69+
xlinkHref="http://i.imgur.com/w7GCRPb.png"
70+
/>
71+
<foreignObject ref={el => (foreignObject2 = el)}>
72+
<div ref={el => (div2 = el)} />
6273
</foreignObject>
63-
</svg>
64-
<image
65-
ref={el => (image2 = el)}
66-
xlinkHref="http://i.imgur.com/w7GCRPb.png"
67-
/>
68-
<foreignObject ref={el => (foreignObject2 = el)}>
69-
<div ref={el => (div2 = el)} />
70-
</foreignObject>
71-
</g>
72-
</svg>
73-
<p ref={el => (p = el)}>
74-
<svg>
75-
<image
76-
ref={el => (image3 = el)}
77-
xlinkHref="http://i.imgur.com/w7GCRPb.png"
78-
/>
74+
</g>
7975
</svg>
80-
</p>
81-
<div ref={el => (div3 = el)} />
82-
</div>,
83-
node,
84-
);
76+
<p ref={el => (p = el)}>
77+
<svg>
78+
<image
79+
ref={el => (image3 = el)}
80+
xlinkHref="http://i.imgur.com/w7GCRPb.png"
81+
/>
82+
</svg>
83+
</p>
84+
<div ref={el => (div3 = el)} />
85+
</div>,
86+
);
87+
});
8588
[svg, svg2, svg3, svg4].forEach(el => {
8689
expect(el.namespaceURI).toBe('http://www.w3.org/2000/svg');
8790
// SVG tagName is case sensitive.
@@ -110,7 +113,7 @@ describe('ReactDOMSVG', () => {
110113
});
111114
});
112115

113-
it('creates elements with SVG namespace inside SVG tag during update', () => {
116+
it('creates elements with SVG namespace inside SVG tag during update', async () => {
114117
let inst,
115118
div,
116119
div2,
@@ -126,6 +129,7 @@ describe('ReactDOMSVG', () => {
126129

127130
class App extends React.Component {
128131
state = {step: 0};
132+
129133
render() {
130134
inst = this;
131135
const {step} = this.state;
@@ -159,15 +163,19 @@ describe('ReactDOMSVG', () => {
159163
}
160164

161165
const node = document.createElement('div');
162-
ReactDOM.render(
163-
<svg ref={el => (svg = el)}>
164-
<App />
165-
</svg>,
166-
node,
167-
);
168-
inst.setState({step: 1});
166+
const root = ReactDOMClient.createRoot(node);
167+
await act(() => {
168+
root.render(
169+
<svg ref={el => (svg = el)}>
170+
<App />
171+
</svg>,
172+
);
173+
});
174+
await act(() => {
175+
inst.setState({step: 1});
176+
});
169177

170-
[svg, svg2, svg3, svg4].forEach(el => {
178+
[(svg, svg2, svg3, svg4)].forEach(el => {
171179
expect(el.namespaceURI).toBe('http://www.w3.org/2000/svg');
172180
// SVG tagName is case sensitive.
173181
expect(el.tagName).toBe('svg');
@@ -193,7 +201,7 @@ describe('ReactDOMSVG', () => {
193201
});
194202
});
195203

196-
it('can render SVG into a non-React SVG tree', () => {
204+
it('can render SVG into a non-React SVG tree', async () => {
197205
const outerSVGRoot = document.createElementNS(
198206
'http://www.w3.org/2000/svg',
199207
'svg',
@@ -204,12 +212,15 @@ describe('ReactDOMSVG', () => {
204212
);
205213
outerSVGRoot.appendChild(container);
206214
let image;
207-
ReactDOM.render(<image ref={el => (image = el)} />, container);
215+
const root = ReactDOMClient.createRoot(container);
216+
await act(() => {
217+
root.render(<image ref={el => (image = el)} />);
218+
});
208219
expect(image.namespaceURI).toBe('http://www.w3.org/2000/svg');
209220
expect(image.tagName).toBe('image');
210221
});
211222

212-
it('can render HTML into a foreignObject in non-React SVG tree', () => {
223+
it('can render HTML into a foreignObject in non-React SVG tree', async () => {
213224
const outerSVGRoot = document.createElementNS(
214225
'http://www.w3.org/2000/svg',
215226
'svg',
@@ -220,7 +231,10 @@ describe('ReactDOMSVG', () => {
220231
);
221232
outerSVGRoot.appendChild(container);
222233
let div;
223-
ReactDOM.render(<div ref={el => (div = el)} />, container);
234+
const root = ReactDOMClient.createRoot(container);
235+
await act(() => {
236+
root.render(<div ref={el => (div = el)} />);
237+
});
224238
expect(div.namespaceURI).toBe('http://www.w3.org/1999/xhtml');
225239
expect(div.tagName).toBe('DIV');
226240
});

0 commit comments

Comments
 (0)