{"commit":{"authorName":"Jan Kassens","authorEmail":"jkassens@meta.com","authoredAt":"2024-01-23T10:04:13-05:00","revision":"b2d637128c89d450355622379e97c6c6b1c79435","shortRevision":"b2d637128c","subject":"Convert ReactDOMComponent-test to createRoot (#28034)"},"body":"Convert ReactDOMComponent-test to createRoot","patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMComponent-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMComponent-test.js\nindex 3ee19c72e2..f904d37205 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMComponent-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMComponent-test.js\n@@ -13,15 +13,20 @@ describe('ReactDOMComponent', () => {\n let React;\n let ReactTestUtils;\n let ReactDOM;\n+ let ReactDOMClient;\n let ReactDOMServer;\n const ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n \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 ReactDOMServer = require('react-dom\/server');\n ReactTestUtils = require('react-dom\/test-utils');\n+ act = require('internal-test-utils').act;\n });\n \n afterEach(() => {\n@@ -29,21 +34,33 @@ describe('ReactDOMComponent', () => {\n });\n \n describe('updateDOM', () => {\n- it('should handle className', () => {\n+ it('should handle className', async () => {\n const container = document.createElement('div');\n- ReactDOM.render(

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

);\n+ });\n \n- ReactDOM.render(

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

);\n+ });\n expect(container.firstChild.className).toEqual('foo');\n- ReactDOM.render(

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

);\n+ });\n expect(container.firstChild.className).toEqual('bar');\n- ReactDOM.render(

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

);\n+ });\n expect(container.firstChild.className).toEqual('');\n });\n \n- it('should gracefully handle various style value types', () => {\n+ it('should gracefully handle various style value types', async () => {\n const container = document.createElement('div');\n- ReactDOM.render(

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

);\n+ });\n const stubStyle = container.firstChild.style;\n \n \/\/ set initial style\n@@ -53,7 +70,9 @@ describe('ReactDOMComponent', () => {\n top: 2,\n fontFamily: 'Arial',\n };\n- ReactDOM.render(

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

);\n+ });\n expect(stubStyle.display).toEqual('block');\n expect(stubStyle.left).toEqual('1px');\n expect(stubStyle.top).toEqual('2px');\n@@ -61,14 +80,16 @@ describe('ReactDOMComponent', () => {\n \n \/\/ reset the style to their default state\n const reset = {display: '', left: null, top: false, fontFamily: true};\n- ReactDOM.render(

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

);\n+ });\n expect(stubStyle.display).toEqual('');\n expect(stubStyle.left).toEqual('');\n expect(stubStyle.top).toEqual('');\n expect(stubStyle.fontFamily).toEqual('');\n });\n \n- it('should not update styles when mutating a proxy style object', () => {\n+ it('should not update styles when mutating a proxy style object', async () => {\n const styleStore = {\n display: 'none',\n fontFamily: 'Arial',\n@@ -97,7 +118,10 @@ describe('ReactDOMComponent', () => {\n },\n };\n const container = document.createElement('div');\n- ReactDOM.render(

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

);\n+ });\n \n const stubStyle = container.firstChild.style;\n stubStyle.display = styles.display;\n@@ -105,26 +129,34 @@ describe('ReactDOMComponent', () => {\n \n styles.display = 'block';\n \n- ReactDOM.render(

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

);\n+ });\n expect(stubStyle.display).toEqual('none');\n expect(stubStyle.fontFamily).toEqual('Arial');\n expect(stubStyle.lineHeight).toEqual('1.2');\n \n styles.fontFamily = 'Helvetica';\n \n- ReactDOM.render(

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

);\n+ });\n expect(stubStyle.display).toEqual('none');\n expect(stubStyle.fontFamily).toEqual('Arial');\n expect(stubStyle.lineHeight).toEqual('1.2');\n \n- ReactDOM.render(

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

);\n+ });\n expect(stubStyle.display).toBe('');\n expect(stubStyle.fontFamily).toBe('');\n expect(stubStyle.lineHeight).toBe('');\n@@ -147,11 +179,14 @@ describe('ReactDOMComponent', () => {\n }\n });\n \n- it('should warn for unknown prop', () => {\n+ it('should warn for unknown prop', async () => {\n const container = document.createElement('div');\n- expect(() =>\n- ReactDOM.render(

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

{}} \/>);\n+ });\n+ }).toErrorDev(\n 'Warning: Invalid value for prop `foo` on

tag. Either remove it ' +\n 'from the element, or pass a string or number value to keep ' +\n 'it in the DOM. For details, see https:\/\/reactjs.org\/link\/attribute-behavior ' +\n@@ -159,11 +194,14 @@ describe('ReactDOMComponent', () => {\n );\n });\n \n- it('should group multiple unknown prop warnings together', () => {\n+ it('should group multiple unknown prop warnings together', async () => {\n const container = document.createElement('div');\n- expect(() =>\n- ReactDOM.render(

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

{}} baz={() => {}} \/>);\n+ });\n+ }).toErrorDev(\n 'Warning: Invalid values for props `foo`, `baz` on

tag. Either remove ' +\n 'them from the element, or pass a string or number value to keep ' +\n 'them in the DOM. For details, see https:\/\/reactjs.org\/link\/attribute-behavior ' +\n@@ -171,68 +209,90 @@ describe('ReactDOMComponent', () => {\n );\n });\n \n- it('should warn for onDblClick prop', () => {\n+ it('should warn for onDblClick prop', async () => {\n const container = document.createElement('div');\n- expect(() =>\n- ReactDOM.render(

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

{}} \/>);\n+ });\n+ }).toErrorDev(\n 'Warning: Invalid event handler property `onDblClick`. Did you mean `onDoubleClick`?\\n in div (at **)',\n );\n });\n \n- it('should warn for unknown string event handlers', () => {\n+ it('should warn for unknown string event handlers', async () => {\n const container = document.createElement('div');\n- expect(() =>\n- ReactDOM.render(

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

);\n+ });\n+ }).toErrorDev(\n 'Warning: Unknown event handler property `onUnknown`. It will be ignored.\\n in div (at **)',\n );\n expect(container.firstChild.hasAttribute('onUnknown')).toBe(false);\n expect(container.firstChild.onUnknown).toBe(undefined);\n- expect(() =>\n- ReactDOM.render(

, container),\n- ).toErrorDev(\n+ await expect(async () => {\n+ await act(() => {\n+ root.render(

);\n+ });\n+ }).toErrorDev(\n 'Warning: Unknown event handler property `onunknown`. It will be ignored.\\n in div (at **)',\n );\n expect(container.firstChild.hasAttribute('onunknown')).toBe(false);\n expect(container.firstChild.onunknown).toBe(undefined);\n- expect(() =>\n- ReactDOM.render(

, container),\n- ).toErrorDev(\n+ await expect(async () => {\n+ await act(() => {\n+ root.render(

);\n+ });\n+ }).toErrorDev(\n 'Warning: Unknown event handler property `on-unknown`. It will be ignored.\\n in div (at **)',\n );\n expect(container.firstChild.hasAttribute('on-unknown')).toBe(false);\n expect(container.firstChild['on-unknown']).toBe(undefined);\n });\n \n- it('should warn for unknown function event handlers', () => {\n+ it('should warn for unknown function event handlers', async () => {\n const container = document.createElement('div');\n- expect(() =>\n- ReactDOM.render(

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

, container),\n- ).toErrorDev(\n+ await expect(async () => {\n+ await act(() => {\n+ root.render(

);\n+ });\n+ }).toErrorDev(\n 'Warning: Unknown event handler property `on-unknown`. It will be ignored.\\n in div (at **)',\n );\n expect(container.firstChild.hasAttribute('on-unknown')).toBe(false);\n expect(container.firstChild['on-unknown']).toBe(undefined);\n });\n \n- it('should warn for badly cased React attributes', () => {\n+ it('should warn for badly cased React attributes', async () => {\n const container = document.createElement('div');\n- expect(() => ReactDOM.render(

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

);\n+ });\n+ }).toErrorDev(\n 'Warning: Invalid DOM property `CHILDREN`. Did you mean `children`?\\n in div (at **)',\n );\n expect(container.firstChild.getAttribute('CHILDREN')).toBe('5');\n@@ -248,14 +308,21 @@ describe('ReactDOMComponent', () => {\n ReactTestUtils.renderIntoDocument();\n });\n \n- it('should warn nicely about NaN in style', () => {\n+ it('should warn nicely about NaN in style', async () => {\n const style = {fontSize: NaN};\n const div = document.createElement('div');\n- expect(() => ReactDOM.render(, div)).toErrorDev(\n+ const root = ReactDOMClient.createRoot(div);\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Warning: `NaN` is an invalid value for the `fontSize` css style property.' +\n '\\n in span (at **)',\n );\n- ReactDOM.render(, div);\n+ await act(() => {\n+ root.render();\n+ });\n });\n \n it('throws with Temporal-like objects as style values', () => {\n@@ -280,50 +347,68 @@ describe('ReactDOMComponent', () => {\n );\n });\n \n- it('should update styles if initially null', () => {\n+ it('should update styles if initially null', async () => {\n let styles = null;\n const container = document.createElement('div');\n- ReactDOM.render(

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

);\n+ });\n \n const stubStyle = container.firstChild.style;\n \n styles = {display: 'block'};\n \n- ReactDOM.render(

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

);\n+ });\n expect(stubStyle.display).toEqual('block');\n });\n \n- it('should update styles if updated to null multiple times', () => {\n+ it('should update styles if updated to null multiple times', async () => {\n let styles = null;\n const container = document.createElement('div');\n- ReactDOM.render(

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

);\n+ });\n \n styles = {display: 'block'};\n const stubStyle = container.firstChild.style;\n \n- ReactDOM.render(

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

);\n+ });\n expect(stubStyle.display).toEqual('block');\n \n- ReactDOM.render(

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

);\n+ });\n expect(stubStyle.display).toEqual('');\n \n- ReactDOM.render(

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

);\n+ });\n expect(stubStyle.display).toEqual('block');\n \n- ReactDOM.render(

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

);\n+ });\n expect(stubStyle.display).toEqual('');\n });\n \n- it('should allow named slot projection on both web components and regular DOM elements', () => {\n+ it('should allow named slot projection on both web components and regular DOM elements', async () => {\n const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n \n- ReactDOM.render(\n- \n- \n-

dillon1000/react

Files changed