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');
+ });
});
});