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

Jump to bottom

Convert renderSubtreeIntoContainer-test.js to createRoot #28114

Merged
merged 3 commits into from
Jan 27, 2024
Merged

Convert renderSubtreeIntoContainer-test.js to createRoot #28114

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
25e2ceb
Convert renderSubtreeIntoContainer-test.js to createRoot
mattcarrollcode Jan 26, 2024
13639f5
rollback changes to legacy test
mattcarrollcode Jan 26, 2024
89a97f5
Update packages/react-dom/src/__tests__/renderSubtreeIntoContainer-te…
rickhanlonii Jan 26, 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
51 changes: 38 additions & 13 deletions packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@
const React = require('react');
const PropTypes = require('prop-types');
const ReactDOM = require('react-dom');
const ReactDOMClient = require('react-dom/client');
const ReactTestUtils = require('react-dom/test-utils');
const act = require('internal-test-utils').act;
const renderSubtreeIntoContainer =
require('react-dom').unstable_renderSubtreeIntoContainer;

Expand Down Expand Up @@ -101,7 +103,7 @@ describe('renderSubtreeIntoContainer', () => {
});

// @gate !disableLegacyContext
it('should update context if it changes due to setState', () => {
it('should update context if it changes due to setState', async () => {
const container = document.createElement('div');
document.body.appendChild(container);
const portal = document.createElement('div');
Expand Down Expand Up @@ -154,15 +156,22 @@ describe('renderSubtreeIntoContainer', () => {
);
}
}
const root = ReactDOMClient.createRoot(container);
const parentRef = React.createRef();
await act(async () => {
root.render(<Parent ref={parentRef} />);
});
const instance = parentRef.current;

const instance = ReactDOM.render(<Parent />, container);
expect(portal.firstChild.innerHTML).toBe('initial-initial');
instance.setState({bar: 'changed'});
await act(async () => {
instance.setState({bar: 'changed'});
});
expect(portal.firstChild.innerHTML).toBe('changed-changed');
});

// @gate !disableLegacyContext
it('should update context if it changes due to re-render', () => {
it('should update context if it changes due to re-render', async () => {
const container = document.createElement('div');
document.body.appendChild(container);
const portal = document.createElement('div');
Expand Down Expand Up @@ -212,13 +221,18 @@ describe('renderSubtreeIntoContainer', () => {
}
}

ReactDOM.render(<Parent bar="initial" />, container);
const root = ReactDOMClient.createRoot(container);
await act(async () => {
root.render(<Parent bar="initial" />);
});
expect(portal.firstChild.innerHTML).toBe('initial-initial');
ReactDOM.render(<Parent bar="changed" />, container);
await act(async () => {
root.render(<Parent bar="changed" />);
});
expect(portal.firstChild.innerHTML).toBe('changed-changed');
});

it('should render portal with non-context-provider parent', () => {
it('should render portal with non-context-provider parent', async () => {
const container = document.createElement('div');
document.body.appendChild(container);
const portal = document.createElement('div');
Expand All @@ -237,12 +251,15 @@ describe('renderSubtreeIntoContainer', () => {
}
}

ReactDOM.render(<Parent bar="initial" />, container);
const root = ReactDOMClient.createRoot(container);
await act(async () => {
root.render(<Parent bar="initial" />);
});
expect(portal.firstChild.innerHTML).toBe('hello');
});

// @gate !disableLegacyContext
it('should get context through non-context-provider parent', () => {
it('should get context through non-context-provider parent', async () => {
const container = document.createElement('div');
document.body.appendChild(container);
const portal = document.createElement('div');
Expand Down Expand Up @@ -281,12 +298,15 @@ describe('renderSubtreeIntoContainer', () => {
}
}

ReactDOM.render(<Parent value="foo" />, container);
const root = ReactDOMClient.createRoot(container);
await act(async () => {
root.render(<Parent value="foo" />);
});
expect(portal.textContent).toBe('foo');
});

// @gate !disableLegacyContext
it('should get context through middle non-context-provider layer', () => {
it('should get context through middle non-context-provider layer', async () => {
const container = document.createElement('div');
document.body.appendChild(container);
const portal1 = document.createElement('div');
Expand Down Expand Up @@ -333,16 +353,21 @@ describe('renderSubtreeIntoContainer', () => {
}
}

ReactDOM.render(<Parent value="foo" />, container);
const root = ReactDOMClient.createRoot(container);
await act(async () => {
root.render(<Parent value="foo" />);
});
expect(portal2.textContent).toBe('foo');
});

it('fails gracefully when mixing React 15 and 16', () => {
it('legacy test: fails gracefully when mixing React 15 and 16', () => {
class C extends React.Component {
render() {
return <div />;
}
}
// ReactDOM.render shouldn't be converted to `createRoot` because
// `reacteRoot` didn't exist in React 15.
rickhanlonii marked this conversation as resolved.
Show resolved Hide resolved
const c = ReactDOM.render(<C />, document.createElement('div'));
// React 15 calls this:
// https://github.com/facebook/react/blob/77b71fc3c4/src/renderers/dom/client/ReactMount.js#L478-L479
Expand Down