反应酶找到第二（或第n）节点

我正在用Jasmine Enzyme浅层渲染测试React组件。

为了这个问题的目的在这里简化了...

function MyOuterComponent() {
  return (
    <div>
      ...
      <MyInnerComponent title="Hello" />
      ...
      <MyInnerComponent title="Good-bye" />
      ...
    </div>
  )
}

MyOuterComponent有2个实例，MyInnerComponent我想在每个实例上测试道具。

第一个我知道如何测试。我用find用first...

expect(component.find('MyInnerComponent').first()).toHaveProp('title', 'Hello');

但是，我正在努力测试的第二个实例MyInnerComponent。

我希望像这样的事情可以工作...

expect(component.find('MyInnerComponent').second()).toHaveProp('title', 'Good-bye');

甚至这个...

expect(component.find('MyInnerComponent')[1]).toHaveProp('title', 'Good-bye');

但是，上述两种工作当然都没有。

我觉得我想念显而易见的东西。

但是，当我浏览文档时，没有看到类似的示例。

任何人？

您想要的是.at(index)方法：.at（index）。

因此，以您的示例为例：

expect(component.find('MyInnerComponent').at(1)).toHaveProp('title', 'Good-bye');

如果要测试每个对象上的某些内容，还可以考虑遍历匹配的集合：

component.find('MyInnerComponent').forEach( (node) => {
    expect(node.prop('title')).toEqual('Good-bye')
})

 const component = wrapper.find('MyInnerComponent').at(1); 
 //at(1) index of element 0 to ~

 expect(component.prop('title')).to.equal('Good-bye');