Reactjs 如何使用酶测试ReactNative Listview项

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

测试

ListView

项的常用方法是什么？例如，在下面的示例中，要测试单击某个项目时，它是否会触发传递id的

onSelect

prop

我目前正在使用

react native mock

，这意味着

ListView

不会呈现任何内容，并且我无法将该项分离到单独的组件中，因为它需要父项的

onSelect

道具

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

导出默认类扩展React.Component{
建造师（道具）{
超级（道具）；
this.dataSource=new ListView.dataSource({
行已更改：（r1，r2）=>r1！==r2
})
}
renderItem=（{id，title}）=>{
const{onSelect}=this.props；
返回onSelect（id）}>{title}；
}
render（）{
const dataSource=this.dataSource.cloneWithRows（this.props.items）；
返回(
)
}      
}

我使用

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

const wrapper=shallow（）；
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 } />)
    }      
}

导出默认类扩展React.Component{
建造师（道具）{
超级（道具）；
this.dataSource=new ListView.dataSource({
行已更改：（r1，r2）=>r1！==r2
})
}
renderItem=（rowProps）=>{
const{onSelect}=this.props；
返回
}
render（）{
const dataSource=this.dataSource.cloneWithRows（this.props.items）；
返回(
)
}      
}

和listview项

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

//ListViewItem
导出默认值（{id，title，onSelect}）=>
（onSelect（id）}>{title}您忘记了按钮元素上的结束标记。谢谢这个Tom。这是一个很好的模式。请注意，这不起作用，因为renderSeparator不能传播属性，因为它不能作为对象传递参数。rowProps是作为对象传递的？我实际上不知道我在做什么，但它现在可以工作了…非常奇怪。谢谢！