handled a missing suspense fiber when suspense is filtered on the profiler (#19987)
Co-authored-by: Brian Vaughn <bvaughn@fb.com>
IDrissAitHafid committed
Oct 13, 2020 at 18:38 UTC
e614e6965749c096c9db0e6ad2844a2803ebdcb6
3 files changed
+44
-1
packages/react-devtools-shared/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap
+13
@@ -84,6 +84,19 @@ exports[`Store component filters should ignore invalid ElementTypeRoot filter: 2
84
<div>
85
`;
86
87
+exports[`Store component filters should not break when Suspense nodes are filtered from the tree: 1: suspended 1`] = `
88
+[root]
89
+ ▾ <Wrapper>
90
+ ▾ <Loading>
91
+ <div>
92
+`;
93
+
94
+exports[`Store component filters should not break when Suspense nodes are filtered from the tree: 2: resolved 1`] = `
95
+[root]
96
+ ▾ <Wrapper>
97
+ <Component>
98
+`;
99
+
100
exports[`Store component filters should support filtering by element type: 1: mount 1`] = `
101
[root]
102
▾ <Root>
packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
+30
@@ -227,4 +227,34 @@ describe('Store component filters', () => {
227
]),
228
);
229
});
230
+
231
+ it('should not break when Suspense nodes are filtered from the tree', () => {
232
+ const promise = new Promise(() => {});
233
+
234
+ const Loading = () => <div>Loading...</div>;
235
+
236
+ const Component = ({shouldSuspend}) => {
237
+ if (shouldSuspend) {
238
+ throw promise;
239
+ }
240
+ return null;
241
+ };
242
+
243
+ const Wrapper = ({shouldSuspend}) => (
244
+ <React.Suspense fallback={<Loading />}>
245
+ <Component shouldSuspend={shouldSuspend} />
246
+ </React.Suspense>
247
+ );
248
+
249
+ store.componentFilters = [
250
+ utils.createElementTypeFilter(Types.ElementTypeSuspense),
251
+ ];
252
+
253
+ const container = document.createElement('div');
254
+ act(() => ReactDOM.render(<Wrapper shouldSuspend={true} />, container));
255
+ expect(store).toMatchSnapshot('1: suspended');
256
+
257
+ act(() => ReactDOM.render(<Wrapper shouldSuspend={false} />, container));
258
+ expect(store).toMatchSnapshot('2: resolved');
259
+ });
260
});
packages/react-devtools-shared/src/backend/renderer.js
+1
-1
@@ -1572,7 +1572,7 @@ export function attach(
1572
if (nextPrimaryChildSet !== null) {
1573
mountFiberRecursively(
1574
nextPrimaryChildSet,
1575
- nextFiber,
1575
+ shouldIncludeInTree ? nextFiber : parentFiber,
1576
true,
1577
traceNearestHostComponentUpdate,
1578
);