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 ReactDOMSuspensePlaceholder to createRoot #28168

Merged
merged 1 commit into from
Feb 4, 2024
Merged

Convert ReactDOMSuspensePlaceholder to createRoot #28168

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
31 changes: 22 additions & 9 deletions packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@

let React;
let ReactDOM;
let ReactDOMClient;
let Suspense;
let Scheduler;
let act;
Expand All @@ -23,6 +24,7 @@ describe('ReactDOMSuspensePlaceholder', () => {
jest.resetModules();
React = require('react');
ReactDOM = require('react-dom');
ReactDOMClient = require('react-dom/client');
Scheduler = require('scheduler');
act = require('internal-test-utils').act;
Suspense = React.Suspense;
Expand Down Expand Up @@ -98,7 +100,7 @@ describe('ReactDOMSuspensePlaceholder', () => {
return text;
}

it('hides and unhides timed out DOM elements', async () => {
it('hides and unhides timed out DOM elements in legacy roots', async () => {
const divs = [
React.createRef(null),
React.createRef(null),
Expand Down Expand Up @@ -144,18 +146,22 @@ describe('ReactDOMSuspensePlaceholder', () => {
</Suspense>
);
}
ReactDOM.render(<App />, container);
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(<App />);
});

expect(container.textContent).toEqual('Loading...');

await act(async () => {
await resolveText('B');
await act(() => {
resolveText('B');
});

expect(container.textContent).toEqual('ABC');
});

it(
'outside concurrent mode, re-hides children if their display is updated ' +
'in legacy roots, re-hides children if their display is updated ' +
'but the boundary is still showing the fallback',
async () => {
const {useState} = React;
Expand Down Expand Up @@ -207,7 +213,7 @@ describe('ReactDOMSuspensePlaceholder', () => {
);

// Regression test for https://github.com/facebook/react/issues/14188
it('can call findDOMNode() in a suspended component commit phase', async () => {
it('can call findDOMNode() in a suspended component commit phase in legacy roots', async () => {
const log = [];
const Lazy = React.lazy(
() =>
Expand Down Expand Up @@ -267,7 +273,7 @@ describe('ReactDOMSuspensePlaceholder', () => {
});

// Regression test for https://github.com/facebook/react/issues/14188
it('can call findDOMNode() in a suspended component commit phase (#2)', () => {
it('can call legacy findDOMNode() in a suspended component commit phase (#2)', async () => {
let suspendOnce = Promise.resolve();
function Suspend() {
if (suspendOnce) {
Expand Down Expand Up @@ -304,9 +310,16 @@ describe('ReactDOMSuspensePlaceholder', () => {
);
}

ReactDOM.render(<App />, container);
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(<App />);
});

expect(log).toEqual(['cDM']);
ReactDOM.render(<App />, container);
await act(() => {
root.render(<App />);
});

expect(log).toEqual(['cDM', 'cDU']);
});
});