APSL/react-native-button

set testID prop on TouchableHighlight for ios

Closed this issue · 3 comments

its used to grab the button in end to end tests, without it its not possible to test the component using this button.

its not very well documented but here it is in the code:
https://github.com/facebook/react-native/blob/master/Libraries/Components/Touchable/TouchableHighlight.js#L271

Not working on android either.

Gys commented

I work around it by using a wrapper component, but that is not ideal.

import React, { Component } from 'react';
import { BackAndroid, ScrollView, StyleSheet, Text, View } from 'react-native';
import Button from 'apsl-react-native-button';
export default class WrapperButton extends Component {
    render() {
        return(    
            <View style={{width:"100%"}} testID={this.props.testID}>
                <Button
                    style={this.props.style}
                    onPress={this.props.onPress.bind(this)}
                    isDisabled={this.props.isDisabled}       
                    disabledStyle={this.props.disabledStyle}             
                >{this.props.children}</Button>    
            </View>
        )
    }
}
ma-pe commented

@Gys workaround wouldn't work for me, since my e2e testing framework (detox) says that a View is no Interactable. You can use TouchableOpacity instead of View, though I had some styling issues with my buttons.

The pull requests resolves the original issue. testID will now be extracted and passed to the TouchableNativeFeedback that is used internally.