发现第二个(或第 n 个)节点

我在用茉莉酶浅层渲染法测试一个反应组件。

为了简化这个问题..。

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');

当然，上述两种方法都不起作用。

我觉得我忽略了显而易见的事实。

但是当我查看医生时，我没有看到类似的例子。

有人吗？

77592 次浏览

小开

最佳答案

您需要的是 .at(index)方法: 。在(索引)。

举个例子:

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

小开

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


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

小开

如果您要测试某些事物，每一个还要考虑遍历匹配的集合:

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

小开

;

使用 寻找一切和 。在(1)

const innerComponent = component.findAll('MyInnerComponent').at(1);
expect(innerComponent).toHaveProp('title', 'Good-bye');