反応レンダー機能のマップ結果をテストするにはどうすればよいですか？

Question

これは、私の反応コンポーネントに返されるDropdown.Item要素の配列を取得する方法です。

render() { 
    const { data } = this.props 

    if (data) { 
    return data.map((item, index) => { 
     return <Dropdown.Item 
     text={item.title} 
     key={index} 
     /> 
    }) 
    } 
    return null 
} 

返された結果をテストしようとしていますが、テストはrecieved.length: 0で失敗します。 私は問題がマップを返すと思います...どうすればそれをテストする必要がありますか？

私のデータがどのように見える

it('should render dropdown items',() => { 
    wrapper = shallow(<Component data={data} />) 
    expect(wrapper.find(Dropdown.Item)).toHaveLength(2) 
}) 

：

[ { _id: '1', title: 'Item 1' }, { _id: '2', title: 'Item 2' } ] 

---

更新

これは私のために働いている：

expect(wrapper.at(0).find(Dropdown.Item)).toHaveLength(2) 

しかし、なぜ私は0123を使用する必要があります？

Answer 1

は、私はあなたがこのような何かを行うことができると思います。..

class Component extends React.Component { 
... 
    render() { 
    const { data } = this.props 
    return (data.map((item, index) => <Dropdown text={item.title} key={index}/>)); 
    } 
} 
class Dropdown extends React.Component { 
... 
    render(){ 
    const {text, key} = this.props; 

    return(
    <div> 
     <li className='test'> 
     {text} 
     </li> 
    </div> 
    ) 
    } 
} 

describe('<MyComponent />',() => { 
    it('renders two <Dropdown /> components',() => { 
    const wrapper = shallow(<Component data={[{ _id: '1', title: 'Item 1' }, { _id: '2', title: 'Item 2' }]} />); 
    expect(wrapper.find('Dropdown').to.have.length(2)); 
    }); 
}); 

使用to.have.length代わりtoHaveLengthの、酵素のドキュメントに refのチェック：

は、酵素のドキュメントからも浅いレンダリングの例を参照してくださいhttp://airbnb.io/enzyme/docs/api/ReactWrapper/find.htmlを：

describe('<MyComponent />',() => { 
    it('renders three <Foo /> components',() => { 
    const wrapper = shallow(<MyComponent />); 
    expect(wrapper.find(Foo)).to.have.length(3); 
    }); 

ref：https://github.com/airbnb/enzyme/blob/HEAD/docs/api/shallow.md