@samitouri / QOS-React-2 / commits / 33068c9db9

Upgrade ReactDOMShorthandCSSPropertyCollision-test to createRoot (#27924)

Upgrade ReactDOMShorthandCSSPropertyCollision-test to createRoot Using the codemod from #27921 as a starting point, this migrates the test to `createRoot`.

Jan Kassens committed Jan 12, 2024 at 15:51 UTC 33068c9db9153a479bb29d138397cb9c32fabfdd
1 file changed +84 -56
packages/react-dom/src/__tests__/ReactDOMShorthandCSSPropertyCollision-test.js
+84 -56
@@ -10,21 +10,30 @@
10 'use strict';
11
12 describe('ReactDOMShorthandCSSPropertyCollision', () => {
13 + let act;
14 +
15 let React;
14 - let ReactDOM;
16 + let ReactDOMClient;
17
18 beforeEach(() => {
19 jest.resetModules();
20 +
21 + act = require('internal-test-utils').act;
22 React = require('react');
19 - ReactDOM = require('react-dom');
23 + ReactDOMClient = require('react-dom/client');
24 });
25
22 - it('should warn for conflicting CSS shorthand updates', () => {
26 + it('should warn for conflicting CSS shorthand updates', async () => {
27 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(
37 'Warning: Removing a style property during rerender (fontStyle) ' +
38 'when a conflicting property is set (font) can lead to styling ' +
39 "bugs. To avoid this, don't mix shorthand and non-shorthand " +
@@ -34,15 +43,18 @@ describe('ReactDOMShorthandCSSPropertyCollision', () => {
43 );
44
45 // 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 + });
52
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(
58 'Warning: Updating a style property during rerender (font) when ' +
59 'a conflicting property is set (fontStyle) can lead to styling ' +
60 "bugs. To avoid this, don't mix shorthand and non-shorthand " +
@@ -50,9 +62,11 @@ describe('ReactDOMShorthandCSSPropertyCollision', () => {
62 'with separate values.' +
63 '\n in div (at **)',
64 );
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(
70 'Warning: Removing a style property during rerender (font) when ' +
71 'a conflicting property is set (fontStyle) can lead to styling ' +
72 "bugs. To avoid this, don't mix shorthand and non-shorthand " +
@@ -63,13 +77,16 @@ describe('ReactDOMShorthandCSSPropertyCollision', () => {
77
78 // A bit of a special case: backgroundPosition isn't technically longhand
79 // (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(
90 'Warning: Removing a style property during rerender ' +
91 '(backgroundPosition) when a conflicting property is set ' +
92 "(background) can lead to styling bugs. To avoid this, don't mix " +
@@ -77,18 +94,22 @@ describe('ReactDOMShorthandCSSPropertyCollision', () => {
94 'instead, replace the shorthand with separate values.' +
95 '\n in div (at **)',
96 );
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 + });
102 // 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(
113 'Warning: Removing a style property during rerender (background) ' +
114 'when a conflicting property is set (backgroundPosition) can lead ' +
115 "to styling bugs. To avoid this, don't mix shorthand and " +
@@ -98,13 +119,16 @@ describe('ReactDOMShorthandCSSPropertyCollision', () => {
119 );
120
121 // 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(
132 'Warning: Removing a style property during rerender (borderStyle) ' +
133 'when a conflicting property is set (borderLeft) can lead to ' +
134 "styling bugs. To avoid this, don't mix shorthand and " +
@@ -112,12 +136,13 @@ describe('ReactDOMShorthandCSSPropertyCollision', () => {
136 'shorthand with separate values.' +
137 '\n in div (at **)',
138 );
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(
146 'Warning: Updating a style property during rerender (borderStyle) ' +
147 'when a conflicting property is set (borderLeft) can lead to ' +
148 "styling bugs. To avoid this, don't mix shorthand and " +
@@ -126,13 +151,16 @@ describe('ReactDOMShorthandCSSPropertyCollision', () => {
151 '\n in div (at **)',
152 );
153 // 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(
164 'Warning: Removing a style property during rerender (borderLeft) ' +
165 'when a conflicting property is set (borderStyle) can lead to ' +
166 "styling bugs. To avoid this, don't mix shorthand and " +