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' +