Skip to content

Commit 59f4e73

Browse files
kassenskassens
committed
Upgrade ReactDOMShorthandCSSPropertyCollision-test to createRoot
Using the codemod from #27921 as a starting point, this migrates the test to `createRoot`.
1 parent 89b4389 commit 59f4e73

File tree

1 file changed

+84
-56
lines changed

1 file changed

+84
-56
lines changed

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

Lines changed: 84 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,30 @@
1010
'use strict';
1111

1212
describe('ReactDOMShorthandCSSPropertyCollision', () => {
13+
let act;
14+
1315
let React;
14-
let ReactDOM;
16+
let ReactDOMClient;
1517

1618
beforeEach(() => {
1719
jest.resetModules();
20+
21+
act = require('internal-test-utils').act;
1822
React = require('react');
19-
ReactDOM = require('react-dom');
23+
ReactDOMClient = require('react-dom/client');
2024
});
2125

22-
it('should warn for conflicting CSS shorthand updates', () => {
26+
it('should warn for conflicting CSS shorthand updates', async () => {
2327
const container = document.createElement('div');
24-
ReactDOM.render(<div style={{font: 'foo', fontStyle: 'bar'}} />, container);
25-
expect(() =>
26-
ReactDOM.render(<div style={{font: 'foo'}} />, container),
27-
).toErrorDev(
28+
const root = ReactDOMClient.createRoot(container);
29+
await act(() => {
30+
root.render(<div style={{font: 'foo', fontStyle: 'bar'}} />);
31+
});
32+
await expect(async () => {
33+
await act(() => {
34+
root.render(<div style={{font: 'foo'}} />);
35+
});
36+
}).toErrorDev(
2837
'Warning: Removing a style property during rerender (fontStyle) ' +
2938
'when a conflicting property is set (font) can lead to styling ' +
3039
"bugs. To avoid this, don't mix shorthand and non-shorthand " +
@@ -34,25 +43,30 @@ describe('ReactDOMShorthandCSSPropertyCollision', () => {
3443
);
3544

3645
// These updates are OK and don't warn:
37-
ReactDOM.render(<div style={{font: 'qux', fontStyle: 'bar'}} />, container);
38-
ReactDOM.render(<div style={{font: 'foo', fontStyle: 'baz'}} />, container);
46+
await act(() => {
47+
root.render(<div style={{font: 'qux', fontStyle: 'bar'}} />);
48+
});
49+
await act(() => {
50+
root.render(<div style={{font: 'foo', fontStyle: 'baz'}} />);
51+
});
3952

40-
expect(() =>
41-
ReactDOM.render(
42-
<div style={{font: 'qux', fontStyle: 'baz'}} />,
43-
container,
44-
),
45-
).toErrorDev(
53+
await expect(async () => {
54+
await act(() => {
55+
root.render(<div style={{font: 'qux', fontStyle: 'baz'}} />);
56+
});
57+
}).toErrorDev(
4658
'Warning: Updating a style property during rerender (font) when ' +
4759
'a conflicting property is set (fontStyle) can lead to styling ' +
4860
"bugs. To avoid this, don't mix shorthand and non-shorthand " +
4961
'properties for the same value; instead, replace the shorthand ' +
5062
'with separate values.' +
5163
'\n in div (at **)',
5264
);
53-
expect(() =>
54-
ReactDOM.render(<div style={{fontStyle: 'baz'}} />, container),
55-
).toErrorDev(
65+
await expect(async () => {
66+
await act(() => {
67+
root.render(<div style={{fontStyle: 'baz'}} />);
68+
});
69+
}).toErrorDev(
5670
'Warning: Removing a style property during rerender (font) when ' +
5771
'a conflicting property is set (fontStyle) can lead to styling ' +
5872
"bugs. To avoid this, don't mix shorthand and non-shorthand " +
@@ -63,32 +77,39 @@ describe('ReactDOMShorthandCSSPropertyCollision', () => {
6377

6478
// A bit of a special case: backgroundPosition isn't technically longhand
6579
// (it expands to backgroundPosition{X,Y} but so does background)
66-
ReactDOM.render(
67-
<div style={{background: 'yellow', backgroundPosition: 'center'}} />,
68-
container,
69-
);
70-
expect(() =>
71-
ReactDOM.render(<div style={{background: 'yellow'}} />, container),
72-
).toErrorDev(
80+
await act(() => {
81+
root.render(
82+
<div style={{background: 'yellow', backgroundPosition: 'center'}} />,
83+
);
84+
});
85+
await expect(async () => {
86+
await act(() => {
87+
root.render(<div style={{background: 'yellow'}} />);
88+
});
89+
}).toErrorDev(
7390
'Warning: Removing a style property during rerender ' +
7491
'(backgroundPosition) when a conflicting property is set ' +
7592
"(background) can lead to styling bugs. To avoid this, don't mix " +
7693
'shorthand and non-shorthand properties for the same value; ' +
7794
'instead, replace the shorthand with separate values.' +
7895
'\n in div (at **)',
7996
);
80-
ReactDOM.render(
81-
<div style={{background: 'yellow', backgroundPosition: 'center'}} />,
82-
container,
83-
);
97+
await act(() => {
98+
root.render(
99+
<div style={{background: 'yellow', backgroundPosition: 'center'}} />,
100+
);
101+
});
84102
// But setting them at the same time is OK:
85-
ReactDOM.render(
86-
<div style={{background: 'green', backgroundPosition: 'top'}} />,
87-
container,
88-
);
89-
expect(() =>
90-
ReactDOM.render(<div style={{backgroundPosition: 'top'}} />, container),
91-
).toErrorDev(
103+
await act(() => {
104+
root.render(
105+
<div style={{background: 'green', backgroundPosition: 'top'}} />,
106+
);
107+
});
108+
await expect(async () => {
109+
await act(() => {
110+
root.render(<div style={{backgroundPosition: 'top'}} />);
111+
});
112+
}).toErrorDev(
92113
'Warning: Removing a style property during rerender (background) ' +
93114
'when a conflicting property is set (backgroundPosition) can lead ' +
94115
"to styling bugs. To avoid this, don't mix shorthand and " +
@@ -98,26 +119,30 @@ describe('ReactDOMShorthandCSSPropertyCollision', () => {
98119
);
99120

100121
// A bit of an even more special case: borderLeft and borderStyle overlap.
101-
ReactDOM.render(
102-
<div style={{borderStyle: 'dotted', borderLeft: '1px solid red'}} />,
103-
container,
104-
);
105-
expect(() =>
106-
ReactDOM.render(<div style={{borderLeft: '1px solid red'}} />, container),
107-
).toErrorDev(
122+
await act(() => {
123+
root.render(
124+
<div style={{borderStyle: 'dotted', borderLeft: '1px solid red'}} />,
125+
);
126+
});
127+
await expect(async () => {
128+
await act(() => {
129+
root.render(<div style={{borderLeft: '1px solid red'}} />);
130+
});
131+
}).toErrorDev(
108132
'Warning: Removing a style property during rerender (borderStyle) ' +
109133
'when a conflicting property is set (borderLeft) can lead to ' +
110134
"styling bugs. To avoid this, don't mix shorthand and " +
111135
'non-shorthand properties for the same value; instead, replace the ' +
112136
'shorthand with separate values.' +
113137
'\n in div (at **)',
114138
);
115-
expect(() =>
116-
ReactDOM.render(
117-
<div style={{borderStyle: 'dashed', borderLeft: '1px solid red'}} />,
118-
container,
119-
),
120-
).toErrorDev(
139+
await expect(async () => {
140+
await act(() => {
141+
root.render(
142+
<div style={{borderStyle: 'dashed', borderLeft: '1px solid red'}} />,
143+
);
144+
});
145+
}).toErrorDev(
121146
'Warning: Updating a style property during rerender (borderStyle) ' +
122147
'when a conflicting property is set (borderLeft) can lead to ' +
123148
"styling bugs. To avoid this, don't mix shorthand and " +
@@ -126,13 +151,16 @@ describe('ReactDOMShorthandCSSPropertyCollision', () => {
126151
'\n in div (at **)',
127152
);
128153
// But setting them at the same time is OK:
129-
ReactDOM.render(
130-
<div style={{borderStyle: 'dotted', borderLeft: '2px solid red'}} />,
131-
container,
132-
);
133-
expect(() =>
134-
ReactDOM.render(<div style={{borderStyle: 'dotted'}} />, container),
135-
).toErrorDev(
154+
await act(() => {
155+
root.render(
156+
<div style={{borderStyle: 'dotted', borderLeft: '2px solid red'}} />,
157+
);
158+
});
159+
await expect(async () => {
160+
await act(() => {
161+
root.render(<div style={{borderStyle: 'dotted'}} />);
162+
});
163+
}).toErrorDev(
136164
'Warning: Removing a style property during rerender (borderLeft) ' +
137165
'when a conflicting property is set (borderStyle) can lead to ' +
138166
"styling bugs. To avoid this, don't mix shorthand and " +

0 commit comments

Comments
 (0)