Convert dangerouslySetInnerHTML-test to createRoot (#28008)
Convert dangerouslySetInnerHTML-test to createRoot
Jan Kassens committed
Jan 19, 2024 at 13:35 UTC
a2eaa21ac70ef898535479cb9fc9ea546854e072
1 file changed
+24
-21
packages/react-dom/src/client/__tests__/dangerouslySetInnerHTML-test.js
+24
-21
@@ -10,17 +10,21 @@
10
'use strict';
11
12
const React = require('react');
13
-const ReactDOM = require('react-dom');
13
+const ReactDOMClient = require('react-dom/client');
14
+
15
+const act = require('internal-test-utils').act;
16
17
describe('dangerouslySetInnerHTML', () => {
18
describe('when the node has innerHTML property', () => {
17
- it('sets innerHTML on it', () => {
19
+ it('sets innerHTML on it', async () => {
20
const container = document.createElement('div');
19
- const node = ReactDOM.render(
20
- <div dangerouslySetInnerHTML={{__html: '<h1>Hello</h1>'}} />,
21
- container,
22
- );
23
- expect(node.innerHTML).toBe('<h1>Hello</h1>');
21
+ const root = ReactDOMClient.createRoot(container);
22
+ await act(() => {
23
+ root.render(
24
+ <div dangerouslySetInnerHTML={{__html: '<h1>Hello</h1>'}} />,
25
+ );
26
+ });
27
+ expect(container.firstChild.innerHTML).toBe('<h1>Hello</h1>');
28
});
29
});
30
@@ -56,22 +60,22 @@ describe('dangerouslySetInnerHTML', () => {
60
});
61
62
// @gate !disableIEWorkarounds
59
- it('sets innerHTML on it', () => {
63
+ it('sets innerHTML on it', async () => {
64
const html = '<circle></circle>';
65
const container = document.createElementNS(
66
'http://www.w3.org/2000/svg',
67
'svg',
68
);
65
- ReactDOM.render(
66
- <g dangerouslySetInnerHTML={{__html: html}} />,
67
- container,
68
- );
69
+ const root = ReactDOMClient.createRoot(container);
70
+ await act(() => {
71
+ root.render(<g dangerouslySetInnerHTML={{__html: html}} />);
72
+ });
73
const circle = container.firstChild.firstChild;
74
expect(circle.tagName).toBe('circle');
75
});
76
77
// @gate !disableIEWorkarounds
74
- it('clears previous children', () => {
78
+ it('clears previous children', async () => {
79
const firstHtml = '<rect></rect>';
80
const secondHtml = '<circle></circle>';
81
@@ -79,16 +83,15 @@ describe('dangerouslySetInnerHTML', () => {
83
'http://www.w3.org/2000/svg',
84
'svg',
85
);
82
- ReactDOM.render(
83
- <g dangerouslySetInnerHTML={{__html: firstHtml}} />,
84
- container,
85
- );
86
+ const root = ReactDOMClient.createRoot(container);
87
+ await act(() => {
88
+ root.render(<g dangerouslySetInnerHTML={{__html: firstHtml}} />);
89
+ });
90
const rect = container.firstChild.firstChild;
91
expect(rect.tagName).toBe('rect');
88
- ReactDOM.render(
89
- <g dangerouslySetInnerHTML={{__html: secondHtml}} />,
90
- container,
91
- );
92
+ await act(() => {
93
+ root.render(<g dangerouslySetInnerHTML={{__html: secondHtml}} />);
94
+ });
95
const circle = container.firstChild.firstChild;
96
expect(circle.tagName).toBe('circle');
97
});