react酶找到第二个（或第 n 个）节点

IT技术 reactjs jasmine enzyme
2021-04-29 07:44:18

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

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

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

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

第一个我知道如何测试。我用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');

但当然，以上都不起作用。

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

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

任何人？

4个回答

你想要的是.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');

TL; 博士;

使用findAll和.at(1)

const innerComponent = component.findAll('MyInnerComponent').at(1);
expect(innerComponent).toHaveProp('title', 'Good-bye');
其它你可能感兴趣的问题
上一篇ScrollView 中带有 FlatLists 的选项卡 - 如 Instagram 或 Twitter 个人资料页面 下一篇Redux 不就是美化了全局状态吗？