오류 : "props"방법은 단일 노드에서만 실행됩니다. 2 찾았습니다

Question

it('should call setCampaignDate on click', function() { 
    let spySetCampaign = sinon.spy(wrapper.instance(), 'setCampaignDate'); 
    let datePickers = wrapper.find('.campaign-date-tab').dive().find(Datepicker); 
    assert.equal(datePickers.length, 2); 
    console.log(datePickers); 
    var date = new Date(); 

    for (let index = 0; index < datePickers.length; index++) { 
     datePickers.simulate('change'); 
     sinon.assert.calledOnce(spySetCampaign.withArgs(date, 'startDate')); 
    } 


    }); 

'변경'기능을 시뮬레이트하고 'setCampaignDate'가 호출되는지 여부를 테스트하려고합니다. 여기서 문제는 발견에 의해 반환 나의 얕은 구성 요소의 길이가 2 점이다 :

'Error: Method “props” is only meant to be run on a single node. 2 found instead.'.

:

let datePickers = wrapper.find('.campaign-date-tab').dive().find(Datepicker); 

'datepickers'에 시뮬레이션 전화를 시도, 그것은 다음과 같은 오류를 제공합니다 노드가 1보다 큰 구성 요소를 시뮬레이트하는 방법을 모릅니다.

Answer 1

for 루프를 수행하면 단수 datePicker 대신 datePickers (배열)이 사용됩니다.

당신은 할 수 있어야한다 :

datePickers[index].simulate('change');

Answer 2

문제점 : '.campaign 최신 탭'과 '날짜 선택기'에 대한 쿼리 할 때, 파인더가 반환 그것은 의미 2 개 요소 . 2 가지 요소에 대해 한 번에 클릭과 같은 이벤트를 수행 할 수 없습니다.

솔루션 : 액세스하려는 요소는 무엇이든지 고유하게 만듭니다.

예 : CampaignDateTab 구성 요소는 여러 날짜 선택기의 구성 요소가 다시 경우 wrapper.find('[data-test="dateTab1"]')

처럼 위해 요소 고유

<CampaignDateTab class="campaign-date-tab" data-test="dateTab1"/> 

그리고 쿼리를 식별하기 위해 몇 가지 속성을 설정합니다. 그런 다음 클래스 이름이나 속성 이름 등으로 구분해야합니다.

한 번에 하나의 요소 만 이벤트를 시뮬레이션 할 수 있습니다. 일부 요소를 쿼리하면 여러 요소를 반환하지 않아야합니다.

Answer 3

코드를 변경하지 않고도 여러 구성 요소에 대한 대답은 효소 API를 사용하여 원하는 버튼의 정확한 색인을 얻는 것입니다.

wrapper.find(Component).at(index).simulate('click'); 

구성 요소는 테스트하려는 항목의 이름이고 원하는 색인은 색인입니다.