diff --git a/packages/react-dom/src/client/__tests__/dangerouslySetInnerHTML-test.js b/packages/react-dom/src/client/__tests__/dangerouslySetInnerHTML-test.js
index 71f9249a1e823..64b4c0b0f7c98 100644
--- a/packages/react-dom/src/client/__tests__/dangerouslySetInnerHTML-test.js
+++ b/packages/react-dom/src/client/__tests__/dangerouslySetInnerHTML-test.js
@@ -10,17 +10,21 @@
'use strict';
const React = require('react');
-const ReactDOM = require('react-dom');
+const ReactDOMClient = require('react-dom/client');
+
+const act = require('internal-test-utils').act;
describe('dangerouslySetInnerHTML', () => {
describe('when the node has innerHTML property', () => {
- it('sets innerHTML on it', () => {
+ it('sets innerHTML on it', async () => {
const container = document.createElement('div');
- const node = ReactDOM.render(
-
Hello'}} />,
- container,
- );
- expect(node.innerHTML).toBe('
Hello
');
+ const root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render(
+
Hello'}} />,
+ );
+ });
+ expect(container.firstChild.innerHTML).toBe('
Hello
');
});
});
@@ -56,22 +60,22 @@ describe('dangerouslySetInnerHTML', () => {
});
// @gate !disableIEWorkarounds
- it('sets innerHTML on it', () => {
+ it('sets innerHTML on it', async () => {
const html = '';
const container = document.createElementNS(
'http://www.w3.org/2000/svg',
'svg',
);
- ReactDOM.render(
- ,
- container,
- );
+ const root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render();
+ });
const circle = container.firstChild.firstChild;
expect(circle.tagName).toBe('circle');
});
// @gate !disableIEWorkarounds
- it('clears previous children', () => {
+ it('clears previous children', async () => {
const firstHtml = '';
const secondHtml = '';
@@ -79,16 +83,15 @@ describe('dangerouslySetInnerHTML', () => {
'http://www.w3.org/2000/svg',
'svg',
);
- ReactDOM.render(
- ,
- container,
- );
+ const root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render();
+ });
const rect = container.firstChild.firstChild;
expect(rect.tagName).toBe('rect');
- ReactDOM.render(
- ,
- container,
- );
+ await act(() => {
+ root.render();
+ });
const circle = container.firstChild.firstChild;
expect(circle.tagName).toBe('circle');
});