Convert ReactCompositeComponentDOMMinimalism to createRoot (#28194)
Not sure if this was also meant to test findDOMNode. But sounded like it was more interested in the rendering aspect and findDOMNode was just used as a utility. If we want to keep the findDOMNode tests, I'd just rename it to a legacy test to indicate it needs to be flagged.
Sebastian Silbermann committed
Feb 2, 2024 at 09:15 UTC
c4e9ed3fefcd744b48e9cce39df0f52cbc014e1a
1 file changed
+44
-34
packages/react-dom/src/__tests__/ReactCompositeComponentDOMMinimalism-test.js
+44
-34
@@ -11,15 +11,13 @@
11
12
// Requires
13
let React;
14
-let ReactDOM;
15
-let ReactTestUtils;
14
+let ReactDOMClient;
15
+let act;
16
17
// Test components
18
let LowerLevelComposite;
19
let MyCompositeComponent;
20
21
-let expectSingleChildlessDiv;
22
-
21
/**
22
* Integration test, testing the combination of JSX with our unit of
23
* abstraction, `ReactCompositeComponent` does not ever add superfluous DOM
@@ -28,8 +26,8 @@ let expectSingleChildlessDiv;
26
describe('ReactCompositeComponentDOMMinimalism', () => {
27
beforeEach(() => {
28
React = require('react');
31
- ReactDOM = require('react-dom');
32
- ReactTestUtils = require('react-dom/test-utils');
29
+ ReactDOMClient = require('react-dom/client');
30
+ act = require('internal-test-utils').act;
31
32
LowerLevelComposite = class extends React.Component {
33
render() {
@@ -42,39 +40,51 @@ describe('ReactCompositeComponentDOMMinimalism', () => {
40
return <LowerLevelComposite>{this.props.children}</LowerLevelComposite>;
41
}
42
};
45
-
46
- expectSingleChildlessDiv = function (instance) {
47
- const el = ReactDOM.findDOMNode(instance);
48
- expect(el.tagName).toBe('DIV');
49
- expect(el.children.length).toBe(0);
50
- };
43
});
44
53
- it('should not render extra nodes for non-interpolated text', () => {
54
- let instance = <MyCompositeComponent>A string child</MyCompositeComponent>;
55
- instance = ReactTestUtils.renderIntoDocument(instance);
56
- expectSingleChildlessDiv(instance);
45
+ it('should not render extra nodes for non-interpolated text', async () => {
46
+ const container = document.createElement('div');
47
+ const root = ReactDOMClient.createRoot(container);
48
+ await act(() => {
49
+ root.render(<MyCompositeComponent>A string child</MyCompositeComponent>);
50
+ });
51
+
52
+ const instance = container.firstChild;
53
+ expect(instance.tagName).toBe('DIV');
54
+ expect(instance.children.length).toBe(0);
55
});
56
59
- it('should not render extra nodes for non-interpolated text', () => {
60
- let instance = (
61
- <MyCompositeComponent>{'Interpolated String Child'}</MyCompositeComponent>
62
- );
63
- instance = ReactTestUtils.renderIntoDocument(instance);
64
- expectSingleChildlessDiv(instance);
57
+ it('should not render extra nodes for non-interpolated text', async () => {
58
+ const container = document.createElement('div');
59
+ const root = ReactDOMClient.createRoot(container);
60
+ await act(() => {
61
+ root.render(
62
+ <MyCompositeComponent>
63
+ {'Interpolated String Child'}
64
+ </MyCompositeComponent>,
65
+ );
66
+ });
67
+
68
+ const instance = container.firstChild;
69
+ expect(instance.tagName).toBe('DIV');
70
+ expect(instance.children.length).toBe(0);
71
});
72
67
- it('should not render extra nodes for non-interpolated text', () => {
68
- let instance = (
69
- <MyCompositeComponent>
70
- <ul>This text causes no children in ul, just innerHTML</ul>
71
- </MyCompositeComponent>
72
- );
73
- instance = ReactTestUtils.renderIntoDocument(instance);
74
- const el = ReactDOM.findDOMNode(instance);
75
- expect(el.tagName).toBe('DIV');
76
- expect(el.children.length).toBe(1);
77
- expect(el.children[0].tagName).toBe('UL');
78
- expect(el.children[0].children.length).toBe(0);
73
+ it('should not render extra nodes for non-interpolated text', async () => {
74
+ const container = document.createElement('div');
75
+ const root = ReactDOMClient.createRoot(container);
76
+ await act(() => {
77
+ root.render(
78
+ <MyCompositeComponent>
79
+ <ul>This text causes no children in ul, just innerHTML</ul>
80
+ </MyCompositeComponent>,
81
+ );
82
+ });
83
+
84
+ const instance = container.firstChild;
85
+ expect(instance.tagName).toBe('DIV');
86
+ expect(instance.children.length).toBe(1);
87
+ expect(instance.children[0].tagName).toBe('UL');
88
+ expect(instance.children[0].children.length).toBe(0);
89
});
90
});