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

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-tab”和“ Datepicker”时，finder将返回2个元素。我们无法同时对2个不同的元素执行任何事件（例如点击）。

解决方案： 无论您要访问什么元素，都要使其独特。

示例：设置一些属性以唯一地标识元素

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

并像查询 wrapper.find('[data-test="dateTab1"]')

同样，如果CampaignDateTab组件具有多个Datepicker组件。然后，您必须使用一些类名或属性名等来区分它们。

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

Answer 4

您正在执行一个 for 循环，然后使用datePickers(array) 而不是单个 datePicker。

您应该能够执行以下操作：

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