Expo version of React-Native is not able to render `FlatList` or `SectionList ` with in the Jest tests.

Hi guys, I have a problem with your version of React-Native of expo, basically I have a project where I try to write unit testing and the FlatList never calls the renderItem with the collection I’m calling it, because of that, I can’t make proper tests of my application and I would like to.

I have a project up created and running with the configuration provided out of the box by expo init here, where you can see the issue isolated, especially in one file called SmallIsolatedSample.test.js.

There we have this component.

class AppWithFlatList extends React.Component {
  state = {
    projects: [
      { name: 'Super Important Project A', id: '01' },
      { name: 'Super Important Project B', id: '02' },
      { name: 'Super Important Project C', id: '03' },
    ],
  };

  render() {
    const Project = ({ name }) => <Text>{name}</Text>;
    return (
      <View>
        <Button
          title="remove last"
          onPress={() => this.setState(state => ({ projects: state.projects.slice(0, 2) }))}
        />
        <FlatList
          data={this.state.projects}
          renderItem={({ item }) => <Project name={item.name} />}
          keyExtractor={({ id }) => id}
          ListEmptyComponent={<Text>There are no projects</Text>}
        />
      </View>
    );
  }
}

And the result of it, Is displayed (with debug) as:

<View>
      <View
        accessibilityRole="button"
        accessibilityStates={Array []}
        accessible={true}
        isTVSelectable={true}
        onResponderGrant={[Function bound touchableHandleResponderGrant]}
        onResponderMove={[Function bound touchableHandleResponderMove]}
        onResponderRelease={[Function bound touchableHandleResponderRelease]}
        onResponderTerminate={[Function bound touchableHandleResponderTerminate]}
        onResponderTerminationRequest={[Function bound touchableHandleResponderTerminationRequest]}
        onStartShouldSetResponder={[Function bound touchableHandleStartShouldSetResponder]}
        style={
          Object {            "opacity": 1,
          }
        }
      >
        <View
          style={
            Array [
              Object {},
            ]
          }
        >
          <Text
            style={
              Array [
                Object {
                  "color": "#007AFF",
                  "fontSize": 18,
                  "padding": 8,
                  "textAlign": "center",
                },
              ]
            }
          >
            remove last
          </Text>
        </View>
      </View>
    </View>

As you can see after the remove last Button the FlatList is not rendered.

I changed the version of react-native in the package.json from https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz to 0.57.5 and it renders out perfectly the items in the test environment.

<View>
        <View
          accessibilityRole="button"
          accessibilityStates={Array []}
          accessible={true}
          isTVSelectable={true}
          onResponderGrant={[Function bound touchableHandleResponderGrant]}
          onResponderMove={[Function bound touchableHandleResponderMove]}
          onResponderRelease={[Function bound touchableHandleResponderRelease]}
          onResponderTerminate={[Function bound touchableHandleResponderTerminate]}
          onResponderTerminationRequest={[Function bound touchableHandleResponderTerminationRequest]}
          onStartShouldSetResponder={[Function bound touchableHandleStartShouldSetResponder]}
          style={
            Object {
              "opacity": 1,
            }
          }
        >
          <View
            style={
              Array [
                Object {},
              ]
            }
          >
            <Text
              style={
                Array [
                  Object {
                    "color": "#007AFF",
                    "fontSize": 18,
                    "padding": 8,
                    "textAlign": "center",
                  },
                ]
              }
            >
              remove last
            </Text>
          </View>
        </View>
        <RCTScrollView
          ListEmptyComponent={
            <Text>
              There are no projects
            </Text>
          }
          data={
            Array [
              Object {
                "id": "01",
                "name": "Super Important Project A",
              },
              Object {
                "id": "02",
                "name": "Super Important Project B",
              },
              Object {
                "id": "03",
                "name": "Super Important Project C",
              },
            ]
          }
          disableVirtualization={false}
          getItem={[Function anonymous]}
          getItemCount={[Function anonymous]}
          horizontal={false}
          initialNumToRender={10}
          keyExtractor={[Function anonymous]}
          maxToRenderPerBatch={10}
          numColumns={1}
          onContentSizeChange={[Function anonymous]}
          onEndReachedThreshold={2}
          onLayout={[Function anonymous]}
          onMomentumScrollEnd={[Function anonymous]}
          onScroll={[Function anonymous]}
          onScrollBeginDrag={[Function anonymous]}
          onScrollEndDrag={[Function anonymous]}
          renderItem={[Function anonymous]}
          scrollEventThrottle={50}
          stickyHeaderIndices={Array []}
          updateCellsBatchingPeriod={50}
          viewabilityConfigCallbackPairs={Array []}
          windowSize={21}
        >
          <View>
            <View
              onLayout={[Function onLayout]}
              style={null}
            >
              <Text>
                Super Important Project A
              </Text>
            </View>
            <View
              onLayout={[Function onLayout]}
              style={null}
            >
              <Text>
                Super Important Project B
              </Text>
            </View>
            <View
              onLayout={[Function onLayout]}
              style={null}
            >
              <Text>
                Super Important Project C
              </Text>
            </View>
          </View>
        </RCTScrollView>
      </View>

I thought the problem was because of the testing library used and I posted the bug first on the react-native-testing-library repo but it’s not the case, as using also the react-test-renderer we find the same issue.

I want to continue using expo in my projects, but I also want to not be restricted on the testings I can do because of it.

• How could I make this FlatList to be rendered as it should be in the testing environment?
• If this is not possible, maybe there could be a way to use facebook/react-native version for testing and expo/react-native for unit testing executed by jest somehow, could you explain or teach how to be able to approach this?

I hope to find a nice solution, and thanks for Expo, is a game-changing tool for react-native developments 🙌.

[clarkcutler]

We ran into this issue as well. For us, a work-around was adding the following mock to the top of our test file that needed FlatList to render:

jest.mock('ScrollView', () => require.requireMock('ScrollViewMock'))

The commit in the expo fork of react-native that seems to have introduced the issue is: https://github.com/expo/react-native/commit/dbddbbf9830403e1665fe44d3c17d836291c0bef#diff-606adbd6a8c97d177b17baee5a69cdd9R46

[robertovg]

Don’t think so, as I said, I created this project with isolated version of a brand new project comming from expo init so any special testing configuration, just default configuration and there is no react-native-jest-mocks like in this thread or any other mocking render in the configuration this example project, as you can see in the package.json of this example project.

Right now I’m using official react-native for testing right now and expo one for publishing, but this is a work around, I think tests should work also with expo.