Fix component name for React.lazy (#13443)
* Fix component name for React.lazy * Fix lint
Dan Abramov committed
Aug 20, 2018 at 16:43 UTC
973496b40ce6fcb84f3df20aa1c73af5bc4db0d4
2 files changed
+26
-6
packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
+24
@@ -1576,6 +1576,30 @@ describe('ReactSuspense', () => {
1576
span('C'),
1577
]);
1578
});
1579
+
1580
+ it('includes lazy-loaded component in warning stack', async () => {
1581
+ const LazyFoo = lazy(() => {
1582
+ ReactNoop.yield('Started loading');
1583
+ const Foo = props => (
1584
+ <div>{[<Text text="A" />, <Text text="B" />]}</div>
1585
+ );
1586
+ return Promise.resolve(Foo);
1587
+ });
1588
+
1589
+ ReactNoop.render(
1590
+ <Placeholder fallback={<Text text="Loading..." />}>
1591
+ <LazyFoo />
1592
+ </Placeholder>,
1593
+ );
1594
+ expect(ReactNoop.flush()).toEqual(['Started loading', 'Loading...']);
1595
+ expect(ReactNoop.getChildren()).toEqual([]);
1596
+
1597
+ await LazyFoo;
1598
+ expect(() => {
1599
+ expect(ReactNoop.flush()).toEqual(['A', 'B']);
1600
+ }).toWarnDev(' in Text (at **)\n' + ' in Foo (at **)');
1601
+ expect(ReactNoop.getChildren()).toEqual([div(span('A'), span('B'))]);
1602
+ });
1603
});
1604
1605
it('does not call lifecycles of a suspended component', async () => {
packages/shared/getComponentName.js
+2
-6
@@ -21,10 +21,7 @@ import {
21
REACT_STRICT_MODE_TYPE,
22
REACT_PLACEHOLDER_TYPE,
23
} from 'shared/ReactSymbols';
24
-import {
25
- getResultFromResolvedThenable,
26
- refineResolvedThenable,
27
-} from 'shared/ReactLazyComponent';
24
+import {refineResolvedThenable} from 'shared/ReactLazyComponent';
25
26
function getComponentName(type: mixed): string | null {
27
if (type == null) {
@@ -77,8 +74,7 @@ function getComponentName(type: mixed): string | null {
74
const thenable: Thenable<mixed> = (type: any);
75
const resolvedThenable = refineResolvedThenable(thenable);
76
if (resolvedThenable) {
80
- const Component = getResultFromResolvedThenable(resolvedThenable);
81
- return getComponentName(Component);
77
+ return getComponentName(resolvedThenable);
78
}
79
}
80
}