反应酶找到第二（或第n）节点 [英] React Enzyme find second (or nth) node

问题描述

我正在测试使用茉莉酶浅层渲染的React组件。

I'm testing a React component with Jasmine Enzyme shallow rendering.

在这里为这个问题而简化...

Simplified here for the purposes of this question...

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

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

MyOuterComponent has 2 instances of MyInnerComponent and I'd like to test the props on each one.

第一个我知道如何测试。我使用 find 和 first ...

The first one I know how to test. I use find with first...

expect(component.find('MyInnerComponent').first()).toHaveProp('title', 'Hello');

但是，我正在努力测试 MyInnerComponent的第二个实例。

However, I'm struggling to test the second instance of MyInnerComponent.

我希望这样的事情行得通...

I was hoping something like this would work...

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

甚至是这个...

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

当然，以上两种方法都没有。

But of course neither of the above work.

我觉得我很想念显而易见的东西。

I feel like I'm missing the obvious.

但是当我浏览 docs 我没有看到类似的示例。

But when I look through the docs I don't see an analogous example.

有人吗？

推荐答案

您想要的是 .at（index）方法：。at（index）。

因此，例如：

expect（component.find（'MyInnerComponent'）。at（1））。toHaveProp（'title'，'再见'）;

这篇关于反应酶找到第二（或第n）节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！