Update typed export and fix test

Summary:
Changelog:
[General][Changed] - Change export type of VirtualizedSectionList and wrap component updates in `act` in test.

Reviewed By: nadiia, kacieb

Differential Revision: D26575615

fbshipit-source-id: 60923604b40c343ed4244ec4fd33107158888c8e

Libraries/Lists/VirtualizedSectionList.js

@@ -100,7 +100,7 @@ type OptionalProps<SectionT: SectionBase<any>> = {|
   onEndReached?: ?({distanceFromEnd: number, ...}) => void,
 |};
 
-type VirtualizedListProps = React.ElementProps<typeof VirtualizedList>;
+type VirtualizedListProps = React.ElementConfig<typeof VirtualizedList>;
 
 export type Props<SectionT> = {|
   ...RequiredProps<SectionT>,
@@ -212,11 +212,11 @@ class VirtualizedSectionList<
     );
   }
 
-  _getItem = (
+  _getItem(
     props: Props<SectionT>,
     sections: ?$ReadOnlyArray<Item>,
     index: number,
-  ): ?Item => {
+  ): ?Item {
     if (!sections) {
       return null;
     }
@@ -238,7 +238,7 @@ class VirtualizedSectionList<
       }
     }
     return null;
-  };
+  }
 
   _keyExtractor = (item: Item, index: number) => {
     const info = this._subExtractor(index);
@@ -577,4 +577,11 @@ class ItemWithSeparator extends React.Component<
   }
 }
 
-module.exports = VirtualizedSectionList;
+module.exports = (VirtualizedSectionList: React.AbstractComponent<
+  React.ElementConfig<typeof VirtualizedSectionList>,
+  $ReadOnly<{
+    getListRef: () => ?React.ElementRef<typeof VirtualizedList>,
+    scrollToLocation: (params: ScrollToLocationParamsType) => void,
+    ...
+  }>,
+>);

Libraries/Lists/__tests__/VirtualizedSectionList-test.js

@@ -103,26 +103,37 @@ describe('VirtualizedSectionList', () => {
 
   it('handles separators correctly', () => {
     const infos = [];
-    const component = ReactTestRenderer.create(
-      <VirtualizedSectionList
-        ItemSeparatorComponent={props => <separator {...props} />}
-        sections={[
-          {title: 's0', data: [{key: 'i0'}, {key: 'i1'}, {key: 'i2'}]},
-        ]}
-        renderItem={info => {
-          infos.push(info);
-          return <item title={info.item.key} />;
-        }}
-        getItem={(data, key) => data[key]}
-        getItemCount={data => data.length}
-      />,
-    );
+    let component;
+    ReactTestRenderer.act(() => {
+      component = ReactTestRenderer.create(
+        <VirtualizedSectionList
+          ItemSeparatorComponent={props => <separator {...props} />}
+          sections={[
+            {title: 's0', data: [{key: 'i0'}, {key: 'i1'}, {key: 'i2'}]},
+          ]}
+          renderItem={info => {
+            infos.push(info);
+            return <item title={info.item.key} />;
+          }}
+          getItem={(data, key) => data[key]}
+          getItemCount={data => data.length}
+        />,
+      );
+    });
     expect(component).toMatchSnapshot();
-    infos[1].separators.highlight();
+
+    ReactTestRenderer.act(() => {
+      infos[1].separators.highlight();
+    });
     expect(component).toMatchSnapshot();
-    infos[2].separators.updateProps('leading', {press: true});
+    ReactTestRenderer.act(() => {
+      infos[2].separators.updateProps('leading', {press: true});
+    });
+    expect(component).toMatchSnapshot();
+    ReactTestRenderer.act(() => {
+      infos[1].separators.unhighlight();
+    });
     expect(component).toMatchSnapshot();
-    infos[1].separators.unhighlight();
   });
 
   it('handles nested lists', () => {

Libraries/Lists/__tests__/__snapshots__/VirtualizedSectionList-test.js.snap

@@ -596,6 +596,140 @@ exports[`VirtualizedSectionList handles separators correctly 3`] = `
 </RCTScrollView>
 `;
 
+exports[`VirtualizedSectionList handles separators correctly 4`] = `
+<RCTScrollView
+  data={
+    Array [
+      Object {
+        "data": Array [
+          Object {
+            "key": "i0",
+          },
+          Object {
+            "key": "i1",
+          },
+          Object {
+            "key": "i2",
+          },
+        ],
+        "title": "s0",
+      },
+    ]
+  }
+  getItem={[Function]}
+  getItemCount={[Function]}
+  keyExtractor={[Function]}
+  onContentSizeChange={[Function]}
+  onLayout={[Function]}
+  onMomentumScrollBegin={[Function]}
+  onMomentumScrollEnd={[Function]}
+  onScroll={[Function]}
+  onScrollBeginDrag={[Function]}
+  onScrollEndDrag={[Function]}
+  renderItem={[Function]}
+  scrollEventThrottle={50}
+  stickyHeaderIndices={Array []}
+>
+  <View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    />
+    <View
+      onLayout={[Function]}
+      style={null}
+    >
+      <View>
+        <item
+          title="i0"
+        />
+        <separator
+          highlighted={false}
+          leadingItem={
+            Object {
+              "key": "i0",
+            }
+          }
+          section={
+            Object {
+              "data": Array [
+                Object {
+                  "key": "i0",
+                },
+                Object {
+                  "key": "i1",
+                },
+                Object {
+                  "key": "i2",
+                },
+              ],
+              "title": "s0",
+            }
+          }
+          trailingItem={
+            Object {
+              "key": "i1",
+            }
+          }
+        />
+      </View>
+    </View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    >
+      <View>
+        <item
+          title="i1"
+        />
+        <separator
+          highlighted={false}
+          leadingItem={
+            Object {
+              "key": "i1",
+            }
+          }
+          press={true}
+          section={
+            Object {
+              "data": Array [
+                Object {
+                  "key": "i0",
+                },
+                Object {
+                  "key": "i1",
+                },
+                Object {
+                  "key": "i2",
+                },
+              ],
+              "title": "s0",
+            }
+          }
+          trailingItem={
+            Object {
+              "key": "i2",
+            }
+          }
+        />
+      </View>
+    </View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    >
+      <item
+        title="i2"
+      />
+    </View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    />
+  </View>
+</RCTScrollView>
+`;
+
 exports[`VirtualizedSectionList renders all the bells and whistles 1`] = `
 <RCTScrollView
   ListEmptyComponent={[Function]}