错误:方法“ 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：

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

尝试在" datepickers"上调用模拟时，它会出现一个错误，如下所示：

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

不确定如何在具有大于1的节点的组件上模拟。

Answer 1

在不更改代码的情况下的多个组件的答案是使用酶API获取所需的按钮的正确索引。

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

组件是您要测试的任何内容的名称，而索引是您想要的数字。

Answer 2

我认为您应该添加.first()。

类似的东西：

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

在您的情况下：

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

Answer 3

问题：这意味着，当您查询" .campaign-date-tate-tab"one_answers" datepicker"时，Finder将返回2个元素。我们无法在2个不同的元素上一次执行任何事件（例如单击）。

解决方案：您要访问的元素，使其独特。

示例：设置一些属性以识别一个元素唯一

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

和查询它，例如 wrapper.find('[data-test="dateTab1"]')

再次，如果竞选datetab组件具有多个datepicker组件。然后，您必须使用某些类名称或属性名称等区分它们。

您只能在一个元素上一次模拟事件。查询某些元素不应返回多个元素。

Answer 4

您正在做一个用于循环的，然后使用 datePickers（array）而不是单数datepicker。

您应该能够做：

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