{"parents":["9e13800e5731435a1e8ff4bd0266e7cd4adc8d4f"],"body":"Stacked on #28059\r\n\r\n---------","files":[{"path":"packages\/react-art\/src\/__tests__\/ReactART-test.js","status":"M"}],"commit":{"authorEmail":"jackpope1@gmail.com","subject":"Use createRoot in ReactART-test (#28060)","shortRevision":"6e03d0df82","authorName":"Jack Pope","authoredAt":"2024-01-23T17:25:18-05:00","revision":"6e03d0df82020a77a8c6afff7ef31a4f6d31911e"},"patch":"diff --git a\/packages\/react-art\/src\/__tests__\/ReactART-test.js b\/packages\/react-art\/src\/__tests__\/ReactART-test.js\nindex 3204e21b9e..b59af8ee02 100644\n--- a\/packages\/react-art\/src\/__tests__\/ReactART-test.js\n+++ b\/packages\/react-art\/src\/__tests__\/ReactART-test.js\n@@ -24,7 +24,7 @@ import Wedge from 'react-art\/Wedge';\n \n \/\/ Isolate DOM renderer.\n jest.resetModules();\n-const ReactDOM = require('react-dom');\n+\n const ReactDOMClient = require('react-dom\/client');\n const act = require('internal-test-utils').act;\n \n@@ -178,11 +178,11 @@ describe('ReactART', () => {\n testDOMNodeStructure(realNode, expectedStructure);\n });\n \n- it('should be able to reorder components', () => {\n- const instance = ReactDOM.render(\n- ,\n- container,\n- );\n+ it('should be able to reorder components', async () => {\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n \n const expectedStructure = {\n nodeName: 'svg',\n@@ -200,10 +200,12 @@ describe('ReactART', () => {\n ],\n };\n \n- const realNode = ReactDOM.findDOMNode(instance);\n+ const realNode = container.firstChild;\n testDOMNodeStructure(realNode, expectedStructure);\n \n- ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n+ });\n \n const expectedNewStructure = {\n nodeName: 'svg',\n@@ -224,7 +226,7 @@ describe('ReactART', () => {\n testDOMNodeStructure(realNode, expectedNewStructure);\n });\n \n- it('should be able to reorder many components', () => {\n+ it('should be able to reorder many components', async () => {\n class Component extends React.Component {\n render() {\n const chars = this.props.chars.split('');\n@@ -242,14 +244,17 @@ describe('ReactART', () => {\n const before = 'abcdefghijklmnopqrst';\n const after = 'mxhpgwfralkeoivcstzy';\n \n- let instance = ReactDOM.render(, container);\n- const realNode = ReactDOM.findDOMNode(instance);\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ const realNode = container.firstChild;\n expect(realNode.textContent).toBe(before);\n \n- instance = ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n+ });\n expect(realNode.textContent).toBe(after);\n-\n- ReactDOM.unmountComponentAtNode(container);\n });\n \n it('renders composite with lifecycle inside group', async () => {\n@@ -311,7 +316,7 @@ describe('ReactART', () => {\n expect(ref.constructor).toBe(CustomShape);\n });\n \n- it('resolves refs before componentDidUpdate', () => {\n+ it('resolves refs before componentDidUpdate', async () => {\n class CustomShape extends React.Component {\n render() {\n return ;\n@@ -341,24 +346,34 @@ describe('ReactART', () => {\n );\n }\n }\n- ReactDOM.render(, container);\n+\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n expect(ref).toBe(null);\n- ReactDOM.render(, container);\n+\n+ await act(() => {\n+ root.render();\n+ });\n expect(ref.constructor).toBe(CustomShape);\n });\n \n- it('adds and updates event handlers', () => {\n- function render(onClick) {\n- return ReactDOM.render(\n- \n- \n- <\/Surface>,\n- container,\n- );\n+ it('adds and updates event handlers', async () => {\n+ const root = ReactDOMClient.createRoot(container);\n+\n+ async function render(onClick) {\n+ await act(() => {\n+ root.render(\n+ \n+ \n+ <\/Surface>,\n+ );\n+ });\n }\n \n function doClick(instance) {\n- const path = ReactDOM.findDOMNode(instance).querySelector('path');\n+ const path = container.firstChild.querySelector('path');\n \n path.dispatchEvent(\n new MouseEvent('click', {\n@@ -368,12 +383,12 @@ describe('ReactART', () => {\n }\n \n const onClick1 = jest.fn();\n- let instance = render(onClick1);\n+ let instance = await render(onClick1);\n doClick(instance);\n expect(onClick1).toBeCalled();\n \n const onClick2 = jest.fn();\n- instance = render(onClick2);\n+ instance = await render(onClick2);\n doClick(instance);\n expect(onClick2).toBeCalled();\n });\n@@ -412,15 +427,17 @@ describe('ReactART', () => {\n \n await waitFor(['A']);\n \n- ReactDOM.render(\n- \n- \n- \n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+ \n \n- <\/CurrentRendererContext.Provider>\n- <\/Surface>,\n- container,\n- );\n+ \n+ \n+ <\/CurrentRendererContext.Provider>\n+ <\/Surface>,\n+ );\n+ });\n \n expect(ops).toEqual([null, 'ART']);\n \n"}

dillon1000/react

Files changed