Wie kann ich ein Kartenergebnis einer reaktiven Renderfunktion testen?

Question

So erhalte ich ein Array von DropDown.Item-Elementen, die in meiner react-Komponente zurückgegeben werden.

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

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

Jetzt versuche ich, für das zurückgegebene Ergebnis zu testen, aber mein Test nicht mit recieved.length: 0. Ich denke, das Problem ist eine Karte zurückgeben ... Wie muss ich dafür testen?

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

Meine Daten wie folgt aussieht:

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

---

aktualisieren

Dies ist für mich arbeiten:

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

Aber warum habe ichverwenden?

Answer 1

Ich glaube, Sie so etwas tun könnte ..

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

Verwendung to.have.length statt toHaveLength, überprüfen docs Enzym ref: http://airbnb.io/enzyme/docs/api/ReactWrapper/find.html

siehe auch Shallow Rendering Beispiel von Enzym docs :

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