如何用酶测试 ReactNative Listview 项目

Question

我正在使用酶来测试我的组件渲染。

测试 ListView 项目的常用方法是什么？例如，在下面的例子中测试当一个项目被点击时，它会触发传递 id 的 onSelect 道具？

我目前正在使用 react-native-mock，这意味着 ListView 不会呈现任何内容，而且我无法将项目分离到单独的组件中，因为它需要 onSelect 属性来自 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

~~我使用~~

完成了这项工作
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);

如何用酶测试 ReactNative Listview 项目

How to test ReactNative Listview item with enzyme

reactjs

react-native

enzyme

react-native-listview