반응 효소 두 번째(또는 n번째) 노드 찾기

반응 효소 두 번째(또는 n번째) 노드 찾기

재스민 효소로 리액트 성분을 테스트하고 있어요

이 질문의 목적을 위해 간략하게 설명하면...

function MyOuterComponent() {
  return (
    <div>
      ...
      <MyInnerComponent title="Hello" />
      ...
      <MyInnerComponent title="Good-bye" />
      ...
    </div>
  )
}

MyOuterComponent2개의 인스턴스가 있습니다.MyInnerComponent소품들을 하나씩 테스트해보고 싶어요.

첫 번째는 어떻게 테스트하는지 알아사용하고 있다find와 함께first...

expect(component.find('MyInnerComponent').first()).toHaveProp('title', 'Hello');

하지만, 두 번째 경우를 테스트하는 데 어려움을 겪고 있어요MyInnerComponent.

이런 게 먹히길 바랐는데...

expect(component.find('MyInnerComponent').second()).toHaveProp('title', 'Good-bye');

이거라도...

expect(component.find('MyInnerComponent')[1]).toHaveProp('title', 'Good-bye');

하지만 물론 위의 어느 것도 효과가 없습니다.

당연한 걸 놓치고 있는 것 같아.

하지만 내가 그 문서들을 살펴볼 때 나는 유사한 예를 보지 못했다.

누구라도 있나요?

당신이 원하는 것은.at(index)메서드: .at(index)

예를 들어 다음과 같습니다.

expect(component.find('MyInnerComponent').at(1)).toHaveProp('title', 'Good-bye');

각 항목에서 특정 항목을 테스트하는 경우 일치하는 집합을 통해 반복하는 것을 고려하십시오.

component.find('MyInnerComponent').forEach( (node) => {
    expect(node.prop('title')).toEqual('Good-bye')
})

 const component = wrapper.find('MyInnerComponent').at(1); 
 //at(1) index of element 0 to ~

 expect(component.prop('title')).to.equal('Good-bye');

TL;DR;

.at(1)과 함께 findAll을 사용합니다.

const innerComponent = component.findAll('MyInnerComponent').at(1);
expect(innerComponent).toHaveProp('title', 'Good-bye');

언급URL : https://stackoverflow.com/questions/39966151/react-enzyme-find-second-or-nth-node