Skip to content

Commit

Permalink
[assert helpers] react-dom (pt 1) (#31897)
Browse files Browse the repository at this point in the history 
Converts ~half of react-dom tests
  • Loading branch information
@rickhanlonii
rickhanlonii authored Jan 2, 2025
1 parent c81312e commit a7c898d
Show file tree
Hide file tree
Showing 13 changed files with 781 additions and 573 deletions.
62 changes: 29 additions & 33 deletions packages/react-dom/src/__tests__/CSSPropertyOperations-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ const React = require('react');
const ReactDOMClient = require('react-dom/client');
const ReactDOMServer = require('react-dom/server');
const act = require('internal-test-utils').act;
const assertConsoleErrorDev =
require('internal-test-utils').assertConsoleErrorDev;

describe('CSSPropertyOperations', () => {
it('should automatically append `px` to relevant styles', () => {
Expand Down Expand Up @@ -103,15 +105,14 @@ describe('CSSPropertyOperations', () => {

const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await expect(async () => {
await act(() => {
root.render(<Comp />);
});
}).toErrorDev(
await act(() => {
root.render(<Comp />);
});
assertConsoleErrorDev([
'Unsupported style property background-color. Did you mean backgroundColor?' +
'\n in div (at **)' +
'\n in Comp (at **)',
);
]);
});

it('should warn when updating hyphenated style names', async () => {
Expand All @@ -132,11 +133,10 @@ describe('CSSPropertyOperations', () => {
await act(() => {
root.render(<Comp />);
});
await expect(async () => {
await act(() => {
root.render(<Comp style={styles} />);
});
}).toErrorDev([
await act(() => {
root.render(<Comp style={styles} />);
});
assertConsoleErrorDev([
'Unsupported style property -ms-transform. Did you mean msTransform?' +
'\n in div (at **)' +
'\n in Comp (at **)',
Expand Down Expand Up @@ -165,11 +165,10 @@ describe('CSSPropertyOperations', () => {

const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await expect(async () => {
await act(() => {
root.render(<Comp />);
});
}).toErrorDev([
await act(() => {
root.render(<Comp />);
});
assertConsoleErrorDev([
// msTransform is correct already and shouldn't warn
'Unsupported vendor-prefixed style property oTransform. ' +
'Did you mean OTransform?' +
Expand Down Expand Up @@ -202,11 +201,10 @@ describe('CSSPropertyOperations', () => {

const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await expect(async () => {
await act(() => {
root.render(<Comp />);
});
}).toErrorDev([
await act(() => {
root.render(<Comp />);
});
assertConsoleErrorDev([
"Style property values shouldn't contain a semicolon. " +
'Try "backgroundColor: blue" instead.' +
'\n in div (at **)' +
Expand All @@ -229,15 +227,14 @@ describe('CSSPropertyOperations', () => {

const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await expect(async () => {
await act(() => {
root.render(<Comp />);
});
}).toErrorDev(
await act(() => {
root.render(<Comp />);
});
assertConsoleErrorDev([
'`NaN` is an invalid value for the `fontSize` css style property.' +
'\n in div (at **)' +
'\n in Comp (at **)',
);
]);
});

it('should not warn when setting CSS custom properties', async () => {
Expand Down Expand Up @@ -265,15 +262,14 @@ describe('CSSPropertyOperations', () => {

const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await expect(async () => {
await act(() => {
root.render(<Comp />);
});
}).toErrorDev(
await act(() => {
root.render(<Comp />);
});
assertConsoleErrorDev([
'`Infinity` is an invalid value for the `fontSize` css style property.' +
'\n in div (at **)' +
'\n in Comp (at **)',
);
]);
});

it('should not add units to CSS custom properties', async () => {
Expand Down
21 changes: 13 additions & 8 deletions packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1333,7 +1333,8 @@ describe('DOMPropertyOperations', () => {
});

assertConsoleErrorDev([
'The `popoverTarget` prop expects the ID of an Element as a string. Received HTMLDivElement {} instead.',
'The `popoverTarget` prop expects the ID of an Element as a string. Received HTMLDivElement {} instead.\n' +
' in button (at **)',
]);

// Dedupe warning
Expand Down Expand Up @@ -1375,13 +1376,17 @@ describe('DOMPropertyOperations', () => {
expect(container.firstChild.getAttribute('value')).toBe('foo');
}
expect(container.firstChild.value).toBe('foo');
await expect(async () => {
await act(() => {
root.render(<input type="text" onChange={function () {}} />);
});
}).toErrorDev(
'A component is changing a controlled input to be uncontrolled',
);
await act(() => {
root.render(<input type="text" onChange={function () {}} />);
});
assertConsoleErrorDev([
'A component is changing a controlled input to be uncontrolled. ' +
'This is likely caused by the value changing from a defined to undefined, ' +
'which should not happen. Decide between using a controlled or uncontrolled ' +
'input element for the lifetime of the component. ' +
'More info: https://react.dev/link/controlled-components\n' +
' in input (at **)',
]);
if (disableInputAttributeSyncing) {
expect(container.firstChild.hasAttribute('value')).toBe(false);
} else {
Expand Down
17 changes: 9 additions & 8 deletions packages/react-dom/src/__tests__/InvalidEventListeners-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,14 @@ describe('InvalidEventListeners', () => {
let React;
let ReactDOMClient;
let act;
let assertConsoleErrorDev;
let container;

beforeEach(() => {
jest.resetModules();
React = require('react');
ReactDOMClient = require('react-dom/client');
act = require('internal-test-utils').act;
({act, assertConsoleErrorDev} = require('internal-test-utils'));

container = document.createElement('div');
document.body.appendChild(container);
Expand All @@ -34,13 +35,13 @@ describe('InvalidEventListeners', () => {

it('should prevent non-function listeners, at dispatch', async () => {
const root = ReactDOMClient.createRoot(container);
await expect(async () => {
await act(() => {
root.render(<div onClick="not a function" />);
});
}).toErrorDev(
'Expected `onClick` listener to be a function, instead got a value of `string` type.',
);
await act(() => {
root.render(<div onClick="not a function" />);
});
assertConsoleErrorDev([
'Expected `onClick` listener to be a function, instead got a value of `string` type.\n' +
' in div (at **)',
]);
const node = container.firstChild;

console.error = jest.fn();
Expand Down
90 changes: 50 additions & 40 deletions packages/react-dom/src/__tests__/ReactChildReconciler-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,15 @@
let React;
let ReactDOMClient;
let act;
let assertConsoleErrorDev;

describe('ReactChildReconciler', () => {
beforeEach(() => {
jest.resetModules();

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

function createIterable(array) {
Expand Down Expand Up @@ -62,15 +63,21 @@ describe('ReactChildReconciler', () => {

const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await expect(async () => {
await act(() => {
root.render(
<div>
<h1>{iterableFunction}</h1>
</div>,
);
});
}).toErrorDev('Functions are not valid as a React child');
await act(() => {
root.render(
<div>
<h1>{iterableFunction}</h1>
</div>,
);
});
assertConsoleErrorDev([
'Functions are not valid as a React child. ' +
'This may happen if you return fn instead of <fn /> from render. ' +
'Or maybe you meant to call this function rather than return it.\n' +
' <h1>{fn}</h1>\n' +
' in h1 (at **)' +
(gate('enableOwnerStacks') ? '' : '\n in div (at **)'),
]);
const node = container.firstChild;

expect(node.innerHTML).toContain(''); // h1
Expand All @@ -85,16 +92,18 @@ describe('ReactChildReconciler', () => {

const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await expect(async () => {
await act(() => {
root.render(<Component />);
});
}).toErrorDev(
'Keys should be unique so that components maintain their identity ' +
'across updates. Non-unique keys may cause children to be ' +
'duplicated and/or omitted — the behavior is unsupported and ' +
'could change in a future version.',
);
await act(() => {
root.render(<Component />);
});
assertConsoleErrorDev([
'Encountered two children with the same key, `1`. ' +
'Keys should be unique so that components maintain their identity across updates. ' +
'Non-unique keys may cause children to be duplicated and/or omitted — ' +
'the behavior is unsupported and could change in a future version.\n' +
(gate('enableOwnerStacks') ? '' : ' in div (at **)\n') +
' in div (at **)\n' +
' in Component (at **)',
]);
});

it('warns for duplicated array keys with component stack info', async () => {
Expand All @@ -118,11 +127,10 @@ describe('ReactChildReconciler', () => {

const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await expect(async () => {
await act(() => {
root.render(<GrandParent />);
});
}).toErrorDev(
await act(() => {
root.render(<GrandParent />);
});
assertConsoleErrorDev([
'Encountered two children with the same key, `1`. ' +
'Keys should be unique so that components maintain their identity ' +
'across updates. Non-unique keys may cause children to be ' +
Expand All @@ -135,7 +143,7 @@ describe('ReactChildReconciler', () => {
? ''
: ' in Parent (at **)\n') +
' in GrandParent (at **)',
);
]);
});

it('warns for duplicated iterable keys', async () => {
Expand All @@ -147,16 +155,19 @@ describe('ReactChildReconciler', () => {

const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await expect(async () => {
await act(() => {
root.render(<Component />);
});
}).toErrorDev(
'Keys should be unique so that components maintain their identity ' +
await act(() => {
root.render(<Component />);
});
assertConsoleErrorDev([
'Encountered two children with the same key, `1`. ' +
'Keys should be unique so that components maintain their identity ' +
'across updates. Non-unique keys may cause children to be ' +
'duplicated and/or omitted — the behavior is unsupported and ' +
'could change in a future version.',
);
'could change in a future version.\n' +
' in div (at **)\n' +
(gate(flags => flags.enableOwnerStacks) ? '' : ' in div (at **)\n') +
' in Component (at **)',
]);
});

it('warns for duplicated iterable keys with component stack info', async () => {
Expand All @@ -180,11 +191,10 @@ describe('ReactChildReconciler', () => {

const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await expect(async () => {
await act(() => {
root.render(<GrandParent />);
});
}).toErrorDev(
await act(() => {
root.render(<GrandParent />);
});
assertConsoleErrorDev([
'Encountered two children with the same key, `1`. ' +
'Keys should be unique so that components maintain their identity ' +
'across updates. Non-unique keys may cause children to be ' +
Expand All @@ -197,6 +207,6 @@ describe('ReactChildReconciler', () => {
? ''
: ' in Parent (at **)\n') +
' in GrandParent (at **)',
);
]);
});
});
Loading

0 comments on commit a7c898d

Please sign in to comment.