Convert CSSProperty to createRoot (#28181)
Sebastian Silbermann committed
Feb 2, 2024 at 09:14 UTC
f8b26862d6fdd4708a78638b697f37cebfb074db
1 file changed
+75
-38
packages/react-dom/src/__tests__/CSSPropertyOperations-test.js
+75
-38
@@ -10,8 +10,9 @@
10
'use strict';
11
12
const React = require('react');
13
-const ReactDOM = require('react-dom');
13
+const ReactDOMClient = require('react-dom/client');
14
const ReactDOMServer = require('react-dom/server');
15
+const act = require('internal-test-utils').act;
16
17
describe('CSSPropertyOperations', () => {
18
it('should automatically append `px` to relevant styles', () => {
@@ -66,15 +67,19 @@ describe('CSSPropertyOperations', () => {
67
expect(html).toContain('"--someColor:#000000"');
68
});
69
69
- it('should set style attribute when styles exist', () => {
70
+ it('should set style attribute when styles exist', async () => {
71
const styles = {
72
backgroundColor: '#000',
73
display: 'none',
74
};
74
- let div = <div style={styles} />;
75
- const root = document.createElement('div');
76
- div = ReactDOM.render(div, root);
77
- expect(/style=".*"/.test(root.innerHTML)).toBe(true);
75
+ const container = document.createElement('div');
76
+ const root = ReactDOMClient.createRoot(container);
77
+ await act(() => {
78
+ root.render(<div style={styles} />);
79
+ });
80
+
81
+ const div = container.firstChild;
82
+ expect(/style=".*"/.test(container.innerHTML)).toBe(true);
83
});
84
85
it('should not set style attribute when no styles exist', () => {
@@ -87,7 +92,7 @@ describe('CSSPropertyOperations', () => {
92
expect(/style=/.test(html)).toBe(false);
93
});
94
90
- it('should warn when using hyphenated style names', () => {
95
+ it('should warn when using hyphenated style names', async () => {
96
class Comp extends React.Component {
97
static displayName = 'Comp';
98
@@ -96,16 +101,20 @@ describe('CSSPropertyOperations', () => {
101
}
102
}
103
99
- const root = document.createElement('div');
100
-
101
- expect(() => ReactDOM.render(<Comp />, root)).toErrorDev(
104
+ const container = document.createElement('div');
105
+ const root = ReactDOMClient.createRoot(container);
106
+ await expect(async () => {
107
+ await act(() => {
108
+ root.render(<Comp />);
109
+ });
110
+ }).toErrorDev(
111
'Warning: Unsupported style property background-color. Did you mean backgroundColor?' +
112
'\n in div (at **)' +
113
'\n in Comp (at **)',
114
);
115
});
116
108
- it('should warn when updating hyphenated style names', () => {
117
+ it('should warn when updating hyphenated style names', async () => {
118
class Comp extends React.Component {
119
static displayName = 'Comp';
120
@@ -118,10 +127,16 @@ describe('CSSPropertyOperations', () => {
127
'-ms-transform': 'translate3d(0, 0, 0)',
128
'-webkit-transform': 'translate3d(0, 0, 0)',
129
};
121
- const root = document.createElement('div');
122
- ReactDOM.render(<Comp />, root);
123
-
124
- expect(() => ReactDOM.render(<Comp style={styles} />, root)).toErrorDev([
130
+ const container = document.createElement('div');
131
+ const root = ReactDOMClient.createRoot(container);
132
+ await act(() => {
133
+ root.render(<Comp />);
134
+ });
135
+ await expect(async () => {
136
+ await act(() => {
137
+ root.render(<Comp style={styles} />);
138
+ });
139
+ }).toErrorDev([
140
'Warning: Unsupported style property -ms-transform. Did you mean msTransform?' +
141
'\n in div (at **)' +
142
'\n in Comp (at **)',
@@ -131,7 +146,7 @@ describe('CSSPropertyOperations', () => {
146
]);
147
});
148
134
- it('warns when miscapitalizing vendored style names', () => {
149
+ it('warns when miscapitalizing vendored style names', async () => {
150
class Comp extends React.Component {
151
static displayName = 'Comp';
152
@@ -148,9 +163,13 @@ describe('CSSPropertyOperations', () => {
163
}
164
}
165
151
- const root = document.createElement('div');
152
-
153
- expect(() => ReactDOM.render(<Comp />, root)).toErrorDev([
166
+ const container = document.createElement('div');
167
+ const root = ReactDOMClient.createRoot(container);
168
+ await expect(async () => {
169
+ await act(() => {
170
+ root.render(<Comp />);
171
+ });
172
+ }).toErrorDev([
173
// msTransform is correct already and shouldn't warn
174
'Warning: Unsupported vendor-prefixed style property oTransform. ' +
175
'Did you mean OTransform?' +
@@ -163,7 +182,7 @@ describe('CSSPropertyOperations', () => {
182
]);
183
});
184
166
- it('should warn about style having a trailing semicolon', () => {
185
+ it('should warn about style having a trailing semicolon', async () => {
186
class Comp extends React.Component {
187
static displayName = 'Comp';
188
@@ -181,9 +200,13 @@ describe('CSSPropertyOperations', () => {
200
}
201
}
202
184
- const root = document.createElement('div');
185
-
186
- expect(() => ReactDOM.render(<Comp />, root)).toErrorDev([
203
+ const container = document.createElement('div');
204
+ const root = ReactDOMClient.createRoot(container);
205
+ await expect(async () => {
206
+ await act(() => {
207
+ root.render(<Comp />);
208
+ });
209
+ }).toErrorDev([
210
"Warning: Style property values shouldn't contain a semicolon. " +
211
'Try "backgroundColor: blue" instead.' +
212
'\n in div (at **)' +
@@ -195,7 +218,7 @@ describe('CSSPropertyOperations', () => {
218
]);
219
});
220
198
- it('should warn about style containing a NaN value', () => {
221
+ it('should warn about style containing a NaN value', async () => {
222
class Comp extends React.Component {
223
static displayName = 'Comp';
224
@@ -204,27 +227,34 @@ describe('CSSPropertyOperations', () => {
227
}
228
}
229
207
- const root = document.createElement('div');
208
-
209
- expect(() => ReactDOM.render(<Comp />, root)).toErrorDev(
230
+ const container = document.createElement('div');
231
+ const root = ReactDOMClient.createRoot(container);
232
+ await expect(async () => {
233
+ await act(() => {
234
+ root.render(<Comp />);
235
+ });
236
+ }).toErrorDev(
237
'Warning: `NaN` is an invalid value for the `fontSize` css style property.' +
238
'\n in div (at **)' +
239
'\n in Comp (at **)',
240
);
241
});
242
216
- it('should not warn when setting CSS custom properties', () => {
243
+ it('should not warn when setting CSS custom properties', async () => {
244
class Comp extends React.Component {
245
render() {
246
return <div style={{'--foo-primary': 'red', backgroundColor: 'red'}} />;
247
}
248
}
249
223
- const root = document.createElement('div');
224
- ReactDOM.render(<Comp />, root);
250
+ const container = document.createElement('div');
251
+ const root = ReactDOMClient.createRoot(container);
252
+ await act(() => {
253
+ root.render(<Comp />);
254
+ });
255
});
256
227
- it('should warn about style containing an Infinity value', () => {
257
+ it('should warn about style containing an Infinity value', async () => {
258
class Comp extends React.Component {
259
static displayName = 'Comp';
260
@@ -233,25 +263,32 @@ describe('CSSPropertyOperations', () => {
263
}
264
}
265
236
- const root = document.createElement('div');
237
-
238
- expect(() => ReactDOM.render(<Comp />, root)).toErrorDev(
266
+ const container = document.createElement('div');
267
+ const root = ReactDOMClient.createRoot(container);
268
+ await expect(async () => {
269
+ await act(() => {
270
+ root.render(<Comp />);
271
+ });
272
+ }).toErrorDev(
273
'Warning: `Infinity` is an invalid value for the `fontSize` css style property.' +
274
'\n in div (at **)' +
275
'\n in Comp (at **)',
276
);
277
});
278
245
- it('should not add units to CSS custom properties', () => {
279
+ it('should not add units to CSS custom properties', async () => {
280
class Comp extends React.Component {
281
render() {
282
return <div style={{'--foo': '5'}} />;
283
}
284
}
285
252
- const root = document.createElement('div');
253
- ReactDOM.render(<Comp />, root);
286
+ const container = document.createElement('div');
287
+ const root = ReactDOMClient.createRoot(container);
288
+ await act(() => {
289
+ root.render(<Comp />);
290
+ });
291
255
- expect(root.children[0].style.getPropertyValue('--foo')).toEqual('5');
292
+ expect(container.children[0].style.getPropertyValue('--foo')).toEqual('5');
293
});
294
});