2017-12-31 2 views
0

これは、私の反応コンポーネントに返される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を使用する必要があります?

+0

テストで 'data'変数がどのように定義されていますか。 – zerkms

+0

@zerkms投稿を更新しました... – user3142695

答えて

0

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

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

+0

これはjestJSでは機能しません。私の更新されたポストを見てください。おそらくあなたはそれが働いている理由を理解しているかもしれません... – user3142695

+0

@ user3142695効果的にコレクションが暗黙のうちに反応によってラップされるので、それは 'at(0)'と連動しています。 – zerkms

関連する問題