diff --git a/packages/react/src/__tests__/createReactClassIntegration-test.js b/packages/react/src/__tests__/createReactClassIntegration-test.js
index dff9042a1bd21..dfba4146f443a 100644
--- a/packages/react/src/__tests__/createReactClassIntegration-test.js
+++ b/packages/react/src/__tests__/createReactClassIntegration-test.js
@@ -14,7 +14,6 @@ let act;
let PropTypes;
let React;
let ReactDOMClient;
-let ReactTestUtils;
let createReactClass;
describe('create-react-class-integration', () => {
@@ -24,7 +23,6 @@ describe('create-react-class-integration', () => {
PropTypes = require('prop-types');
React = require('react');
ReactDOMClient = require('react-dom/client');
- ReactTestUtils = require('react-dom/test-utils');
createReactClass = require('create-react-class/factory')(
React.Component,
React.isValidElement,
@@ -231,7 +229,7 @@ describe('create-react-class-integration', () => {
]);
});
- it('should support statics', () => {
+ it('should support statics', async () => {
const Component = createReactClass({
statics: {
abc: 'def',
@@ -247,8 +245,13 @@ describe('create-react-class-integration', () => {
return ;
},
});
- let instance = ;
- instance = ReactTestUtils.renderIntoDocument(instance);
+ const container = document.createElement('div');
+ const root = ReactDOMClient.createRoot(container);
+ let instance;
+ await act(() => {
+ root.render( (instance = current)} />);
+ });
+
expect(instance.constructor.abc).toBe('def');
expect(Component.abc).toBe('def');
expect(instance.constructor.def).toBe(0);
@@ -261,7 +264,7 @@ describe('create-react-class-integration', () => {
expect(Component.pqr()).toBe(Component);
});
- it('should work with object getInitialState() return values', () => {
+ it('should work with object getInitialState() return values', async () => {
const Component = createReactClass({
getInitialState: function () {
return {
@@ -272,12 +275,17 @@ describe('create-react-class-integration', () => {
return ;
},
});
- let instance = ;
- instance = ReactTestUtils.renderIntoDocument(instance);
+ const container = document.createElement('div');
+ const root = ReactDOMClient.createRoot(container);
+ let instance;
+ await act(() => {
+ root.render( (instance = current)} />);
+ });
+
expect(instance.state.occupation).toEqual('clown');
});
- it('should work with getDerivedStateFromProps() return values', () => {
+ it('should work with getDerivedStateFromProps() return values', async () => {
const Component = createReactClass({
getInitialState() {
return {};
@@ -289,8 +297,12 @@ describe('create-react-class-integration', () => {
Component.getDerivedStateFromProps = () => {
return {occupation: 'clown'};
};
- let instance = ;
- instance = ReactTestUtils.renderIntoDocument(instance);
+ let instance;
+ const container = document.createElement('div');
+ const root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render( (instance = current)} />);
+ });
expect(instance.state.occupation).toEqual('clown');
});
@@ -328,8 +340,9 @@ describe('create-react-class-integration', () => {
expect(container.firstChild.className).toBe('foo');
});
- it('should throw with non-object getInitialState() return values', () => {
- [['an array'], 'a string', 1234].forEach(function (state) {
+ it('should throw with non-object getInitialState() return values', async () => {
+ // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+ for (const state of [['an array'], 'a string', 1234]) {
const Component = createReactClass({
getInitialState: function () {
return state;
@@ -338,16 +351,19 @@ describe('create-react-class-integration', () => {
return ;
},
});
- let instance = ;
- expect(function () {
- instance = ReactTestUtils.renderIntoDocument(instance);
- }).toThrowError(
+ const container = document.createElement('div');
+ const root = ReactDOMClient.createRoot(container);
+ await expect(
+ act(() => {
+ root.render();
+ }),
+ ).rejects.toThrowError(
'Component.getInitialState(): must return an object or null',
);
- });
+ }
});
- it('should work with a null getInitialState() return value', () => {
+ it('should work with a null getInitialState() return value', async () => {
const Component = createReactClass({
getInitialState: function () {
return null;
@@ -356,9 +372,13 @@ describe('create-react-class-integration', () => {
return ;
},
});
- expect(() =>
- ReactTestUtils.renderIntoDocument(),
- ).not.toThrow();
+ const container = document.createElement('div');
+ const root = ReactDOMClient.createRoot(container);
+ await expect(
+ act(() => {
+ root.render();
+ }),
+ ).resolves.not.toThrow();
});
it('should throw when using legacy factories', () => {
@@ -375,7 +395,7 @@ describe('create-react-class-integration', () => {
);
});
- it('replaceState and callback works', () => {
+ it('replaceState and callback works', async () => {
const ops = [];
const Component = createReactClass({
getInitialState() {
@@ -387,10 +407,19 @@ describe('create-react-class-integration', () => {
},
});
- const instance = ReactTestUtils.renderIntoDocument();
- instance.replaceState({step: 1}, () => {
- ops.push('Callback: ' + instance.state.step);
+ const container = document.createElement('div');
+ const root = ReactDOMClient.createRoot(container);
+ let instance;
+ await act(() => {
+ root.render( (instance = current)} />);
+ });
+
+ await act(() => {
+ instance.replaceState({step: 1}, () => {
+ ops.push('Callback: ' + instance.state.step);
+ });
});
+
expect(ops).toEqual(['Render: 0', 'Render: 1', 'Callback: 1']);
});