酵素が要素の最初のインスタンスを見つけて選択します

Question

私は3つのボックスの最初の部分をクリックしてみようとしています。

私のコードは、この

const Boxes = (props) => { 

    return (
    <div className="container"> 
     <div onClick={props.showMessage} className="box">One</div> 
     <div onClick={props.showMessage} className="box">Two</div> 
     <div onClick={props.showMessage} className="box">Three</div> 
    </div> 
    ); 
} 

のように見える反応それから私の冗談のコードは、この

it("shows a message if Box One is selected",() => { 
    let wrapper = shallow(
     <Boxes 
      {...props} 
     /> 
    ); 

    wrapper.find('.box').simulate('click'); 
    expect(wrapper.contains('Box One Clicked')).toEqual(true); 

}); 

のように見えるこれは私に次のエラーメッセージ

方法「をシミュレート」を与えるだけです単一のノード上で実行されることを意味します。 3代わりに が見つかりました。

次に、私が次のことを試みるとどちらもうまくいかず、テストに失敗します。

wrapper.find('.box').first().simulate('click'); 
expect(wrapper.contains('Box One Clicked')).toEqual(true); 

Answer 1

複数.boxの項目がありますが、あなたは、それらのいずれかを選択しなければならない最初のものを言う：

wrapper.find('.box').at(0).simulate('click');