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); });