web-dev-qa-db-fra.com

Erreur: La méthode "props" ne doit être exécutée que sur un seul nœud. 2 trouvés à la place

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'));
    }


  });

J'essaie de simuler ma fonction 'changement' et de tester si 'setCampaignDate' est appelée ou non. Le problème ici est que la longueur de mon composant peu profond retourné par find est 2:

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

Lorsque vous essayez d'appeler simuler sur 'datepickers', cela donne une erreur comme ci-dessous:

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

Vous ne savez pas comment simuler des composants ayant des nœuds supérieurs à 1.

reactjschai-enzyme
5
user3725876

La solution pour plusieurs composants sans changer votre code est d'utiliser l'enzyme API pour obtenir le bon index du bouton souhaité.

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

Composant étant le nom de tout ce que vous testez et indexant le nombre souhaité.

9
Boomer Rogers

Problème: Cela signifie que lorsque vous interrogez '.campaign-date-tab' et 'Datepicker', le Finder renvoie 2 éléments. Nous ne pouvons effectuer aucun événement (comme un clic) à la fois sur 2 éléments différents.

Solution: Quel que soit l'élément auquel vous souhaitez accéder, rendez-le unique.

Exemple: définir un attribut pour identifier un élément de manière unique 

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

Et interrogez-le comme wrapper.find('[data-test="dateTab1"]')

Encore une fois si le composant CampaignDateTab a plusieurs composants Datepicker. Ensuite, vous devez les différencier avec un nom de classe ou un nom d'attribut, etc.

Vous pouvez simuler un événement à la fois sur un seul élément. Les requêtes sur certains éléments ne doivent pas renvoyer plusieurs éléments.

2
Uday Sravan K