Is it possible to test RecyclerListView elements?

[kalpeshsingh]

👋 Hello community/contributors/maintainers,

As the philosophy of Testing Library is to mimic user interaction, I wanted to incorporate that philosophy in my code.

Problem statement

The RecyclerListView helps to render listview for React Native in performant manner. I use this to render card layouts (like YouTube) in my app.

I want to trigger certain user events such as press, scroll etc. but I'm unable to do it because Testing library is unable to render those elements (LargeCarouselCard). I checked it using debug function.

If I the library can't find elements then I can't use fireEvents. Thus I can't test the common scenario for this case.

Expectation

The Testing Library should render those card elements to perform user events on them to test the code.

Output

 <View
      style={
        Object {
          "backgroundColor": "black",
          "flex": 1,
          "width": "100%",
        }
      }
    >
      <RCTScrollView
        canChangeSize={false}
        contentHeight={0}
        contentWidth={0}
        dataProvider={
          DataProvider {
            "_data": Array [
              Object {
                "rlvCorrection": true,
              },
              Object {}, // 👈 data here 
            ],
            "_firstIndexToProcess": 0,
            "_hasStableIds": true,
            "_requiresDataChangeHandling": false,
            "_size": 28,
            "getStableId": [Function anonymous],
            "rowHasChanged": [Function anonymous],
          }
        }
        .... more props here
        testID="rlvComponent"
      >
        <View>
          <View
            style={
              Object {
                "flexDirection": "column",
              }
            }
          >
// I'M EXPECTING CARD ELEMENTS HERE, BUT THEY AIN'T PRESENT
            <View
              horizontal={false}
              scrollOffset={0}
              style={
                Object {
                  "height": 0,
                  "width": 0,
                }
              }
              windowSize={250}
            />
          </View>
        </View>
      </RCTScrollView>
    </View>

Minimum repo

Check App.test.js

• https://snack.expo.dev/KAe4aFd11

Codesandbox

• https://codesandbox.io/s/pensive-meadow-fho4w?file=/src/__test__/App.test.js

[kalpeshsingh]

Hello @thymikee
There are a lot of good test can be written if I get direction on this.

onPress, onScroll etc. can be covered.

[thymikee]

The debug won't display anything other than View, Text, ScrollView etc as these are host components. LargeCarouselCard is a composite component that's invisible to the native layer, which only gets host components. We won't add anything special for a 3rd party component like RecyclerListView. The elements, however, should be rendered – it's possible that they're not because the RecyclerListView does some layout calculations which are not possible in Node.js environment and would have to be mocked. In such case the library repository would be the best place to add mocks and the means to test the component.

[kalpeshsingh]

Oh! Thanks for the clarification and clearing the expectation.
Please help here with this -

In such case the library repository would be the best place to add mocks and the means to test the component.

Are you suggesting to mock RecyclerListView (child of App.js) in App.test.js to make it work?
I'm weighing how much will it be complex to mock RecyclerListView and use it.

[thymikee]

No idea, haven't used this component yet. You can start with a minimal mock that makes sense for you and then extend with extra functionality as necessary/requested by the users.