diff --git a/packages/react-dom/src/__tests__/ReactCompositeComponentDOMMinimalism-test.js b/packages/react-dom/src/__tests__/ReactCompositeComponentDOMMinimalism-test.js index 7fc24cfbf2009..84de6278bad95 100644 --- a/packages/react-dom/src/__tests__/ReactCompositeComponentDOMMinimalism-test.js +++ b/packages/react-dom/src/__tests__/ReactCompositeComponentDOMMinimalism-test.js @@ -11,15 +11,13 @@ // Requires let React; -let ReactDOM; -let ReactTestUtils; +let ReactDOMClient; +let act; // Test components let LowerLevelComposite; let MyCompositeComponent; -let expectSingleChildlessDiv; - /** * Integration test, testing the combination of JSX with our unit of * abstraction, `ReactCompositeComponent` does not ever add superfluous DOM @@ -28,8 +26,8 @@ let expectSingleChildlessDiv; describe('ReactCompositeComponentDOMMinimalism', () => { beforeEach(() => { React = require('react'); - ReactDOM = require('react-dom'); - ReactTestUtils = require('react-dom/test-utils'); + ReactDOMClient = require('react-dom/client'); + act = require('internal-test-utils').act; LowerLevelComposite = class extends React.Component { render() { @@ -42,39 +40,51 @@ describe('ReactCompositeComponentDOMMinimalism', () => { return {this.props.children}; } }; - - expectSingleChildlessDiv = function (instance) { - const el = ReactDOM.findDOMNode(instance); - expect(el.tagName).toBe('DIV'); - expect(el.children.length).toBe(0); - }; }); - it('should not render extra nodes for non-interpolated text', () => { - let instance = A string child; - instance = ReactTestUtils.renderIntoDocument(instance); - expectSingleChildlessDiv(instance); + it('should not render extra nodes for non-interpolated text', async () => { + const container = document.createElement('div'); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render(A string child); + }); + + const instance = container.firstChild; + expect(instance.tagName).toBe('DIV'); + expect(instance.children.length).toBe(0); }); - it('should not render extra nodes for non-interpolated text', () => { - let instance = ( - {'Interpolated String Child'} - ); - instance = ReactTestUtils.renderIntoDocument(instance); - expectSingleChildlessDiv(instance); + it('should not render extra nodes for non-interpolated text', async () => { + const container = document.createElement('div'); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render( + + {'Interpolated String Child'} + , + ); + }); + + const instance = container.firstChild; + expect(instance.tagName).toBe('DIV'); + expect(instance.children.length).toBe(0); }); - it('should not render extra nodes for non-interpolated text', () => { - let instance = ( - - - - ); - instance = ReactTestUtils.renderIntoDocument(instance); - const el = ReactDOM.findDOMNode(instance); - expect(el.tagName).toBe('DIV'); - expect(el.children.length).toBe(1); - expect(el.children[0].tagName).toBe('UL'); - expect(el.children[0].children.length).toBe(0); + it('should not render extra nodes for non-interpolated text', async () => { + const container = document.createElement('div'); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render( + + + , + ); + }); + + const instance = container.firstChild; + expect(instance.tagName).toBe('DIV'); + expect(instance.children.length).toBe(1); + expect(instance.children[0].tagName).toBe('UL'); + expect(instance.children[0].children.length).toBe(0); }); });