spec.press resulting in error for non Button components

[fuzzpedal]

spec.press is working for Button components but I get the following error for TouchableHighlight and TouchableOpacity components: undefined is not an object (evaluating 'component.props.onPress')

I'm using expo and typescript if that makes a difference.

[PolarisWT]

This is happening in my project as well. Tried upgrading cavy to v4.0.0 and cavy-cli v2.0.0. After some internal testing, it appears it may be related to a change in React Native v0.62. Downgrading to RN 0.61, tests run okay. This is true for cavy v4 and v3.x (with appropriate cli).

Major overhaul of Touchable[...] components may the cause... https://github.com/react-native-community/releases/blob/master/CHANGELOG.md#removed

Looks the removal of propTypes (which contained the handler mixin function for onPress for these actions) in favor of the new Pressability feature.

press action either needs to be expanded to account for Pressability states, or new actions created https://github.com/pixielabs/cavy/blob/master/src/TestScope.js#L147

[fuzzpedal]

@PolarisWT that's really helpful, thanks!

[AbigailMcP]

Thanks for delving into this @PolarisWT, really useful findings! @fuzzpedal - did you find that you were able to swap to using the Pressable component with spec.press?

Looks like we have a couple of things it would be good to address Cavy-side:

• Our sample app is using React Native 0.59, and shows TouchableHighlight being used with spec.press. This needs to be updated.
• We should add something to the docs about using Cavy with TouchableHighlights / Capacity, whether this is just a not on React Native versions for now, or a workaround, I'm not quite sure without investigating further.
• It would be nice to support all Pressable props.

I'll add these to the public backlog!

Note that if there isn't a Cavy helper function that calls the exact prop you need, you can always use spec.findComponent and call the props on the component yourself. This might be useful for interacting with Pressable for the time being.

[PolarisWT]

Note that if there isn't a Cavy helper function that calls the exact prop you need, you can always use spec.findComponent and call the props on the component yourself. This might be useful for interacting with Pressable for the time being.

^^^ Great! Got the onPress() firing with help from this post you did on issue https://github.com/pixielabs/cavy/issues/101#issuecomment-539947916.

Referenced for anyone else running across this issue as spec.findComponent did not work right out of the box on some components without wrap() for me

[Duy1999]

@AbigailMcP How can you work on the checkBox component? i try using hook and wrap but it got the error: component.props.onPress is not a function. (In 'component.props.onPress()', 'component.props.onPress' is undefined)

also, how can we use cavy with the bottom tabs created like this

[AbigailMcP]

Hi @Duy1999 ! Sorry I haven't been able to look into this sooner.

Checkboxes Firstly, can I confirm that it's the react-native-checkbox you're using from react-native-community?

I assume you're getting the component.props.onPress error when you're using cavy's spec.press() function. This called the component's onPress prop underneath the hook, but it sounds as though this isn't a prop on your checkbox. Is there a prop you can call instead, like props.onValueChange?

If so, you can use cavy's findComponent() function to return your checkbox component, and call the correct prop directly yourself.

Let me know how you get on with this. In the future, it might be nice for Cavy to support checking checkboxes, as they're a common form element! I'll add this to Cavy's product backlog for consideration :)

Stack Navigator I don't actually have any personal experience integrating Cavy with this style of navigation set up.. and I can't think of anything obvious to suggest at the moment! Looking at the docs, there's tabBarButtonComponent, which you could try adding a ref to, but that sounds less than ideal.

Paging @jalada in case he has any ideas!

[jalada]

Re: Stack Navigator, a custom component was my first thought as well.