Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Convert ReactMountDestruction (partially) to createRoot #28004

Merged
merged 2 commits into from
Jan 23, 2024
Merged

Convert ReactMountDestruction (partially) to createRoot #28004

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
91e3800
Convert ReactMountDestruction to createRoot
Jan 19, 2024
00aab3a
Add tests for createRoot
Jan 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions packages/react-dom/src/__tests__/ReactDOMRoot-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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(<div>Hi</div>);
});
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,
Expand Down
25 changes: 19 additions & 6 deletions packages/react-dom/src/__tests__/ReactMountDestruction-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = <div className="firstReactDiv" />;
const firstRootDiv = document.createElement('div');
mainContainerDiv.appendChild(firstRootDiv);
ReactDOM.render(instanceOne, firstRootDiv);
const firstRoot = ReactDOMClient.createRoot(firstRootDiv);
await act(() => {
firstRoot.render(instanceOne);
});

const instanceTwo = <div className="secondReactDiv" />;
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', () => {
Expand All @@ -46,6 +57,7 @@ describe('ReactMount', () => {
<div />
</div>
);
// Cannot be migrated to createRoot until we remove unmountComponentAtNode i.e. remove this test.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we have a test for if you try to createRoot on a container that React has rendered to? Might be worth checking.

Also curious if we have a test that removes the container passed to createRoot and then we call unmount on the non-existent container.

I know these are kinda unrelated, but as I'm going through these tests we're changing I'm also looking for possible missing tests in similar things for createRoot.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point. I'll check if we have tests though it wouldn't be a very accurate search. But it does make sense to me to have tests for these cases.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we have a test for if you try to createRoot on a container that React has rendered to? Might be worth checking.

We have ReactDOMRoot - warns when creating two roots managing the same container. Does that match what you are looking for? We also have a test in the same file if we render into existing markup.

Also curious if we have a test that removes the container passed to createRoot and then we call unmount on the non-existent container.

I added a test if we unmount after something else cleared the container content. We already had a test for updating but not unmounting. Does that match what you were looking for?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup both sound good to me.

ReactDOM.render(component, mainContainerDiv);

// Test that unmounting at a root node gives a helpful warning
Expand All @@ -69,6 +81,7 @@ describe('ReactMount', () => {
</div>
</div>
);
// 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
Expand Down