From ec4149ac576cd390dcd77d02d5af28fbf9608acc Mon Sep 17 00:00:00 2001 From: Jack Pope Date: Tue, 23 Jan 2024 12:26:08 -0500 Subject: [PATCH 1/3] Remove ReactTestUtils from ReactArt-test --- .../react-art/src/__tests__/ReactART-test.js | 52 ++++++++++++------- 1 file changed, 33 insertions(+), 19 deletions(-) diff --git a/packages/react-art/src/__tests__/ReactART-test.js b/packages/react-art/src/__tests__/ReactART-test.js index 47b5958cf4c9c..2802cb18065f0 100644 --- a/packages/react-art/src/__tests__/ReactART-test.js +++ b/packages/react-art/src/__tests__/ReactART-test.js @@ -25,7 +25,8 @@ import Wedge from 'react-art/Wedge'; // Isolate DOM renderer. jest.resetModules(); const ReactDOM = require('react-dom'); -const ReactTestUtils = require('react-dom/test-utils'); +const ReactDOMClient = require('react-dom/client'); +const act = require('internal-test-utils').act; // Isolate test renderer. jest.resetModules(); @@ -42,6 +43,7 @@ let Surface; let TestComponent; let waitFor; +let groupRef; const Missing = {}; @@ -82,8 +84,9 @@ describe('ReactART', () => { ({waitFor} = require('internal-test-utils')); + groupRef = React.createRef(); TestComponent = class extends React.Component { - group = React.createRef(); + group = groupRef; render() { const a = ( @@ -132,17 +135,23 @@ describe('ReactART', () => { container = null; }); - it('should have the correct lifecycle state', () => { + it('should have the correct lifecycle state', async () => { let instance = ; - instance = ReactTestUtils.renderIntoDocument(instance); - const group = instance.group.current; + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render(instance); + }); + const group = groupRef.current; // Duck type test for an ART group expect(typeof group.indicate).toBe('function'); }); - it('should render a reasonable SVG structure in SVG mode', () => { + it('should render a reasonable SVG structure in SVG mode', async () => { let instance = ; - instance = ReactTestUtils.renderIntoDocument(instance); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render(instance); + }); const expectedStructure = { nodeName: 'svg', @@ -165,7 +174,7 @@ describe('ReactART', () => { ], }; - const realNode = ReactDOM.findDOMNode(instance); + const realNode = container.firstChild; testDOMNodeStructure(realNode, expectedStructure); }); @@ -243,7 +252,7 @@ describe('ReactART', () => { ReactDOM.unmountComponentAtNode(container); }); - it('renders composite with lifecycle inside group', () => { + it('renders composite with lifecycle inside group', async () => { let mounted = false; class CustomShape extends React.Component { @@ -255,18 +264,20 @@ describe('ReactART', () => { mounted = true; } } - - ReactTestUtils.renderIntoDocument( - - - - - , - ); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render( + + + + + , + ); + }); expect(mounted).toBe(true); }); - it('resolves refs before componentDidMount', () => { + it('resolves refs before componentDidMount', async () => { class CustomShape extends React.Component { render() { return ; @@ -293,7 +304,10 @@ describe('ReactART', () => { } } - ReactTestUtils.renderIntoDocument(); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render(); + }); expect(ref.constructor).toBe(CustomShape); }); From ad13f396af9304505b082a1fe6ab2ffe7d5cb7f4 Mon Sep 17 00:00:00 2001 From: Jack Pope Date: Tue, 23 Jan 2024 13:06:51 -0500 Subject: [PATCH 2/3] Fix lint errors --- packages/react-art/src/__tests__/ReactART-test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-art/src/__tests__/ReactART-test.js b/packages/react-art/src/__tests__/ReactART-test.js index 2802cb18065f0..3204e21b9e27e 100644 --- a/packages/react-art/src/__tests__/ReactART-test.js +++ b/packages/react-art/src/__tests__/ReactART-test.js @@ -136,7 +136,7 @@ describe('ReactART', () => { }); it('should have the correct lifecycle state', async () => { - let instance = ; + const instance = ; const root = ReactDOMClient.createRoot(container); await act(() => { root.render(instance); @@ -147,7 +147,7 @@ describe('ReactART', () => { }); it('should render a reasonable SVG structure in SVG mode', async () => { - let instance = ; + const instance = ; const root = ReactDOMClient.createRoot(container); await act(() => { root.render(instance); From f4111e2601199a30bb8c8099975b0d08e24a3c7f Mon Sep 17 00:00:00 2001 From: Jack Pope Date: Tue, 23 Jan 2024 15:09:39 -0500 Subject: [PATCH 3/3] Use createRoot in ReactART-test --- .../react-art/src/__tests__/ReactART-test.js | 88 +++++++++++-------- 1 file changed, 52 insertions(+), 36 deletions(-) diff --git a/packages/react-art/src/__tests__/ReactART-test.js b/packages/react-art/src/__tests__/ReactART-test.js index 3204e21b9e27e..eb76fa9c63344 100644 --- a/packages/react-art/src/__tests__/ReactART-test.js +++ b/packages/react-art/src/__tests__/ReactART-test.js @@ -24,7 +24,6 @@ import Wedge from 'react-art/Wedge'; // Isolate DOM renderer. jest.resetModules(); -const ReactDOM = require('react-dom'); const ReactDOMClient = require('react-dom/client'); const act = require('internal-test-utils').act; @@ -178,11 +177,11 @@ describe('ReactART', () => { testDOMNodeStructure(realNode, expectedStructure); }); - it('should be able to reorder components', () => { - const instance = ReactDOM.render( - , - container, - ); + it('should be able to reorder components', async () => { + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render(); + }); const expectedStructure = { nodeName: 'svg', @@ -200,10 +199,12 @@ describe('ReactART', () => { ], }; - const realNode = ReactDOM.findDOMNode(instance); + const realNode = container.firstChild; testDOMNodeStructure(realNode, expectedStructure); - ReactDOM.render(, container); + await act(() => { + root.render(); + }); const expectedNewStructure = { nodeName: 'svg', @@ -224,7 +225,7 @@ describe('ReactART', () => { testDOMNodeStructure(realNode, expectedNewStructure); }); - it('should be able to reorder many components', () => { + it('should be able to reorder many components', async () => { class Component extends React.Component { render() { const chars = this.props.chars.split(''); @@ -242,14 +243,17 @@ describe('ReactART', () => { const before = 'abcdefghijklmnopqrst'; const after = 'mxhpgwfralkeoivcstzy'; - let instance = ReactDOM.render(, container); - const realNode = ReactDOM.findDOMNode(instance); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render(); + }); + const realNode = container.firstChild; expect(realNode.textContent).toBe(before); - instance = ReactDOM.render(, container); + await act(() => { + root.render(); + }); expect(realNode.textContent).toBe(after); - - ReactDOM.unmountComponentAtNode(container); }); it('renders composite with lifecycle inside group', async () => { @@ -311,7 +315,7 @@ describe('ReactART', () => { expect(ref.constructor).toBe(CustomShape); }); - it('resolves refs before componentDidUpdate', () => { + it('resolves refs before componentDidUpdate', async () => { class CustomShape extends React.Component { render() { return ; @@ -341,24 +345,34 @@ describe('ReactART', () => { ); } } - ReactDOM.render(, container); + + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render(); + }); expect(ref).toBe(null); - ReactDOM.render(, container); + + await act(() => { + root.render(); + }); expect(ref.constructor).toBe(CustomShape); }); - it('adds and updates event handlers', () => { - function render(onClick) { - return ReactDOM.render( - - - , - container, - ); + it('adds and updates event handlers', async () => { + const root = ReactDOMClient.createRoot(container); + + async function render(onClick) { + await act(() => { + root.render( + + + , + ); + }); } function doClick(instance) { - const path = ReactDOM.findDOMNode(instance).querySelector('path'); + const path = container.firstChild.querySelector('path'); path.dispatchEvent( new MouseEvent('click', { @@ -368,12 +382,12 @@ describe('ReactART', () => { } const onClick1 = jest.fn(); - let instance = render(onClick1); + let instance = await render(onClick1); doClick(instance); expect(onClick1).toBeCalled(); const onClick2 = jest.fn(); - instance = render(onClick2); + instance = await render(onClick2); doClick(instance); expect(onClick2).toBeCalled(); }); @@ -412,15 +426,17 @@ describe('ReactART', () => { await waitFor(['A']); - ReactDOM.render( - - - + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render( + - - , - container, - ); + + + + , + ); + }); expect(ops).toEqual([null, 'ART']);