@samitouri / QOS-React-1 / commits / 43a3653b19

Convert ReactContextValidator to createRoot (#28085)

Sebastian Silbermann committed Jan 25, 2024 at 18:37 UTC 43a3653b1958164f2b6b4dd57bceb75a95344570
1 file changed +50 -31
packages/react/src/__tests__/ReactContextValidator-test.js
+50 -31
@@ -17,9 +17,10 @@
17
18 let PropTypes;
19 let React;
20 -let ReactDOM;
20 +let ReactDOMClient;
21 let ReactDOMServer;
22 let ReactTestUtils;
23 +let act;
24
25 describe('ReactContextValidator', () => {
26 beforeEach(() => {
@@ -27,9 +28,10 @@ describe('ReactContextValidator', () => {
28
29 PropTypes = require('prop-types');
30 React = require('react');
30 - ReactDOM = require('react-dom');
31 + ReactDOMClient = require('react-dom/client');
32 ReactDOMServer = require('react-dom/server');
33 ReactTestUtils = require('react-dom/test-utils');
34 + act = require('internal-test-utils').act;
35 });
36
37 // TODO: This behavior creates a runtime dependency on propTypes. We should
@@ -72,7 +74,7 @@ describe('ReactContextValidator', () => {
74 });
75
76 // @gate !disableLegacyContext
75 - it('should pass next context to lifecycles', () => {
77 + it('should pass next context to lifecycles', async () => {
78 let componentDidMountContext;
79 let componentDidUpdateContext;
80 let componentWillReceivePropsContext;
@@ -135,11 +137,18 @@ describe('ReactContextValidator', () => {
137 };
138
139 const container = document.createElement('div');
138 - ReactDOM.render(<Parent foo="abc" />, container);
140 + const root = ReactDOMClient.createRoot(container);
141 + await act(() => {
142 + root.render(<Parent foo="abc" />);
143 + });
144 +
145 expect(constructorContext).toEqual({foo: 'abc'});
146 expect(renderContext).toEqual({foo: 'abc'});
147 expect(componentDidMountContext).toEqual({foo: 'abc'});
142 - ReactDOM.render(<Parent foo="def" />, container);
148 + await act(() => {
149 + root.render(<Parent foo="def" />);
150 + });
151 +
152 expect(componentWillReceivePropsContext).toEqual({foo: 'abc'});
153 expect(componentWillReceivePropsNextContext).toEqual({foo: 'def'});
154 expect(shouldComponentUpdateContext).toEqual({foo: 'abc'});
@@ -369,7 +378,7 @@ describe('ReactContextValidator', () => {
378 expect(childContext.foo).toBe('FOO');
379 });
380
372 - it('should pass next context to lifecycles', () => {
381 + it('should pass next context to lifecycles', async () => {
382 let componentDidMountContext;
383 let componentDidUpdateContext;
384 let componentWillReceivePropsContext;
@@ -417,21 +426,26 @@ describe('ReactContextValidator', () => {
426 const secondContext = {bar: 456};
427
428 const container = document.createElement('div');
420 - ReactDOM.render(
421 - <Context.Provider value={firstContext}>
422 - <Component />
423 - </Context.Provider>,
424 - container,
425 - );
429 + const root = ReactDOMClient.createRoot(container);
430 + await act(() => {
431 + root.render(
432 + <Context.Provider value={firstContext}>
433 + <Component />
434 + </Context.Provider>,
435 + );
436 + });
437 +
438 expect(constructorContext).toBe(firstContext);
439 expect(renderContext).toBe(firstContext);
440 expect(componentDidMountContext).toBe(firstContext);
429 - ReactDOM.render(
430 - <Context.Provider value={secondContext}>
431 - <Component />
432 - </Context.Provider>,
433 - container,
434 - );
441 + await act(() => {
442 + root.render(
443 + <Context.Provider value={secondContext}>
444 + <Component />
445 + </Context.Provider>,
446 + );
447 + });
448 +
449 expect(componentWillReceivePropsContext).toBe(firstContext);
450 expect(componentWillReceivePropsNextContext).toBe(secondContext);
451 expect(componentWillUpdateContext).toBe(firstContext);
@@ -447,7 +461,7 @@ describe('ReactContextValidator', () => {
461 }
462 });
463
450 - it('should re-render PureComponents when context Provider updates', () => {
464 + it('should re-render PureComponents when context Provider updates', async () => {
465 let renderedContext;
466
467 const Context = React.createContext();
@@ -464,19 +478,24 @@ describe('ReactContextValidator', () => {
478 const secondContext = {bar: 456};
479
480 const container = document.createElement('div');
467 - ReactDOM.render(
468 - <Context.Provider value={firstContext}>
469 - <Component />
470 - </Context.Provider>,
471 - container,
472 - );
481 + const root = ReactDOMClient.createRoot(container);
482 + await act(() => {
483 + root.render(
484 + <Context.Provider value={firstContext}>
485 + <Component />
486 + </Context.Provider>,
487 + );
488 + });
489 +
490 expect(renderedContext).toBe(firstContext);
474 - ReactDOM.render(
475 - <Context.Provider value={secondContext}>
476 - <Component />
477 - </Context.Provider>,
478 - container,
479 - );
491 + await act(() => {
492 + root.render(
493 + <Context.Provider value={secondContext}>
494 + <Component />
495 + </Context.Provider>,
496 + );
497 + });
498 +
499 expect(renderedContext).toBe(secondContext);
500 });
501