반응 렌더링 기능의지도 결과를 테스트하는 방법은 무엇입니까?

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와 함께 실패합니다. 문제가지도를 반환하고 있다고 생각합니다. 어떻게 테스트해야합니까? 이것은 나를 위해 노력하고 있습니다

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

---

업데이트

: 같은

it('should render dropdown items',() => { 
    wrapper = shallow(<Component data={data} />) 
    expect(wrapper.find(Dropdown.Item)).toHaveLength(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