diff --git a/packages/react-dom/src/__tests__/ReactDOM-test.js b/packages/react-dom/src/__tests__/ReactDOM-test.js index 00356cc725392..169e82a2cf5ae 100644 --- a/packages/react-dom/src/__tests__/ReactDOM-test.js +++ b/packages/react-dom/src/__tests__/ReactDOM-test.js @@ -13,7 +13,6 @@ let React; let ReactDOM; let ReactDOMClient; let ReactDOMServer; -let ReactTestUtils; let act; @@ -24,7 +23,6 @@ describe('ReactDOM', () => { ReactDOM = require('react-dom'); ReactDOMClient = require('react-dom/client'); ReactDOMServer = require('react-dom/server'); - ReactTestUtils = require('react-dom/test-utils'); act = require('internal-test-utils').act; }); @@ -68,23 +66,37 @@ describe('ReactDOM', () => { } }); - it('allows a DOM element to be used with a string', () => { + it('allows a DOM element to be used with a string', async () => { const element = React.createElement('div', {className: 'foo'}); - const node = ReactTestUtils.renderIntoDocument(element); + const container = document.createElement('div'); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render(element); + }); + + const node = container.firstChild; expect(node.tagName).toBe('DIV'); }); - it('should allow children to be passed as an argument', () => { - const argNode = ReactTestUtils.renderIntoDocument( - React.createElement('div', null, 'child'), - ); + it('should allow children to be passed as an argument', async () => { + const container = document.createElement('div'); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render(React.createElement('div', null, 'child')); + }); + + const argNode = container.firstChild; expect(argNode.innerHTML).toBe('child'); }); - it('should overwrite props.children with children argument', () => { - const conflictNode = ReactTestUtils.renderIntoDocument( - React.createElement('div', {children: 'fakechild'}, 'child'), - ); + it('should overwrite props.children with children argument', async () => { + const container = document.createElement('div'); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render(React.createElement('div', {children: 'fakechild'}, 'child')); + }); + + const conflictNode = container.firstChild; expect(conflictNode.innerHTML).toBe('child'); }); @@ -92,45 +104,67 @@ describe('ReactDOM', () => { * We need to make sure that updates occur to the actual node that's in the * DOM, instead of a stale cache. */ - it('should purge the DOM cache when removing nodes', () => { - let myDiv = ReactTestUtils.renderIntoDocument( -
-
, -
-
, - ); + it('should purge the DOM cache when removing nodes', async () => { + let container = document.createElement('div'); + let root = ReactDOMClient.createRoot(container); + await act(() => { + root.render( +
+
, +
+
, + ); + }); // Warm the cache with theDog - myDiv = ReactTestUtils.renderIntoDocument( -
-
, -
, -
, - ); + container = document.createElement('div'); + root = ReactDOMClient.createRoot(container); + await act(() => { + root.render( +
+
, +
, +
, + ); + }); // Remove theDog - this should purge the cache - myDiv = ReactTestUtils.renderIntoDocument( -
-
, -
, - ); + container = document.createElement('div'); + root = ReactDOMClient.createRoot(container); + await act(() => { + root.render( +
+
, +
, + ); + }); // Now, put theDog back. It's now a different DOM node. - myDiv = ReactTestUtils.renderIntoDocument( -
-
, -
, -
, - ); + container = document.createElement('div'); + root = ReactDOMClient.createRoot(container); + await act(() => { + root.render( +
+
, +
, +
, + ); + }); // Change the className of theDog. It will use the same element - myDiv = ReactTestUtils.renderIntoDocument( -
-
, -
, -
, - ); + container = document.createElement('div'); + root = ReactDOMClient.createRoot(container); + await act(() => { + root.render( +
+
, +
, +
, + ); + }); + + const myDiv = container.firstChild; const dog = myDiv.childNodes[0]; expect(dog.className).toBe('bigdog'); }); - it('throws in render() if the mount callback is not a function', () => { + it('throws in render() if the mount callback in legacy roots is not a function', async () => { function Foo() { this.a = 1; this.b = 2; @@ -182,7 +216,7 @@ describe('ReactDOM', () => { ); }); - it('throws in render() if the update callback is not a function', () => { + it('throws in render() if the update callback in legacy roots is not a function', async () => { function Foo() { this.a = 1; this.b = 2; @@ -411,21 +445,26 @@ describe('ReactDOM', () => { }); it('should not crash calling findDOMNode inside a function component', async () => { - const root = ReactDOMClient.createRoot(document.createElement('div')); - class Component extends React.Component { render() { return
; } } - const instance = ReactTestUtils.renderIntoDocument(); + const container = document.createElement('div'); + let root = ReactDOMClient.createRoot(container); + let instance; + await act(() => { + root.render( (instance = current)} />); + }); + const App = () => { ReactDOM.findDOMNode(instance); return
; }; if (__DEV__) { + root = ReactDOMClient.createRoot(document.createElement('div')); await act(() => { root.render(); });