DevTools cleanup (#17283)
1. Add a Store test for memo, lazy, and forwardRef components 2. Remove dead code for React.lazy 3. Update DT tests to include HOC badge names in the serialized store
Brian Vaughn committed
Nov 5, 2019 at 22:19 UTC
34527063083195558f98108cde10b5d6ad0d6865
4 files changed
+72
-7
packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap
+12
@@ -612,3 +612,15 @@ exports[`Store should properly serialize non-string key values: 1: mount 1`] = `
612
[root]
613
<Child key="123">
614
`;
615
+
616
+exports[`Store should show the right display names for special component types 1`] = `
617
+[root]
618
+ ▾ <App>
619
+ <MyComponent>
620
+ <MyComponent> [ForwardRef]
621
+ <MyComponent> [Memo]
622
+ ▾ <MyComponent> [Memo]
623
+ <MyComponent> [ForwardRef]
624
+ ▾ <Suspense>
625
+ <MyComponent>
626
+`;
packages/react-devtools-shared/src/__tests__/store-test.js
+38
@@ -848,4 +848,42 @@ describe('Store', () => {
848
act(() => ReactDOM.render([fauxElement], document.createElement('div')));
849
expect(store).toMatchSnapshot('1: mount');
850
});
851
+
852
+ it('should show the right display names for special component types', async done => {
853
+ async function fakeImport(result) {
854
+ return {default: result};
855
+ }
856
+
857
+ const MyComponent = (props, ref) => null;
858
+ const FowardRefComponent = React.forwardRef(MyComponent);
859
+ const MemoComponent = React.memo(MyComponent);
860
+ const MemoForwardRefComponent = React.memo(FowardRefComponent);
861
+ const LazyComponent = React.lazy(() => fakeImport(MyComponent));
862
+
863
+ const App = () => (
864
+ <React.Fragment>
865
+ <MyComponent />
866
+ <FowardRefComponent />
867
+ <MemoComponent />
868
+ <MemoForwardRefComponent />
869
+ <React.Suspense fallback="Loading...">
870
+ <LazyComponent />
871
+ </React.Suspense>
872
+ </React.Fragment>
873
+ );
874
+
875
+ const container = document.createElement('div');
876
+
877
+ // Render once to start fetching the lazy component
878
+ act(() => ReactDOM.render(<App />, container));
879
+
880
+ await Promise.resolve();
881
+
882
+ // Render again after it resolves
883
+ act(() => ReactDOM.render(<App />, container));
884
+
885
+ expect(store).toMatchSnapshot();
886
+
887
+ done();
888
+ });
889
});
packages/react-devtools-shared/src/backend/renderer.js
-5
@@ -331,11 +331,6 @@ export function getInternalReactConstants(
331
} = ReactSymbols;
332
333
function resolveFiberType(type: any) {
334
- // This is to support lazy components with a Promise as the type.
335
- // see https://github.com/facebook/react/pull/13397
336
- if (typeof type.then === 'function') {
337
- return type._reactResult;
338
- }
334
const typeSymbol = getTypeSymbol(type);
335
switch (typeSymbol) {
336
case MEMO_NUMBER:
packages/react-devtools-shared/src/devtools/utils.js
+22
-2
@@ -7,6 +7,11 @@
7
* @flow
8
*/
9
10
+import {
11
+ ElementTypeForwardRef,
12
+ ElementTypeMemo,
13
+} from 'react-devtools-shared/src/types';
14
+
15
import type {Element} from './views/Components/types';
16
import type Store from './store';
17
@@ -21,10 +26,25 @@ export function printElement(element: Element, includeWeight: boolean = false) {
26
key = ` key="${element.key}"`;
27
}
28
24
- let hocs = '';
29
+ let hocDisplayNames = null;
30
if (element.hocDisplayNames !== null) {
26
- hocs = ` [${element.hocDisplayNames.join('][')}]`;
31
+ hocDisplayNames = [...element.hocDisplayNames];
32
}
33
+ if (element.type === ElementTypeMemo) {
34
+ if (hocDisplayNames === null) {
35
+ hocDisplayNames = ['Memo'];
36
+ } else {
37
+ hocDisplayNames.push('Memo');
38
+ }
39
+ } else if (element.type === ElementTypeForwardRef) {
40
+ if (hocDisplayNames === null) {
41
+ hocDisplayNames = ['ForwardRef'];
42
+ } else {
43
+ hocDisplayNames.push('ForwardRef');
44
+ }
45
+ }
46
+
47
+ let hocs = hocDisplayNames === null ? '' : ` [${hocDisplayNames.join('][')}]`;
48
49
let suffix = '';
50
if (includeWeight) {