Skip to content

Convert ReactServerRenderingHydration-test to createRoot (partially) #28010

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.

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

Merged
merged 1 commit into from
Jan 24, 2024
Merged
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ describe('ReactDOMServerHydration', () => {
// We have a polyfill for autoFocus on the client, but we intentionally don't
// want it to call focus() when hydrating because this can mess up existing
// focus before the JS has loaded.
it('should emit autofocus on the server but not focus() when hydrating', () => {
it('should emit autofocus on the server but not focus() when hydrating', async () => {
const element = document.createElement('div');
element.innerHTML = ReactDOMServer.renderToString(
<input autoFocus={true} />,
Expand All @@ -131,26 +131,35 @@ describe('ReactDOMServerHydration', () => {

// It should not be called on mount.
element.firstChild.focus = jest.fn();
ReactDOM.hydrate(<input autoFocus={true} />, element);
const root = await act(() =>
ReactDOMClient.hydrateRoot(element, <input autoFocus={true} />),
);
expect(element.firstChild.focus).not.toHaveBeenCalled();

// Or during an update.
ReactDOM.render(<input autoFocus={true} />, element);
await act(() => {
root.render(<input autoFocus={true} />);
});
expect(element.firstChild.focus).not.toHaveBeenCalled();
});

it('should not focus on either server or client with autofocus={false}', () => {
it('should not focus on either server or client with autofocus={false}', async () => {
const element = document.createElement('div');
element.innerHTML = ReactDOMServer.renderToString(
<input autoFocus={false} />,
);
expect(element.firstChild.autofocus).toBe(false);

element.firstChild.focus = jest.fn();
ReactDOM.hydrate(<input autoFocus={false} />, element);
const root = await act(() =>
ReactDOMClient.hydrateRoot(element, <input autoFocus={false} />),
);

expect(element.firstChild.focus).not.toHaveBeenCalled();

ReactDOM.render(<input autoFocus={false} />, element);
await act(() => {
root.render(<input autoFocus={false} />);
});
expect(element.firstChild.focus).not.toHaveBeenCalled();
});

Expand Down