Convert ReactMountDestruction (partially) to createRoot (#28004)
Sebastian Silbermann committed
Jan 23, 2024 at 10:30 UTC
bf32989264ff2faa9a009550401f573f29db4df2
2 files changed
+38
-6
packages/react-dom/src/__tests__/ReactDOMRoot-test.js
+19
@@ -133,6 +133,13 @@ describe('ReactDOMRoot', () => {
133
expect(container.textContent).toEqual('');
134
});
135
136
+ it('can be immediately unmounted', async () => {
137
+ const root = ReactDOMClient.createRoot(container);
138
+ await act(() => {
139
+ root.unmount();
140
+ });
141
+ });
142
+
143
it('supports hydration', async () => {
144
const markup = await new Promise(resolve =>
145
resolve(
@@ -392,6 +399,18 @@ describe('ReactDOMRoot', () => {
399
}
400
});
401
402
+ it('throws if unmounting a root that has had its contents removed', async () => {
403
+ const root = ReactDOMClient.createRoot(container);
404
+ await act(() => {
405
+ root.render(<div>Hi</div>);
406
+ });
407
+ container.innerHTML = '';
408
+
409
+ expect(() => {
410
+ root.unmount();
411
+ }).toThrow('The node to be removed is not a child of this node.');
412
+ });
413
+
414
it('opts-in to concurrent default updates', async () => {
415
const root = ReactDOMClient.createRoot(container, {
416
unstable_concurrentUpdatesByDefault: true,
packages/react-dom/src/__tests__/ReactMountDestruction-test.js
+19
-6
@@ -11,31 +11,42 @@
11
12
const React = require('react');
13
const ReactDOM = require('react-dom');
14
+const ReactDOMClient = require('react-dom/client');
15
+const act = require('internal-test-utils').act;
16
17
describe('ReactMount', () => {
16
- it('should destroy a react root upon request', () => {
18
+ it('should destroy a react root upon request', async () => {
19
const mainContainerDiv = document.createElement('div');
20
document.body.appendChild(mainContainerDiv);
21
22
const instanceOne = <div className="firstReactDiv" />;
23
const firstRootDiv = document.createElement('div');
24
mainContainerDiv.appendChild(firstRootDiv);
23
- ReactDOM.render(instanceOne, firstRootDiv);
25
+ const firstRoot = ReactDOMClient.createRoot(firstRootDiv);
26
+ await act(() => {
27
+ firstRoot.render(instanceOne);
28
+ });
29
30
const instanceTwo = <div className="secondReactDiv" />;
31
const secondRootDiv = document.createElement('div');
32
mainContainerDiv.appendChild(secondRootDiv);
28
- ReactDOM.render(instanceTwo, secondRootDiv);
33
+ const secondRoot = ReactDOMClient.createRoot(secondRootDiv);
34
+ await act(() => {
35
+ secondRoot.render(instanceTwo);
36
+ });
37
38
// Test that two react roots are rendered in isolation
39
expect(firstRootDiv.firstChild.className).toBe('firstReactDiv');
40
expect(secondRootDiv.firstChild.className).toBe('secondReactDiv');
41
42
// Test that after unmounting each, they are no longer in the document.
35
- ReactDOM.unmountComponentAtNode(firstRootDiv);
43
+ await act(() => {
44
+ firstRoot.unmount();
45
+ });
46
expect(firstRootDiv.firstChild).toBeNull();
37
- ReactDOM.unmountComponentAtNode(secondRootDiv);
38
- expect(secondRootDiv.firstChild).toBeNull();
47
+ await act(() => {
48
+ secondRoot.unmount();
49
+ });
50
});
51
52
it('should warn when unmounting a non-container root node', () => {
@@ -46,6 +57,7 @@ describe('ReactMount', () => {
57
<div />
58
</div>
59
);
60
+ // Cannot be migrated to createRoot until we remove unmountComponentAtNode i.e. remove this test.
61
ReactDOM.render(component, mainContainerDiv);
62
63
// Test that unmounting at a root node gives a helpful warning
@@ -69,6 +81,7 @@ describe('ReactMount', () => {
81
</div>
82
</div>
83
);
84
+ // Cannot be migrated to createRoot until we remove unmountComponentAtNode i.e. remove this test.
85
ReactDOM.render(component, mainContainerDiv);
86
87
// Test that unmounting at a non-root node gives a different warning