-
Notifications
You must be signed in to change notification settings - Fork 279
Is it possible to test RecyclerListView elements? #788
-
👋 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
Codesandbox
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 1 comment 3 replies
-
Hello @thymikee
There are a lot of good test can be written if I get direction on this.
onPress, onScroll etc. can be covered.
Beta Was this translation helpful? Give feedback.
All reactions
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1