add test for ViewCulling when sibling in FLatList resizes (#51311)

Summary:
Pull Request resolved: #51311

changelog: [internal]

add a test case for view culling to cover a crash observed in production.

Reviewed By: lenaic, rubennorte

Differential Revision: D74720814

fbshipit-source-id: ed1246ccbaa0d0ab51a6073f20642c1c78872f30

Author: sammy-SC

packages/react-native/Libraries/Components/ScrollView/__tests__/ScrollView-viewCulling-itest.js

@@ -18,8 +18,9 @@ import type {HostInstance} from 'react-native';
 
 import ensureInstance from '../../../../src/private/__tests__/utilities/ensureInstance';
 import * as Fantom from '@react-native/fantom';
+import nullthrows from 'nullthrows';
 import * as React from 'react';
-import {Modal, ScrollView, View} from 'react-native';
+import {FlatList, Modal, ScrollView, View} from 'react-native';
 import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';
 
 test('basic culling', () => {
@@ -818,6 +819,56 @@ test('culling inside of Modal', () => {
   ]);
 });
 
+test('nesting inside FlatList with item resizing', () => {
+  const root = Fantom.createRoot({viewportHeight: 100, viewportWidth: 100});
+  let _setIsExpanded = null;
+  function ExpandableComponent() {
+    const [isExpanded, setIsExpanded] = React.useState(false);
+    _setIsExpanded = setIsExpanded;
+    return <View>{isExpanded && <View style={{height: 80.5}} />}</View>;
+  }
+
+  Fantom.runTask(() => {
+    root.render(
+      <FlatList
+        style={{height: 100, width: 100}}
+        data={[{key: 'one'}, {key: 'two'}]}
+        renderItem={({item}) => {
+          if (item.key === 'one') {
+            return <ExpandableComponent />;
+          } else if (item.key === 'two') {
+            return (
+              // position: 'absolute' is the important part that prevents Yoga from overcloning.
+              // When Yoga overclones, differentiator visits all cloned nodes and culling is correctly
+              // applied.
+              <View style={{position: 'absolute'}}>
+                <View nativeID={'parent'} style={{marginTop: 10}}>
+                  <View
+                    nativeID={'child'}
+                    style={{height: 10, width: 75, marginTop: 10}}
+                  />
+                </View>
+              </View>
+            );
+          }
+        }}
+      />,
+    );
+  });
+
+  expect(root.takeMountingManagerLogs()).toContain(
+    'Create {type: "View", nativeID: "child"}',
+  );
+
+  Fantom.runTask(() => {
+    nullthrows(_setIsExpanded)(true);
+  });
+
+  expect(root.takeMountingManagerLogs()).toContain(
+    'Delete {type: "View", nativeID: "child"}',
+  );
+});
+
 describe('reparenting', () => {
   test('view flattening with culling', () => {
     const root = Fantom.createRoot({viewportWidth: 100, viewportHeight: 100});

packages/react-native/ReactCommon/react/renderer/mounting/Differentiator.cpp

@@ -280,7 +280,6 @@ static void updateMatchedPairSubtrees(
     return;
   }
 
-  // TODO(T217775046): find a test case for this branch.
   auto oldCullingContextCopy =
       oldCullingContext.adjustCullingContextIfNeeded(oldPair);
   auto newCullingContextCopy =