React Enzyme找到第二个(或第n个)节点

Question

我正在使用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');

但当然上述工作都没有.

我觉得我错过了显而易见的事.

但是,当我查看文档时,我没有看到类似的例子.

任何人？

Answer 1

你想要的是.at(index)方法:http://airbnb.io/enzyme/docs/api/ShallowWrapper/at.html.

所以,举个例子:

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

Answer 2

如果您要对每一项进行某些测试，还可以考虑遍历匹配的集合：

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