Convert ReactDOMSVG to createRoot (#28074)
Sebastian Silbermann committed
Jan 26, 2024 at 10:17 UTC
b30ec67c4342c9e4ccf42e7b3f17e00ea3bf28bd
1 file changed
+65
-51
packages/react-dom/src/__tests__/ReactDOMSVG-test.js
+65
-51
@@ -6,18 +6,19 @@
6
*
7
* @emails react-core
8
*/
9
-
9
'use strict';
10
11
let React;
13
-let ReactDOM;
12
+let ReactDOMClient;
13
let ReactDOMServer;
14
+let act;
15
16
describe('ReactDOMSVG', () => {
17
beforeEach(() => {
18
React = require('react');
19
- ReactDOM = require('react-dom');
19
+ ReactDOMClient = require('react-dom/client');
20
ReactDOMServer = require('react-dom/server');
21
+ act = require('internal-test-utils').act;
22
});
23
24
it('creates initial namespaced markup', () => {
@@ -29,7 +30,7 @@ describe('ReactDOMSVG', () => {
30
expect(markup).toContain('xlink:href="http://i.imgur.com/w7GCRPb.png"');
31
});
32
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 () => {
34
const node = document.createElement('div');
35
let div,
36
div2,
@@ -45,43 +46,45 @@ describe('ReactDOMSVG', () => {
46
svg2,
47
svg3,
48
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)} />
73
</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>
75
</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
+ });
88
[svg, svg2, svg3, svg4].forEach(el => {
89
expect(el.namespaceURI).toBe('http://www.w3.org/2000/svg');
90
// SVG tagName is case sensitive.
@@ -110,7 +113,7 @@ describe('ReactDOMSVG', () => {
113
});
114
});
115
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 () => {
117
let inst,
118
div,
119
div2,
@@ -126,6 +129,7 @@ describe('ReactDOMSVG', () => {
129
130
class App extends React.Component {
131
state = {step: 0};
132
+
133
render() {
134
inst = this;
135
const {step} = this.state;
@@ -159,13 +163,17 @@ describe('ReactDOMSVG', () => {
163
}
164
165
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
+ });
177
178
[svg, svg2, svg3, svg4].forEach(el => {
179
expect(el.namespaceURI).toBe('http://www.w3.org/2000/svg');
@@ -193,7 +201,7 @@ describe('ReactDOMSVG', () => {
201
});
202
});
203
196
- it('can render SVG into a non-React SVG tree', () => {
204
+ it('can render SVG into a non-React SVG tree', async () => {
205
const outerSVGRoot = document.createElementNS(
206
'http://www.w3.org/2000/svg',
207
'svg',
@@ -204,12 +212,15 @@ describe('ReactDOMSVG', () => {
212
);
213
outerSVGRoot.appendChild(container);
214
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
+ });
219
expect(image.namespaceURI).toBe('http://www.w3.org/2000/svg');
220
expect(image.tagName).toBe('image');
221
});
222
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 () => {
224
const outerSVGRoot = document.createElementNS(
225
'http://www.w3.org/2000/svg',
226
'svg',
@@ -220,7 +231,10 @@ describe('ReactDOMSVG', () => {
231
);
232
outerSVGRoot.appendChild(container);
233
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
+ });
238
expect(div.namespaceURI).toBe('http://www.w3.org/1999/xhtml');
239
expect(div.tagName).toBe('DIV');
240
});