web-dev-qa-db-ja.com

React Enzyme find 2番目（またはn番目）のノード

Jasmine Enzymeの浅いレンダリングでReactコンポーネントをテストしています。

この質問の目的のためにここで簡略化...

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

MyOuterComponentにはMyInnerComponentの2つのインスタンスがあり、それぞれの小道具をテストしたいと思います。

最初にテストする方法を知っています。 findでfirstを使用しています...

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

ただし、MyInnerComponentの2番目のインスタンスをテストするのに苦労しています。

私はこのような何かが機能することを望んでいた...

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

またはこれでさえ...

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

しかし、もちろん上記のどちらも機能しません。

明らかなことを見逃しているような気がします。

しかし、 docs を見ると、類似した例は見当たりません。

誰でも？

reactjsjasmineenzyme
98
sfletche

欲しいのは.at(index)メソッド： http://airbnb.io/enzyme/docs/api/ShallowWrapper/at.html です。

したがって、あなたの例では：

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

155
tom

特定のことをテストする場合on eachまた、一致したセットを反復処理することも検討してください。

component.find('MyInnerComponent').forEach( (node) => {
    expect(node.prop('title')).toEqual('Good-bye')
})
9
Frank Nocke
 const component = wrapper.find('MyInnerComponent').at(1); 
 //at(1) index of element 0 to ~

 expect(component.prop('title')).to.equal('Good-bye');
1
D V Yogesh