reactjs – 如何用酶测试ReactNative Listview项目

发布时间：2020-12-15 05:03:50 所属栏目：百科来源：网络整理

导读：我正在使用酶来测试我的组件渲染. 测试ListView项目的常用方法是什么？例如,在下面的例子中测试单击一个项目时,它会触发onSelect prop传递id吗？我目前正在使用react-native-mock,这意味着ListView不会呈现任何内容,我无法将项目分成单独的组件,因为它需要

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

测试ListView项目的常用方法是什么？例如,在下面的例子中测试单击一个项目时,它会触发onSelect prop传递id吗？

我目前正在使用react-native-mock,这意味着ListView不会呈现任何内容,我无法将项目分成单独的组件,因为它需要来自父级的onSelect prop.

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 } />)
    }      
}

我用这个工作了

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 } />)
    }      
}

和listview项目

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!