fix: flatlist not rendering in rntl repo (#1467)

* fix: flatlist not rendering in rntl repo

* refactor: move render tests to RN tests file

---------

Co-authored-by: pierrezimmermann <[email protected]>
Co-authored-by: Maciej Jastrzebski <[email protected]>

Author: 3 people

babel.config.js

@@ -12,7 +12,6 @@ module.exports = {
       },
     ],
   ],
-  plugins: ['@babel/plugin-proposal-class-properties'],
   env: {
     test: {
       // https://github.com/react-native-community/upgrade-support/issues/152

package.json

@@ -34,7 +34,6 @@
   "devDependencies": {
     "@babel/cli": "^7.19.3",
     "@babel/core": "^7.20.2",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-transform-flow-strip-types": "^7.19.0",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-flow": "^7.18.6",

src/__tests__/__snapshots__/render-debug.test.tsx.snap

@@ -393,7 +393,7 @@ exports[`debug: shallow 1`] = `
     value=""
   />
   <MyButton
-    onPress={[Function anonymous]}
+    onPress={[Function changeFresh]}
     type="primary"
   >
     Change freshness!
@@ -445,7 +445,7 @@ exports[`debug: shallow with message 1`] = `
     value=""
   />
   <MyButton
-    onPress={[Function anonymous]}
+    onPress={[Function changeFresh]}
     type="primary"
   >
     Change freshness!

src/__tests__/react-native-api.test.tsx

@@ -1,5 +1,12 @@
 import * as React from 'react';
-import { View, Text, TextInput, Switch } from 'react-native';
+import {
+  View,
+  Text,
+  TextInput,
+  Switch,
+  ScrollView,
+  FlatList,
+} from 'react-native';
 import { render } from '..';
 
 /**
@@ -124,3 +131,81 @@ test('React Native API assumption: <Switch> renders single host element', () =>
     />
   `);
 });
+
+test('ScrollView renders correctly', () => {
+  const screen = render(
+    <ScrollView testID="scrollView">
+      <View testID="view" />
+    </ScrollView>
+  );
+
+  expect(screen.toJSON()).toMatchInlineSnapshot(`
+    <RCTScrollView
+      testID="scrollView"
+    >
+      <View>
+        <View
+          testID="view"
+        />
+      </View>
+    </RCTScrollView>
+  `);
+});
+
+test('FlatList renders correctly', () => {
+  const screen = render(
+    <FlatList
+      testID="flatList"
+      data={[1, 2]}
+      renderItem={({ item }) => <Text>{item}</Text>}
+    />
+  );
+
+  expect(screen.toJSON()).toMatchInlineSnapshot(`
+    <RCTScrollView
+      data={
+        [
+          1,
+          2,
+        ]
+      }
+      getItem={[Function]}
+      getItemCount={[Function]}
+      keyExtractor={[Function]}
+      onContentSizeChange={[Function]}
+      onLayout={[Function]}
+      onMomentumScrollBegin={[Function]}
+      onMomentumScrollEnd={[Function]}
+      onScroll={[Function]}
+      onScrollBeginDrag={[Function]}
+      onScrollEndDrag={[Function]}
+      removeClippedSubviews={false}
+      renderItem={[Function]}
+      scrollEventThrottle={50}
+      stickyHeaderIndices={[]}
+      testID="flatList"
+      viewabilityConfigCallbackPairs={[]}
+    >
+      <View>
+        <View
+          onFocusCapture={[Function]}
+          onLayout={[Function]}
+          style={null}
+        >
+          <Text>
+            1
+          </Text>
+        </View>
+        <View
+          onFocusCapture={[Function]}
+          onLayout={[Function]}
+          style={null}
+        >
+          <Text>
+            2
+          </Text>
+        </View>
+      </View>
+    </RCTScrollView>
+  `);
+});

yarn.lock

@@ -312,7 +312,7 @@
     "@babel/helper-remap-async-to-generator" "^7.18.9"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
 
-"@babel/plugin-proposal-class-properties@^7.0.0", "@babel/plugin-proposal-class-properties@^7.13.0", "@babel/plugin-proposal-class-properties@^7.18.6":
+"@babel/plugin-proposal-class-properties@^7.0.0", "@babel/plugin-proposal-class-properties@^7.13.0":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz#b110f59741895f7ec21a6fff696ec46265c446a3"
   integrity sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==