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

Posted 2023-02-21

【中文标题】React Enzyme 找到第二个（或第 n 个）节点

【英文标题】：React Enzyme find second (or nth) node

【发布时间】：2017-02-19 08:09:38

【问题描述】：

我正在测试一个带有 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');

当然，以上都不起作用。

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

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

有人吗？

【参考方案1】：

TL;DR;

将 findAll 与 .at(1)

一起使用

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

【参考方案2】：

如果您要测试某些东西每一个还可以考虑遍历匹配集：

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

【参考方案3】：

你想要的是.at(index) 方法：.at(index)。

所以，对于你的例子：

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

【讨论】：

对我来说，at() 与 findAll() 一起使用，可能与项目的版本有关。

【参考方案4】：

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

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