Skip to content

Commit

Permalink
Upgrade ReactDOMShorthandCSSPropertyCollision-test to createRoot (fac…
Browse files Browse the repository at this point in the history 
…ebook#27924)

Upgrade ReactDOMShorthandCSSPropertyCollision-test to createRoot

Using the codemod from facebook#27921 as a starting point, this migrates the
test to `createRoot`.
  • Loading branch information
@kassens
kassens authored Jan 12, 2024
1 parent 0ac3ea4 commit 33068c9
Showing 1 changed file with 84 additions and 56 deletions.
140 changes: 84 additions & 56 deletions packages/react-dom/src/__tests__/ReactDOMShorthandCSSPropertyCollision-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,30 @@
'use strict';

describe('ReactDOMShorthandCSSPropertyCollision', () => {
let act;

let React;
let ReactDOM;
let ReactDOMClient;

beforeEach(() => {
jest.resetModules();

act = require('internal-test-utils').act;
React = require('react');
ReactDOM = require('react-dom');
ReactDOMClient = require('react-dom/client');
});

it('should warn for conflicting CSS shorthand updates', () => {
it('should warn for conflicting CSS shorthand updates', async () => {
const container = document.createElement('div');
ReactDOM.render(<div style={{font: 'foo', fontStyle: 'bar'}} />, container);
expect(() =>
ReactDOM.render(<div style={{font: 'foo'}} />, container),
).toErrorDev(
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(<div style={{font: 'foo', fontStyle: 'bar'}} />);
});
await expect(async () => {
await act(() => {
root.render(<div style={{font: 'foo'}} />);
});
}).toErrorDev(
'Warning: Removing a style property during rerender (fontStyle) ' +
'when a conflicting property is set (font) can lead to styling ' +
"bugs. To avoid this, don't mix shorthand and non-shorthand " +
Expand All @@ -34,25 +43,30 @@ describe('ReactDOMShorthandCSSPropertyCollision', () => {
);

// These updates are OK and don't warn:
ReactDOM.render(<div style={{font: 'qux', fontStyle: 'bar'}} />, container);
ReactDOM.render(<div style={{font: 'foo', fontStyle: 'baz'}} />, container);
await act(() => {
root.render(<div style={{font: 'qux', fontStyle: 'bar'}} />);
});
await act(() => {
root.render(<div style={{font: 'foo', fontStyle: 'baz'}} />);
});

expect(() =>
ReactDOM.render(
<div style={{font: 'qux', fontStyle: 'baz'}} />,
container,
),
).toErrorDev(
await expect(async () => {
await act(() => {
root.render(<div style={{font: 'qux', fontStyle: 'baz'}} />);
});
}).toErrorDev(
'Warning: Updating a style property during rerender (font) when ' +
'a conflicting property is set (fontStyle) can lead to styling ' +
"bugs. To avoid this, don't mix shorthand and non-shorthand " +
'properties for the same value; instead, replace the shorthand ' +
'with separate values.' +
'\n in div (at **)',
);
expect(() =>
ReactDOM.render(<div style={{fontStyle: 'baz'}} />, container),
).toErrorDev(
await expect(async () => {
await act(() => {
root.render(<div style={{fontStyle: 'baz'}} />);
});
}).toErrorDev(
'Warning: Removing a style property during rerender (font) when ' +
'a conflicting property is set (fontStyle) can lead to styling ' +
"bugs. To avoid this, don't mix shorthand and non-shorthand " +
Expand All @@ -63,32 +77,39 @@ describe('ReactDOMShorthandCSSPropertyCollision', () => {

// A bit of a special case: backgroundPosition isn't technically longhand
// (it expands to backgroundPosition{X,Y} but so does background)
ReactDOM.render(
<div style={{background: 'yellow', backgroundPosition: 'center'}} />,
container,
);
expect(() =>
ReactDOM.render(<div style={{background: 'yellow'}} />, container),
).toErrorDev(
await act(() => {
root.render(
<div style={{background: 'yellow', backgroundPosition: 'center'}} />,
);
});
await expect(async () => {
await act(() => {
root.render(<div style={{background: 'yellow'}} />);
});
}).toErrorDev(
'Warning: Removing a style property during rerender ' +
'(backgroundPosition) when a conflicting property is set ' +
"(background) can lead to styling bugs. To avoid this, don't mix " +
'shorthand and non-shorthand properties for the same value; ' +
'instead, replace the shorthand with separate values.' +
'\n in div (at **)',
);
ReactDOM.render(
<div style={{background: 'yellow', backgroundPosition: 'center'}} />,
container,
);
await act(() => {
root.render(
<div style={{background: 'yellow', backgroundPosition: 'center'}} />,
);
});
// But setting them at the same time is OK:
ReactDOM.render(
<div style={{background: 'green', backgroundPosition: 'top'}} />,
container,
);
expect(() =>
ReactDOM.render(<div style={{backgroundPosition: 'top'}} />, container),
).toErrorDev(
await act(() => {
root.render(
<div style={{background: 'green', backgroundPosition: 'top'}} />,
);
});
await expect(async () => {
await act(() => {
root.render(<div style={{backgroundPosition: 'top'}} />);
});
}).toErrorDev(
'Warning: Removing a style property during rerender (background) ' +
'when a conflicting property is set (backgroundPosition) can lead ' +
"to styling bugs. To avoid this, don't mix shorthand and " +
Expand All @@ -98,26 +119,30 @@ describe('ReactDOMShorthandCSSPropertyCollision', () => {
);

// A bit of an even more special case: borderLeft and borderStyle overlap.
ReactDOM.render(
<div style={{borderStyle: 'dotted', borderLeft: '1px solid red'}} />,
container,
);
expect(() =>
ReactDOM.render(<div style={{borderLeft: '1px solid red'}} />, container),
).toErrorDev(
await act(() => {
root.render(
<div style={{borderStyle: 'dotted', borderLeft: '1px solid red'}} />,
);
});
await expect(async () => {
await act(() => {
root.render(<div style={{borderLeft: '1px solid red'}} />);
});
}).toErrorDev(
'Warning: Removing a style property during rerender (borderStyle) ' +
'when a conflicting property is set (borderLeft) can lead to ' +
"styling bugs. To avoid this, don't mix shorthand and " +
'non-shorthand properties for the same value; instead, replace the ' +
'shorthand with separate values.' +
'\n in div (at **)',
);
expect(() =>
ReactDOM.render(
<div style={{borderStyle: 'dashed', borderLeft: '1px solid red'}} />,
container,
),
).toErrorDev(
await expect(async () => {
await act(() => {
root.render(
<div style={{borderStyle: 'dashed', borderLeft: '1px solid red'}} />,
);
});
}).toErrorDev(
'Warning: Updating a style property during rerender (borderStyle) ' +
'when a conflicting property is set (borderLeft) can lead to ' +
"styling bugs. To avoid this, don't mix shorthand and " +
Expand All @@ -126,13 +151,16 @@ describe('ReactDOMShorthandCSSPropertyCollision', () => {
'\n in div (at **)',
);
// But setting them at the same time is OK:
ReactDOM.render(
<div style={{borderStyle: 'dotted', borderLeft: '2px solid red'}} />,
container,
);
expect(() =>
ReactDOM.render(<div style={{borderStyle: 'dotted'}} />, container),
).toErrorDev(
await act(() => {
root.render(
<div style={{borderStyle: 'dotted', borderLeft: '2px solid red'}} />,
);
});
await expect(async () => {
await act(() => {
root.render(<div style={{borderStyle: 'dotted'}} />);
});
}).toErrorDev(
'Warning: Removing a style property during rerender (borderLeft) ' +
'when a conflicting property is set (borderStyle) can lead to ' +
"styling bugs. To avoid this, don't mix shorthand and " +
Expand Down

0 comments on commit 33068c9

Please sign in to comment.