2016-05-19 3 views
3

私は酵素を使ってコンポーネントレンダリングをテストしています。酵素でReactNative Listview項目をテストする方法

ListViewアイテムをテストする通常の方法は何ですか?たとえば、次の例では、アイテムがクリックされたときに、onSelectの小道具がIDを渡すようトリガーしますか?

私は現在ListViewは何もレンダリングしないことを意味しreact-native-mockを使用していますし、それは親から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 } />) 
    }  
} 

答えて

2

私は仕事に見せかけ、実際に私が予想していた何をやっていなかった間、私は私の最初の試みを見つけ

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); 
+0

。このTomに感謝します。その素晴らしいパターン。 – danielbh

+0

renderSeparatorはオブジェクトとしてparamsを渡さないため、プロパティを広げられないため、これは機能しません。 – danielbh

+0

rowPropsはオブジェクトとして渡されますか? https://facebook.github.io/react-native/docs/listview.html – Tom

関連する問題