Convert dangerouslySetInnerHTML-test to createRoot (#28008)

Convert dangerouslySetInnerHTML-test to createRoot
facebook · Jan 19, 2024 · a2eaa21 · a2eaa21
1 parent 24d1c6f
commit a2eaa21
Showing 1 changed file with 24 additions and 21 deletions.
diff --git 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(
-        <div dangerouslySetInnerHTML={{__html: '<h1>Hello</h1>'}} />,
-        container,
-      );
-      expect(node.innerHTML).toBe('<h1>Hello</h1>');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <div dangerouslySetInnerHTML={{__html: '<h1>Hello</h1>'}} />,
+        );
+      });
+      expect(container.firstChild.innerHTML).toBe('<h1>Hello</h1>');
     });
   });
 
@@ -56,39 +60,38 @@ describe('dangerouslySetInnerHTML', () => {
     });
 
     // @gate !disableIEWorkarounds
-    it('sets innerHTML on it', () => {
+    it('sets innerHTML on it', async () => {
       const html = '<circle></circle>';
       const container = document.createElementNS(
         'http://www.w3.org/2000/svg',
         'svg',
       );
-      ReactDOM.render(
-        <g dangerouslySetInnerHTML={{__html: html}} />,
-        container,
-      );
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<g dangerouslySetInnerHTML={{__html: html}} />);
+      });
       const circle = container.firstChild.firstChild;
       expect(circle.tagName).toBe('circle');
     });
 
     // @gate !disableIEWorkarounds
-    it('clears previous children', () => {
+    it('clears previous children', async () => {
       const firstHtml = '<rect></rect>';
       const secondHtml = '<circle></circle>';
 
       const container = document.createElementNS(
         'http://www.w3.org/2000/svg',
         'svg',
       );
-      ReactDOM.render(
-        <g dangerouslySetInnerHTML={{__html: firstHtml}} />,
-        container,
-      );
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<g dangerouslySetInnerHTML={{__html: firstHtml}} />);
+      });
       const rect = container.firstChild.firstChild;
       expect(rect.tagName).toBe('rect');
-      ReactDOM.render(
-        <g dangerouslySetInnerHTML={{__html: secondHtml}} />,
-        container,
-      );
+      await act(() => {
+        root.render(<g dangerouslySetInnerHTML={{__html: secondHtml}} />);
+      });
       const circle = container.firstChild.firstChild;
       expect(circle.tagName).toBe('circle');
     });