エラー：メソッド "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'が呼び出されたかどうかをテストしようとしています。ここでの問題は、findによって返された私の浅い部品の長さが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」にシミュレート呼び出そうと、それは以下のようにエラーになります

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"/> 

、クエリを要素を識別するために、いくつかの属性を設定します。次に、クラス名や属性名などで区別する必要があります。

イベントを1つの要素でのみシミュレートできます。いくつかの要素に対するクエリは、複数の要素を返すべきではありません。

Answer 3

コードを変更せずに複数のコンポーネントを使用する場合は、酵素APIを使用して、必要なボタンの正しいインデックスを取得します。

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

コンポーネントはテストするものの名​​前で、インデックスは必要な番号です。