我正在使用酶来测试我的组件渲染.
测试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);
