handled a missing suspense fiber when suspense is filtered on the profiler (facebook#19987)

IDrissAitHafid · Brian Vaughn · web-flow · commit e614e6965749 · 2020-10-13T13:38:58.000-04:00
Co-authored-by: Brian Vaughn &lt;bvaughn@fb.com&gt;
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap
@@ -84,6 +84,19 @@ exports[`Store component filters should ignore invalid ElementTypeRoot filter: 2
       <div>
 `;
 
+exports[`Store component filters should not break when Suspense nodes are filtered from the tree: 1: suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+    ▾ <Loading>
+        <div>
+`;
+
+exports[`Store component filters should not break when Suspense nodes are filtered from the tree: 2: resolved 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component>
+`;
+
 exports[`Store component filters should support filtering by element type: 1: mount 1`] = `
 [root]
   ▾ <Root>
diff --git a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
@@ -227,4 +227,34 @@ describe('Store component filters', () => {
         ]),
     );
   });
+
+  it('should not break when Suspense nodes are filtered from the tree', () => {
+    const promise = new Promise(() => {});
+
+    const Loading = () => <div>Loading...</div>;
+
+    const Component = ({shouldSuspend}) => {
+      if (shouldSuspend) {
+        throw promise;
+      }
+      return null;
+    };
+
+    const Wrapper = ({shouldSuspend}) => (
+      <React.Suspense fallback={<Loading />}>
+        <Component shouldSuspend={shouldSuspend} />
+      </React.Suspense>
+    );
+
+    store.componentFilters = [
+      utils.createElementTypeFilter(Types.ElementTypeSuspense),
+    ];
+
+    const container = document.createElement('div');
+    act(() => ReactDOM.render(<Wrapper shouldSuspend={true} />, container));
+    expect(store).toMatchSnapshot('1: suspended');
+
+    act(() => ReactDOM.render(<Wrapper shouldSuspend={false} />, container));
+    expect(store).toMatchSnapshot('2: resolved');
+  });
 });
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
@@ -1572,7 +1572,7 @@ export function attach(
       if (nextPrimaryChildSet !== null) {
         mountFiberRecursively(
           nextPrimaryChildSet,
-          nextFiber,
+          shouldIncludeInTree ? nextFiber : parentFiber,
           true,
           traceNearestHostComponentUpdate,
         );
