Skip to content

Commit

Permalink
Convert ReactScope to createRoot (facebook#28172)
Browse files Browse the repository at this point in the history
  • Loading branch information
@eps1lon @AndyPengc12
eps1lon authored and AndyPengc12 committed Apr 15, 2024
1 parent 690a7da commit af85573
Showing 1 changed file with 74 additions and 24 deletions.
98 changes: 74 additions & 24 deletions packages/react-reconciler/src/__tests__/ReactScope-test.internal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,10 @@ describe('ReactScope', () => {
});

describe('ReactDOM', () => {
let ReactDOM;
let ReactDOMClient;
let container;

beforeEach(() => {
ReactDOM = require('react-dom');
ReactDOMClient = require('react-dom/client');
ReactDOMServer = require('react-dom/server');
container = document.createElement('div');
Expand All @@ -44,7 +42,7 @@ describe('ReactScope', () => {
});

// @gate www
it('DO_NOT_USE_queryAllNodes() works as intended', () => {
it('DO_NOT_USE_queryAllNodes() works as intended', async () => {
const testScopeQuery = (type, props) => true;
const TestScope = React.unstable_Scope;
const scopeRef = React.createRef();
Expand All @@ -68,18 +66,28 @@ describe('ReactScope', () => {
);
}

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

let nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(testScopeQuery);
expect(nodes).toEqual([divRef.current, spanRef.current, aRef.current]);
ReactDOM.render(<Test toggle={false} />, container);
await act(() => {
root.render(<Test toggle={false} />);
});

nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(testScopeQuery);
expect(nodes).toEqual([aRef.current, divRef.current, spanRef.current]);
ReactDOM.render(null, container);
await act(() => {
root.render(null);
});

expect(scopeRef.current).toBe(null);
});

// @gate www
it('DO_NOT_USE_queryAllNodes() provides the correct host instance', () => {
it('DO_NOT_USE_queryAllNodes() provides the correct host instance', async () => {
const testScopeQuery = (type, props) => type === 'div';
const TestScope = React.unstable_Scope;
const scopeRef = React.createRef();
Expand All @@ -103,7 +111,11 @@ describe('ReactScope', () => {
);
}

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

let nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(testScopeQuery);
expect(nodes).toEqual([divRef.current]);
let filterQuery = (type, props, instance) =>
Expand All @@ -115,18 +127,24 @@ describe('ReactScope', () => {
testScopeQuery(type, props);
nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(filterQuery);
expect(nodes).toEqual([divRef.current, spanRef.current, aRef.current]);
ReactDOM.render(<Test toggle={false} />, container);
await act(() => {
root.render(<Test toggle={false} />);
});

filterQuery = (type, props, instance) =>
[spanRef.current, aRef.current].includes(instance) ||
testScopeQuery(type, props);
nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(filterQuery);
expect(nodes).toEqual([aRef.current, divRef.current, spanRef.current]);
ReactDOM.render(null, container);
await act(() => {
root.render(null);
});

expect(scopeRef.current).toBe(null);
});

// @gate www
it('DO_NOT_USE_queryFirstNode() works as intended', () => {
it('DO_NOT_USE_queryFirstNode() works as intended', async () => {
const testScopeQuery = (type, props) => true;
const TestScope = React.unstable_Scope;
const scopeRef = React.createRef();
Expand All @@ -150,18 +168,28 @@ describe('ReactScope', () => {
);
}

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

let node = scopeRef.current.DO_NOT_USE_queryFirstNode(testScopeQuery);
expect(node).toEqual(divRef.current);
ReactDOM.render(<Test toggle={false} />, container);
await act(() => {
root.render(<Test toggle={false} />);
});

node = scopeRef.current.DO_NOT_USE_queryFirstNode(testScopeQuery);
expect(node).toEqual(aRef.current);
ReactDOM.render(null, container);
await act(() => {
root.render(null);
});

expect(scopeRef.current).toBe(null);
});

// @gate www
it('containsNode() works as intended', () => {
it('containsNode() works as intended', async () => {
const TestScope = React.unstable_Scope;
const scopeRef = React.createRef();
const divRef = React.createRef();
Expand Down Expand Up @@ -194,24 +222,34 @@ describe('ReactScope', () => {
);
}

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

expect(scopeRef.current.containsNode(divRef.current)).toBe(true);
expect(scopeRef.current.containsNode(spanRef.current)).toBe(true);
expect(scopeRef.current.containsNode(aRef.current)).toBe(true);
expect(scopeRef.current.containsNode(outerSpan.current)).toBe(false);
expect(scopeRef.current.containsNode(emRef.current)).toBe(false);
ReactDOM.render(<Test toggle={false} />, container);
await act(() => {
root.render(<Test toggle={false} />);
});

expect(scopeRef.current.containsNode(divRef.current)).toBe(true);
expect(scopeRef.current.containsNode(spanRef.current)).toBe(true);
expect(scopeRef.current.containsNode(aRef.current)).toBe(true);
expect(scopeRef.current.containsNode(outerSpan.current)).toBe(false);
expect(scopeRef.current.containsNode(emRef.current)).toBe(true);
ReactDOM.render(<Test toggle={true} />, container);
await act(() => {
root.render(<Test toggle={true} />);
});

expect(scopeRef.current.containsNode(emRef.current)).toBe(false);
});

// @gate www
it('scopes support server-side rendering and hydration', () => {
it('scopes support server-side rendering and hydration', async () => {
const TestScope = React.unstable_Scope;
const scopeRef = React.createRef();
const divRef = React.createRef();
Expand All @@ -235,14 +273,16 @@ describe('ReactScope', () => {
'<div><div>DIV</div><span>SPAN</span><a>A</a><div>Outside content!</div></div>',
);
container.innerHTML = html;
ReactDOM.hydrate(<Test />, container);
await act(() => {
ReactDOMClient.hydrateRoot(container, <Test />);
});
const testScopeQuery = (type, props) => true;
const nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(testScopeQuery);
expect(nodes).toEqual([divRef.current, spanRef.current, aRef.current]);
});

// @gate www
it('getChildContextValues() works as intended', () => {
it('getChildContextValues() works as intended', async () => {
const TestContext = React.createContext();
const TestScope = React.unstable_Scope;
const scopeRef = React.createRef();
Expand All @@ -260,13 +300,23 @@ describe('ReactScope', () => {
);
}

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

let nodes = scopeRef.current.getChildContextValues(TestContext);
expect(nodes).toEqual([1]);
ReactDOM.render(<Test toggle={false} />, container);
await act(() => {
root.render(<Test toggle={false} />);
});

nodes = scopeRef.current.getChildContextValues(TestContext);
expect(nodes).toEqual([1, 2]);
ReactDOM.render(null, container);
await act(() => {
root.render(null);
});

expect(scopeRef.current).toBe(null);
});

Expand Down

0 comments on commit af85573

Please sign in to comment.