diff --git a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js index 1eca54518b5a7..850fabc5f4c2c 100644 --- a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js +++ b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js @@ -121,11 +121,15 @@ describe('ReactLazy', () => { }, })); - const root = ReactTestRenderer.create( - }> - - , - ); + let root; + await act(() => { + root = ReactTestRenderer.create( + }> + + , + {unstable_isConcurrent: true}, + ); + }); assertLog(['Hi']); expect(root).toMatchRenderedOutput('Hi'); @@ -150,13 +154,17 @@ describe('ReactLazy', () => { } } - const root = ReactTestRenderer.create( - - }> - - - , - ); + let root; + await act(() => { + root = ReactTestRenderer.create( + + }> + + + , + {unstable_isConcurrent: true}, + ); + }); assertLog([]); expect(root).toMatchRenderedOutput('Error: oh no'); }); @@ -627,11 +635,15 @@ describe('ReactLazy', () => { const LazyClass = lazy(() => fakeImport(C)); - const root = ReactTestRenderer.create( - }> - - , - ); + let root; + await act(() => { + root = ReactTestRenderer.create( + }> + + , + {unstable_isConcurrent: true}, + ); + }); assertLog(['Loading...']); await waitForAll([]); @@ -641,20 +653,24 @@ describe('ReactLazy', () => { assertLog([]); - root.update( - }> - - , - ); + await act(() => { + root.update( + }> + + , + ); + }); assertLog(['UNSAFE_componentWillMount: A', 'A2']); expect(root).toMatchRenderedOutput('A2'); - root.update( - }> - - , - ); + await act(() => { + root.update( + }> + + , + ); + }); assertLog([ 'UNSAFE_componentWillReceiveProps: A -> A', 'UNSAFE_componentWillUpdate: A -> A', @@ -1234,7 +1250,7 @@ describe('ReactLazy', () => { expect(componentStackMessage).toContain('in ResolvedText'); }); - it('should error with a component stack containing Lazy if unresolved', () => { + it('should error with a component stack containing Lazy if unresolved', async () => { let componentStackMessage; const LazyText = lazy(() => ({ @@ -1258,13 +1274,16 @@ describe('ReactLazy', () => { } } - ReactTestRenderer.create( - - }> - - - , - ); + await act(() => { + ReactTestRenderer.create( + + }> + + + , + {unstable_isConcurrent: true}, + ); + }); assertLog([]); @@ -1362,79 +1381,6 @@ describe('ReactLazy', () => { expect(root).toMatchRenderedOutput('ba'); }); - it('mount and reorder lazy types (legacy mode)', async () => { - class Child extends React.Component { - componentDidMount() { - Scheduler.log('Did mount: ' + this.props.label); - } - componentDidUpdate() { - Scheduler.log('Did update: ' + this.props.label); - } - render() { - return ; - } - } - - function ChildA({lowerCase}) { - return ; - } - - function ChildB({lowerCase}) { - return ; - } - - const LazyChildA = lazy(() => { - Scheduler.log('Init A'); - return fakeImport(ChildA); - }); - const LazyChildB = lazy(() => { - Scheduler.log('Init B'); - return fakeImport(ChildB); - }); - const LazyChildA2 = lazy(() => { - Scheduler.log('Init A2'); - return fakeImport(ChildA); - }); - const LazyChildB2 = lazy(() => { - Scheduler.log('Init B2'); - return fakeImport(ChildB); - }); - - function Parent({swap}) { - return ( - }> - }> - {swap - ? [ - , - , - ] - : [, ]} - - - ); - } - - const root = ReactTestRenderer.create(, { - unstable_isConcurrent: false, - }); - - assertLog(['Init A', 'Init B', 'Loading...']); - expect(root).not.toMatchRenderedOutput('AB'); - - await resolveFakeImport(ChildA); - await resolveFakeImport(ChildB); - - await waitForAll(['A', 'B', 'Did mount: A', 'Did mount: B']); - expect(root).toMatchRenderedOutput('AB'); - - // Swap the position of A and B - root.update(); - assertLog(['Init B2', 'Loading...']); - await waitForAll(['Init A2', 'b', 'a', 'Did update: b', 'Did update: a']); - expect(root).toMatchRenderedOutput('ba'); - }); - it('mount and reorder lazy elements', async () => { class Child extends React.Component { componentDidMount() { @@ -1504,72 +1450,147 @@ describe('ReactLazy', () => { expect(root).toMatchRenderedOutput('ba'); }); - it('mount and reorder lazy elements (legacy mode)', async () => { - class Child extends React.Component { - componentDidMount() { - Scheduler.log('Did mount: ' + this.props.label); - } - componentDidUpdate() { - Scheduler.log('Did update: ' + this.props.label); + describe('legacy mode', () => { + it('mount and reorder lazy elements (legacy mode)', async () => { + class Child extends React.Component { + componentDidMount() { + Scheduler.log('Did mount: ' + this.props.label); + } + componentDidUpdate() { + Scheduler.log('Did update: ' + this.props.label); + } + render() { + return ; + } } - render() { - return ; + + const ChildA = ; + const lazyChildA = lazy(() => { + Scheduler.log('Init A'); + return fakeImport(ChildA); + }); + const ChildB = ; + const lazyChildB = lazy(() => { + Scheduler.log('Init B'); + return fakeImport(ChildB); + }); + const ChildA2 = ; + const lazyChildA2 = lazy(() => { + Scheduler.log('Init A2'); + return fakeImport(ChildA2); + }); + const ChildB2 = ; + const lazyChildB2 = lazy(() => { + Scheduler.log('Init B2'); + return fakeImport(ChildB2); + }); + + function Parent({swap}) { + return ( + }> + {swap ? [lazyChildB2, lazyChildA2] : [lazyChildA, lazyChildB]} + + ); } - } - const ChildA = ; - const lazyChildA = lazy(() => { - Scheduler.log('Init A'); - return fakeImport(ChildA); - }); - const ChildB = ; - const lazyChildB = lazy(() => { - Scheduler.log('Init B'); - return fakeImport(ChildB); - }); - const ChildA2 = ; - const lazyChildA2 = lazy(() => { - Scheduler.log('Init A2'); - return fakeImport(ChildA2); - }); - const ChildB2 = ; - const lazyChildB2 = lazy(() => { - Scheduler.log('Init B2'); - return fakeImport(ChildB2); - }); + const root = ReactTestRenderer.create(, { + unstable_isConcurrent: false, + }); - function Parent({swap}) { - return ( - }> - {swap ? [lazyChildB2, lazyChildA2] : [lazyChildA, lazyChildB]} - - ); - } + assertLog(['Init A', 'Loading...']); + expect(root).not.toMatchRenderedOutput('AB'); - const root = ReactTestRenderer.create(, { - unstable_isConcurrent: false, + await resolveFakeImport(ChildA); + // We need to flush to trigger the B to load. + await waitForAll(['Init B']); + await resolveFakeImport(ChildB); + + await waitForAll(['A', 'B', 'Did mount: A', 'Did mount: B']); + expect(root).toMatchRenderedOutput('AB'); + + // Swap the position of A and B + root.update(); + assertLog(['Init B2', 'Loading...']); + await resolveFakeImport(ChildB2); + // We need to flush to trigger the second one to load. + await waitForAll(['Init A2']); + await resolveFakeImport(ChildA2); + + await waitForAll(['b', 'a', 'Did update: b', 'Did update: a']); + expect(root).toMatchRenderedOutput('ba'); }); - assertLog(['Init A', 'Loading...']); - expect(root).not.toMatchRenderedOutput('AB'); + it('mount and reorder lazy types (legacy mode)', async () => { + class Child extends React.Component { + componentDidMount() { + Scheduler.log('Did mount: ' + this.props.label); + } + componentDidUpdate() { + Scheduler.log('Did update: ' + this.props.label); + } + render() { + return ; + } + } - await resolveFakeImport(ChildA); - // We need to flush to trigger the B to load. - await waitForAll(['Init B']); - await resolveFakeImport(ChildB); + function ChildA({lowerCase}) { + return ; + } - await waitForAll(['A', 'B', 'Did mount: A', 'Did mount: B']); - expect(root).toMatchRenderedOutput('AB'); + function ChildB({lowerCase}) { + return ; + } - // Swap the position of A and B - root.update(); - assertLog(['Init B2', 'Loading...']); - await resolveFakeImport(ChildB2); - // We need to flush to trigger the second one to load. - await waitForAll(['Init A2']); - await resolveFakeImport(ChildA2); + const LazyChildA = lazy(() => { + Scheduler.log('Init A'); + return fakeImport(ChildA); + }); + const LazyChildB = lazy(() => { + Scheduler.log('Init B'); + return fakeImport(ChildB); + }); + const LazyChildA2 = lazy(() => { + Scheduler.log('Init A2'); + return fakeImport(ChildA); + }); + const LazyChildB2 = lazy(() => { + Scheduler.log('Init B2'); + return fakeImport(ChildB); + }); - await waitForAll(['b', 'a', 'Did update: b', 'Did update: a']); - expect(root).toMatchRenderedOutput('ba'); + function Parent({swap}) { + return ( + }> + }> + {swap + ? [ + , + , + ] + : [, ]} + + + ); + } + + const root = ReactTestRenderer.create(, { + unstable_isConcurrent: false, + }); + + assertLog(['Init A', 'Init B', 'Loading...']); + expect(root).not.toMatchRenderedOutput('AB'); + + await resolveFakeImport(ChildA); + await resolveFakeImport(ChildB); + + await waitForAll(['A', 'B', 'Did mount: A', 'Did mount: B']); + expect(root).toMatchRenderedOutput('AB'); + + // Swap the position of A and B + root.update(); + assertLog(['Init B2', 'Loading...']); + await waitForAll(['Init A2', 'b', 'a', 'Did update: b', 'Did update: a']); + expect(root).toMatchRenderedOutput('ba'); + }); }); });