diff --git a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js index 8a241135269fe..f00bb37af1ac0 100644 --- a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js @@ -133,6 +133,13 @@ describe('ReactDOMRoot', () => { expect(container.textContent).toEqual(''); }); + it('can be immediately unmounted', async () => { + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.unmount(); + }); + }); + it('supports hydration', async () => { const markup = await new Promise(resolve => resolve( @@ -392,6 +399,18 @@ describe('ReactDOMRoot', () => { } }); + it('throws if unmounting a root that has had its contents removed', async () => { + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render(
Hi
); + }); + container.innerHTML = ''; + + expect(() => { + root.unmount(); + }).toThrow('The node to be removed is not a child of this node.'); + }); + it('opts-in to concurrent default updates', async () => { const root = ReactDOMClient.createRoot(container, { unstable_concurrentUpdatesByDefault: true, diff --git a/packages/react-dom/src/__tests__/ReactMountDestruction-test.js b/packages/react-dom/src/__tests__/ReactMountDestruction-test.js index dc04d01578f24..cf5497a4220d6 100644 --- a/packages/react-dom/src/__tests__/ReactMountDestruction-test.js +++ b/packages/react-dom/src/__tests__/ReactMountDestruction-test.js @@ -11,31 +11,42 @@ const React = require('react'); const ReactDOM = require('react-dom'); +const ReactDOMClient = require('react-dom/client'); +const act = require('internal-test-utils').act; describe('ReactMount', () => { - it('should destroy a react root upon request', () => { + it('should destroy a react root upon request', async () => { const mainContainerDiv = document.createElement('div'); document.body.appendChild(mainContainerDiv); const instanceOne =
; const firstRootDiv = document.createElement('div'); mainContainerDiv.appendChild(firstRootDiv); - ReactDOM.render(instanceOne, firstRootDiv); + const firstRoot = ReactDOMClient.createRoot(firstRootDiv); + await act(() => { + firstRoot.render(instanceOne); + }); const instanceTwo =
; const secondRootDiv = document.createElement('div'); mainContainerDiv.appendChild(secondRootDiv); - ReactDOM.render(instanceTwo, secondRootDiv); + const secondRoot = ReactDOMClient.createRoot(secondRootDiv); + await act(() => { + secondRoot.render(instanceTwo); + }); // Test that two react roots are rendered in isolation expect(firstRootDiv.firstChild.className).toBe('firstReactDiv'); expect(secondRootDiv.firstChild.className).toBe('secondReactDiv'); // Test that after unmounting each, they are no longer in the document. - ReactDOM.unmountComponentAtNode(firstRootDiv); + await act(() => { + firstRoot.unmount(); + }); expect(firstRootDiv.firstChild).toBeNull(); - ReactDOM.unmountComponentAtNode(secondRootDiv); - expect(secondRootDiv.firstChild).toBeNull(); + await act(() => { + secondRoot.unmount(); + }); }); it('should warn when unmounting a non-container root node', () => { @@ -46,6 +57,7 @@ describe('ReactMount', () => {
); + // Cannot be migrated to createRoot until we remove unmountComponentAtNode i.e. remove this test. ReactDOM.render(component, mainContainerDiv); // Test that unmounting at a root node gives a helpful warning @@ -69,6 +81,7 @@ describe('ReactMount', () => {
); + // Cannot be migrated to createRoot until we remove unmountComponentAtNode i.e. remove this test. ReactDOM.render(component, mainContainerDiv); // Test that unmounting at a non-root node gives a different warning