React Enzyme找到第二个（或第n个）节点-Java 学习之路

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

但当然上述工作都没有 .

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

但是，当我浏览docs时，我没有看到一个类似的例子 .

任何人？

3 回答

6

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

所以，举个例子：

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

回复于 2024-05-19T12:23:49+08:00

如果你测试某些东西 on each one 也考虑迭代匹配的集合：

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

回复于 2024-05-19T12:23:49+08:00

141

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

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

回复于 2024-05-19T12:23:49+08:00

React Enzyme找到第二个（或第n个）节点

3 回答

相关问题