{"files":[{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMAttribute-test.js","status":"M"}],"parents":["0c45e8307135dc275b18b3a8fa5c85ba97d20a42"],"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMAttribute-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMAttribute-test.js\nindex 33ebaa179b..e88bde8482 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMAttribute-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMAttribute-test.js\n@@ -11,85 +11,114 @@\n \n describe('ReactDOM unknown attribute', () => {\n let React;\n- let ReactDOM;\n+ let ReactDOMClient;\n+ let act;\n \n beforeEach(() => {\n jest.resetModules();\n React = require('react');\n- ReactDOM = require('react-dom');\n+ ReactDOMClient = require('react-dom\/client');\n+ act = require('internal-test-utils').act;\n });\n \n- function testUnknownAttributeRemoval(givenValue) {\n+ async function testUnknownAttributeRemoval(givenValue) {\n const el = document.createElement('div');\n- ReactDOM.render(

, el);\n+ const root = ReactDOMClient.createRoot(el);\n+\n+ await act(() => {\n+ root.render(

);\n+ });\n+\n expect(el.firstChild.getAttribute('unknown')).toBe('something');\n- ReactDOM.render(

, el);\n+\n+ await act(() => {\n+ root.render(

);\n+ });\n+\n expect(el.firstChild.hasAttribute('unknown')).toBe(false);\n }\n \n- function testUnknownAttributeAssignment(givenValue, expectedDOMValue) {\n+ async function testUnknownAttributeAssignment(givenValue, expectedDOMValue) {\n const el = document.createElement('div');\n- ReactDOM.render(

, el);\n+ const root = ReactDOMClient.createRoot(el);\n+\n+ await act(() => {\n+ root.render(

);\n+ });\n+\n expect(el.firstChild.getAttribute('unknown')).toBe('something');\n- ReactDOM.render(

, el);\n+\n+ await act(() => {\n+ root.render(

);\n+ });\n+\n expect(el.firstChild.getAttribute('unknown')).toBe(expectedDOMValue);\n }\n \n describe('unknown attributes', () => {\n- it('removes values null and undefined', () => {\n- testUnknownAttributeRemoval(null);\n- testUnknownAttributeRemoval(undefined);\n+ it('removes values null and undefined', async () => {\n+ await testUnknownAttributeRemoval(null);\n+ await testUnknownAttributeRemoval(undefined);\n });\n \n- it('changes values true, false to null, and also warns once', () => {\n- expect(() => testUnknownAttributeAssignment(true, null)).toErrorDev(\n+ it('changes values true, false to null, and also warns once', async () => {\n+ await expect(() => testUnknownAttributeAssignment(true, null)).toErrorDev(\n 'Received `true` for a non-boolean attribute `unknown`.\\n\\n' +\n 'If you want to write it to the DOM, pass a string instead: ' +\n 'unknown=\"true\" or unknown={value.toString()}.\\n' +\n ' in div (at **)',\n );\n- testUnknownAttributeAssignment(false, null);\n+ await testUnknownAttributeAssignment(false, null);\n });\n \n- it('removes unknown attributes that were rendered but are now missing', () => {\n+ it('removes unknown attributes that were rendered but are now missing', async () => {\n const el = document.createElement('div');\n- ReactDOM.render(

, el);\n+ const root = ReactDOMClient.createRoot(el);\n+\n+ await act(() => {\n+ root.render(

);\n+ });\n+\n expect(el.firstChild.getAttribute('unknown')).toBe('something');\n- ReactDOM.render(

, el);\n+\n+ await act(() => {\n+ root.render(

);\n+ });\n+\n expect(el.firstChild.hasAttribute('unknown')).toBe(false);\n });\n \n- it('passes through strings', () => {\n- testUnknownAttributeAssignment('a string', 'a string');\n+ it('passes through strings', async () => {\n+ await testUnknownAttributeAssignment('a string', 'a string');\n });\n \n- it('coerces numbers to strings', () => {\n- testUnknownAttributeAssignment(0, '0');\n- testUnknownAttributeAssignment(-1, '-1');\n- testUnknownAttributeAssignment(42, '42');\n- testUnknownAttributeAssignment(9000.99, '9000.99');\n+ it('coerces numbers to strings', async () => {\n+ await testUnknownAttributeAssignment(0, '0');\n+ await testUnknownAttributeAssignment(-1, '-1');\n+ await testUnknownAttributeAssignment(42, '42');\n+ await testUnknownAttributeAssignment(9000.99, '9000.99');\n });\n \n- it('coerces NaN to strings and warns', () => {\n- expect(() => testUnknownAttributeAssignment(NaN, 'NaN')).toErrorDev(\n+ it('coerces NaN to strings and warns', async () => {\n+ await expect(() => testUnknownAttributeAssignment(NaN, 'NaN')).toErrorDev(\n 'Warning: Received NaN for the `unknown` attribute. ' +\n 'If this is expected, cast the value to a string.\\n' +\n ' in div (at **)',\n );\n });\n \n- it('coerces objects to strings and warns', () => {\n+ it('coerces objects to strings and warns', async () => {\n const lol = {\n toString() {\n return 'lol';\n },\n };\n \n- testUnknownAttributeAssignment({hello: 'world'}, '[object Object]');\n- testUnknownAttributeAssignment(lol, 'lol');\n+ await testUnknownAttributeAssignment({hello: 'world'}, '[object Object]');\n+ await testUnknownAttributeAssignment(lol, 'lol');\n });\n \n- it('throws with Temporal-like objects', () => {\n+ it('throws with Temporal-like objects', async () => {\n class TemporalLike {\n valueOf() {\n \/\/ Throwing here is the behavior of ECMAScript \"Temporal\" date\/time API.\n@@ -102,16 +131,16 @@ describe('ReactDOM unknown attribute', () => {\n }\n const test = () =>\n testUnknownAttributeAssignment(new TemporalLike(), null);\n- expect(() =>\n- expect(test).toThrowError(new TypeError('prod message')),\n+ await expect(() =>\n+ expect(test).rejects.toThrowError(new TypeError('prod message')),\n ).toErrorDev(\n 'Warning: The provided `unknown` attribute is an unsupported type TemporalLike.' +\n ' This value must be coerced to a string before using it here.',\n );\n });\n \n- it('removes symbols and warns', () => {\n- expect(() => testUnknownAttributeRemoval(Symbol('foo'))).toErrorDev(\n+ it('removes symbols and warns', async () => {\n+ await expect(() => testUnknownAttributeRemoval(Symbol('foo'))).toErrorDev(\n 'Warning: Invalid value for prop `unknown` on

tag. Either remove it ' +\n 'from the element, or pass a string or number value to keep it ' +\n 'in the DOM. For details, see https:\/\/reactjs.org\/link\/attribute-behavior \\n' +\n@@ -119,8 +148,8 @@ describe('ReactDOM unknown attribute', () => {\n );\n });\n \n- it('removes functions and warns', () => {\n- expect(() =>\n+ it('removes functions and warns', async () => {\n+ await expect(() =>\n testUnknownAttributeRemoval(function someFunction() {}),\n ).toErrorDev(\n 'Warning: Invalid value for prop `unknown` on

tag. Either remove ' +\n@@ -131,12 +160,16 @@ describe('ReactDOM unknown attribute', () => {\n );\n });\n \n- it('allows camelCase unknown attributes and warns', () => {\n+ it('allows camelCase unknown attributes and warns', async () => {\n const el = document.createElement('div');\n \n- expect(() =>\n- ReactDOM.render(

, el),\n- ).toErrorDev(\n+ await expect(async () => {\n+ const root = ReactDOMClient.createRoot(el);\n+\n+ await act(() => {\n+ root.render(

);\n+ });\n+ }).toErrorDev(\n 'React does not recognize the `helloWorld` prop on a DOM element. ' +\n 'If you intentionally want it to appear in the DOM as a custom ' +\n 'attribute, spell it as lowercase `helloworld` instead. ' +\n","body":"","commit":{"authorName":"Sebastian Silbermann","authorEmail":"silbermann.sebastian@gmail.com","revision":"36baa43560f839f0add7e0ec8125580e3b85235c","subject":"Convert ReactDOMAttribute to createRoot (#28089)","shortRevision":"36baa43560","authoredAt":"2024-01-26T10:17:26+01:00"}}

dillon1000/react

Files changed