Problem rendering FlatElements

[robertovg]

I love to have react-native-testing testing approach in RN, and I'm starting to use it.

I can render almost any RN element, unless FlatList and SectionList. Somehow they are never renderer when I try to access the elements I render with renderItem, additionally when I check with debug() is like if they are omitted from the rendering.

What should I do to get them working?

[thymikee]

Hey! Can you post an example? I'd like to have this tested inside this repo

[robertovg]

Of course, I wanted to share an isolated case to show you the problem via http://snack.expo.io but is not possible, because snack doesn't allow the unit test.

So I created a simple project with expo init and I build the "same implementation" with and without FlatList, here in Github: https://github.com/robertovg/React-Native-Testing-Library-Flat-List

I wrote 3 tests:

• One just with a snapshot, so you can see that FlatList is not generating any output. App.test.js
• One to test the version which is not using FlatList and just rendering out the items with a map¡
• And the last one and more important one called AppWithFlatList.test.js where I try to perform some test with the items inside the FlatList to check if they are correctly rendered ( the test is the same as the previous one ), but of course if failing because the render from react-native-testing-library but doesn't render out the items.

Of course if you just npm start you will see the list showing up within FlatList version, and to run all the tests just npm test where you will see one test failing.

This is super important to incorporate good unit testing and integration testings on our RN projects as we do with React ones 🤓.

So, now the question, how should I test things with FlatList or SectionList (which has the same problems) with this render?

PD: I love what your guys are doing with this project, I'm sure is super needed in RN world so I'm happy to help if you need some help and think I could be useful.

[thymikee]

Thanks! I'll have a look at the code soon and will see what can be done on our side or in RN itself

[thymikee]

Ok, so I created a small sample based on your component and it works just fine. See:

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>
    );
  }
}

test('FlatList', () => {
  const { debug, getByText } = render(<AppWithFlatList />);
  debug(); // renders 3 projects, A, B, C
  fireEvent.press(getByText('remove last'));
  debug(); // renders 2 projects, A, B
});

I caused a re-render by changing state here. Maybe your component doesn't re-render for some reason (I didn't look too much at your sample)

Here's the output I get locally:

before state update	after state update

[robertovg]

Ok, I'm sure there is something wrong with my configuration, on the same project I just added a new Test Case with your code called SmallIsolatedSample.test.js. And now I got the same output as before:

<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 button, there are no projects.

So could you check this project configuration or share yours?, as this is the source of all my problems to use this lib.

Thanks in advance! 🙌

Adding also the screenshot

[thymikee]

FlatList is cleary rendered as null renderItem is not called and doesn't show in component tree. Is it possible that jest-expo preset mocks FlatList like that?

[robertovg]

It is strange this, but could be. Could you share with me a project with your example so I can compare the ’package’ configuration?

Because you also tried to download and try this repo with the same result, right?

[thymikee]

I literally copied my example to this very repo's test suite. I'm looking at your project and there's something strange indeed.

[robertovg]

Just to be clear, your test suit doesn't work in my project in your machine, that's why my project report has something wrong, right?

I just tried using the same repo with presset: react-native instead of jest-expo as it's recommended here: https://jestjs.io/docs/en/tutorial-react-native, with the same result.
Expo is a must for us, as is already part of our dev workflow, but we could change anything for the unit testing, that's why I'm asking for a working example of a project where the FlatList is correctly rendered.

Well, hope to get something to fix it, and I would like to thanks for the help you gave already. Hopefully, you will find out what's wrong with this project.

And yes, I added consoles in the Project component and is never called at all. So as you corrected your self, is not called.

I think more people will found this problem because is just created with expo init so will be useful to understand why the render from react-native-testing-library is not going deeper with the FlatList.

[thymikee]

I just checked with plain react-test-renderer and the same happens (not surprised though, as we don't change anything render outputs).
Someone from the Expo team would need to weigh in.

[robertovg]

Will post them but maybe you could share a project where your example was working to check if I can use Expo for app running and your conf without Expo for tests.

On Fri, 23 Nov 2018 at 16:43, Michał Pierzchała ***@***.***> wrote: I just checked with plain react-test-renderer and the same happens (not surprised though, as we don't change anything render outputs). Someone from the Expo team would need to weigh in. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#68 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAi1N2C41NLPOW8ETOVV64uWkgHBwnhMks5uyBehgaJpZM4YvzxU> .

--

…

-- Roberto Vázquez González

[thymikee]

Also confirmed that this helps (obviously a hack):

-  "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
+  "react-native": "0.57",

So there's definitely some extra work Expo is doing with FlatList/VirtualizedList or their deps that prevents rendering items in test environment.

You can find the example that works on this branch: https://github.com/callstack/react-native-testing-library/tree/expo-bug/flatlist

That being said, this is not actionable on our side, so I mark this issue as a wontfix, but leave for visibility and for Expo contributors to see.

[robertovg]

I just send them the issue, as you said, is not a problem with react-native-testing-library but something they are doing with the FlatList.

Let's see the solution as I think will be useful for any react-native developer using expo.

Thanks for all!