How to test a ReactNative Listview with an enzyme

Question

I use an enzyme to check the rendering of components.

What is the usual approach to testing elements ListView? For example, in the following example, to verify that when an element is clicked, it calls onSelectprop, passing the identifier?

I am currently using react-native-mock, which means it ListViewdoesn’t display anything, and I cannot separate an element from a separate component, as it needs support onSelectfrom the parent.

export default class extends React.Component {
   constructor(props) {
       super(props);
       this.dataSource = new ListView.DataSource({
           rowHasChanged: (r1, r2) => r1 !== r2
       })
    }
    renderItem = ({id, title}) => {
        const {onSelect} = this.props;
        return <Button onPress={() => onSelect(id)}>{title}</Button>;
    }
    render() {
        const dataSource = this.dataSource.cloneWithRows(this.props.items);
        return (
            <ListView dataSource={dataSource}
                      renderRow={this.renderItem } />)
    }      
}

Answer 1

I got this job using

const wrapper = shallow(<Settings onSelect={onSelectSpy}  />);
const item = shallow(wrapper.instance().renderItem(itemProps));

, , , , , . .

, .

export default class extends React.Component {
   constructor(props) {
       super(props);
       this.dataSource = new ListView.DataSource({
           rowHasChanged: (r1, r2) => r1 !== r2
       })
    }
    renderItem = (rowProps) => {
        const {onSelect} = this.props;
        return <ListViewItem {...rowProps} onSelect={onSelect} />       
    }
    render() {
        const dataSource = this.dataSource.cloneWithRows(this.props.items);
        return (
            <ListView dataSource={dataSource}
                      renderRow={this.renderItem } />)
    }      
}

//ListViewItem
export default ({id, title, onSelect}) => 
   (<Button onPress={() => onSelect(id)}>{title}</Button);