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

user_3725876 0
Viewed 36653
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'));
    }


  });

I am trying to simulate my 'change' function and trying to test whether 'setCampaignDate' is called or not. The problem here is that the length of my shallow component returned by find is 2:

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

When trying to call simulate on 'datepickers', it gives an error as below:

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

Not sure how to simulate on components having nodes greater than 1.

chai-enzyme reactjs
4 Answers

I think you should add .first().

Something like this:

const selectedCompoent = Wrapper.find(exactlyComponent).first()

In your case:

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

Problem: It means that when you query for '.campaign-date-tab' and 'Datepicker', finder is returning 2 elements. We can't perform any event (like click) at a time on 2 different elements.

Solution: What ever the element that you want to access, make it unique.

Example: set some attribute to identify an element uniquely 

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

And query for it like wrapper.find('[data-test="dateTab1"]')

Again if CampaignDateTab component has multiple Datepicker components. Then you have to differentiate them with some class name or attribute name etc.

You can simulate an event at a time only on one element. Querying for some element should not return multiple elements.

user_18976540

You are doing a for loop which then uses datePickers (array) instead of the singular datePicker.

You should be able to do:

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

user_33630190
Related