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 = (
-
- This text causes no children in ul, just innerHTML
-
- );
- 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(
+
+ This text causes no children in ul, just innerHTML
+ ,
+ );
+ });
+
+ 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);
});
});