diff --git a/packages/react-dom/src/__tests__/ReactDOM-test.js b/packages/react-dom/src/__tests__/ReactDOM-test.js index fbb29f99d7c86..00356cc725392 100644 --- a/packages/react-dom/src/__tests__/ReactDOM-test.js +++ b/packages/react-dom/src/__tests__/ReactDOM-test.js @@ -11,19 +11,25 @@ let React; let ReactDOM; +let ReactDOMClient; let ReactDOMServer; let ReactTestUtils; +let act; + describe('ReactDOM', () => { beforeEach(() => { jest.resetModules(); React = require('react'); 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; }); - it('should bubble onSubmit', function () { + it('should bubble onSubmit', async () => { const container = document.createElement('div'); let count = 0; @@ -50,8 +56,11 @@ describe('ReactDOM', () => { } document.body.appendChild(container); + const root = ReactDOMClient.createRoot(container); try { - ReactDOM.render(, container); + await act(() => { + root.render(); + }); buttonRef.click(); expect(count).toBe(1); } finally { @@ -228,7 +237,7 @@ describe('ReactDOM', () => { ); }); - it('preserves focus', () => { + it('preserves focus', async () => { let input; let input2; class A extends React.Component { @@ -255,8 +264,11 @@ describe('ReactDOM', () => { const log = []; const container = document.createElement('div'); document.body.appendChild(container); + const root = ReactDOMClient.createRoot(container); try { - ReactDOM.render(, container); + await act(() => { + root.render(); + }); input.focus(); // When the second input is added, let's simulate losing focus, which is @@ -277,7 +289,9 @@ describe('ReactDOM', () => { }); expect(document.activeElement.id).toBe('one'); - ReactDOM.render(, container); + await act(() => { + root.render(); + }); // input2 gets added, which causes input to get blurred. Then // componentDidUpdate focuses input2 and that should make it down to here, // not get overwritten by focus restoration. @@ -288,7 +302,7 @@ describe('ReactDOM', () => { } }); - it('calls focus() on autoFocus elements after they have been mounted to the DOM', () => { + it('calls focus() on autoFocus elements after they have been mounted to the DOM', async () => { const originalFocus = HTMLElement.prototype.focus; try { @@ -305,14 +319,16 @@ describe('ReactDOM', () => { const container = document.createElement('div'); document.body.appendChild(container); - ReactDOM.render( -
-

Auto-focus Test

- -

The above input should be focused after mount.

-
, - container, - ); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render( +
+

Auto-focus Test

+ +

The above input should be focused after mount.

+
, + ); + }); expect(inputFocusedAfterMount).toBe(true); expect(focusedElement.tagName).toBe('INPUT'); @@ -321,7 +337,7 @@ describe('ReactDOM', () => { } }); - it("shouldn't fire duplicate event handler while handling other nested dispatch", () => { + it("shouldn't fire duplicate event handler while handling other nested dispatch", async () => { const actual = []; class Wrapper extends React.Component { @@ -352,8 +368,11 @@ describe('ReactDOM', () => { const container = document.createElement('div'); document.body.appendChild(container); + const root = ReactDOMClient.createRoot(container); try { - ReactDOM.render(, container); + await act(() => { + root.render(); + }); const expected = [ '1st node clicked', @@ -366,7 +385,7 @@ describe('ReactDOM', () => { } }); - it('should not crash with devtools installed', () => { + it('should not crash with devtools installed', async () => { try { global.__REACT_DEVTOOLS_GLOBAL_HOOK__ = { inject: function () {}, @@ -382,14 +401,17 @@ describe('ReactDOM', () => { return
; } } - ReactDOM.render(, document.createElement('container')); + const root = ReactDOMClient.createRoot(document.createElement('div')); + await act(() => { + root.render(); + }); } finally { delete global.__REACT_DEVTOOLS_GLOBAL_HOOK__; } }); - it('should not crash calling findDOMNode inside a function component', () => { - const container = document.createElement('div'); + it('should not crash calling findDOMNode inside a function component', async () => { + const root = ReactDOMClient.createRoot(document.createElement('div')); class Component extends React.Component { render() { @@ -404,11 +426,13 @@ describe('ReactDOM', () => { }; if (__DEV__) { - ReactDOM.render(, container); + await act(() => { + root.render(); + }); } }); - it('reports stacks with re-entrant renderToString() calls on the client', () => { + it('reports stacks with re-entrant renderToString() calls on the client', async () => { function Child2(props) { return {props.children}; } @@ -441,8 +465,12 @@ describe('ReactDOM', () => { ); } - const container = document.createElement('div'); - expect(() => ReactDOM.render(, container)).toErrorDev([ + const root = ReactDOMClient.createRoot(document.createElement('div')); + await expect(async () => { + await act(() => { + root.render(); + }); + }).toErrorDev([ // ReactDOM(App > div > span) 'Invalid ARIA attribute `ariaTypo`. ARIA attributes follow the pattern aria-* and must be lowercase.\n' + ' in span (at **)\n' +