reactjs - 错误：方法“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');