diff --git a/packages/react/src/__tests__/ReactChildren-test.js b/packages/react/src/__tests__/ReactChildren-test.js
index 32c17c64d5675..8ff0ea625c04f 100644
--- a/packages/react/src/__tests__/ReactChildren-test.js
+++ b/packages/react/src/__tests__/ReactChildren-test.js
@@ -11,12 +11,14 @@
describe('ReactChildren', () => {
let React;
- let ReactTestUtils;
+ let ReactDOMClient;
+ let act;
beforeEach(() => {
jest.resetModules();
React = require('react');
- ReactTestUtils = require('react-dom/test-utils');
+ ReactDOMClient = require('react-dom/client');
+ act = require('internal-test-utils').act;
});
it('should support identity for simple', () => {
@@ -962,16 +964,20 @@ describe('ReactChildren', () => {
});
describe('with fragments enabled', () => {
- it('warns for keys for arrays of elements in a fragment', () => {
+ it('warns for keys for arrays of elements in a fragment', async () => {
class ComponentReturningArray extends React.Component {
render() {
return [
, ];
}
}
- expect(() =>
- ReactTestUtils.renderIntoDocument(),
- ).toErrorDev(
+ const container = document.createElement('div');
+ const root = ReactDOMClient.createRoot(container);
+ await expect(async () => {
+ await act(() => {
+ root.render();
+ });
+ }).toErrorDev(
'Warning: ' +
'Each child in a list should have a unique "key" prop.' +
' See https://reactjs.org/link/warning-keys for more information.' +
@@ -979,20 +985,28 @@ describe('ReactChildren', () => {
);
});
- it('does not warn when there are keys on elements in a fragment', () => {
+ it('does not warn when there are keys on elements in a fragment', async () => {
class ComponentReturningArray extends React.Component {
render() {
return [, ];
}
}
- ReactTestUtils.renderIntoDocument();
+ const container = document.createElement('div');
+ const root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render();
+ });
});
- it('warns for keys for arrays at the top level', () => {
- expect(() =>
- ReactTestUtils.renderIntoDocument([, ]),
- ).toErrorDev(
+ it('warns for keys for arrays at the top level', async () => {
+ const container = document.createElement('div');
+ const root = ReactDOMClient.createRoot(container);
+ await expect(async () => {
+ await act(() => {
+ root.render([, ]);
+ });
+ }).toErrorDev(
'Warning: ' +
'Each child in a list should have a unique "key" prop.' +
' See https://reactjs.org/link/warning-keys for more information.',