Problem rendering FlatElements about react-native-testing-library HOT 14 CLOSED

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!

from react-native-testing-library.

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

from react-native-testing-library.

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.

from react-native-testing-library.

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

from react-native-testing-library.

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

from react-native-testing-library.

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

from react-native-testing-library.

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?

from react-native-testing-library.

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?

from react-native-testing-library.

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

from react-native-testing-library.

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.

from react-native-testing-library.

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.

from react-native-testing-library.

from react-native-testing-library.

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.

from react-native-testing-library.

Closing this issue then. Let us know what you found out and when it's fixed :)

from react-native-testing-library.