酵素/反応：特定の子成分を見つける方法

Question

成分の酵素/嫌いユニット試験をしようとしています。特定の子コンポーネントの変更イベントをシミュレートする必要があります（その2つがあります）。

const wrapper = shallow(<CreateAccount />) 
wrapper.find({ name: 'username' }).simulate('change', { target: { value: 'Username' } }) 
wrapper.find({ password: 'password' }).simulate('change', { target: { value: 'Password' } }) 
const state = wrapper.instance().state 
expect(state).toEqual({ username: 'Username', password: 'Password' }) 

しかし、これは、両方の入力コンポーネントを見つけるための正しい方法ではありません...

これは私のコンポーネントの私のレンダリング（）関数がどのように見えるかです：

一般 find()に

render() { 
    return (
    <Form onSubmit={this._onSubmit.bind(this)}> 
     <Input 
     value={this.state.description} 
     onChange={this._onChange.bind(this)} 
     name='username' 
     type='text' 
     placeholder='Username' 
     /> 
     <Input 
     value={this.state.url} 
     onChange={this._onChange.bind(this)} 
     name='password' 
     type='password' 
     placeholder='Password' 
     /> 
     <Button type='submit'> 
     Submit 
     </Button> 
    </Form> 
) 

Answer 1

特定の要素にアクセスするためにat(index)またはfirst()を使用する必要があるため、配列を返します。

http://airbnb.io/enzyme/docs/api/ShallowWrapper/at.htmlあなたのケースでは http://airbnb.io/enzyme/docs/api/ShallowWrapper/first.html

あなたもInputコンポーネントをインポートし、このようにそれらを見つけることができます。

import Input from 'input-component-path' 

... 
wrapper.find(Input).at(0).simulate('change', { target: { value: 'Username' } }) 
wrapper.find(Input).at(1).simulate('change', { target: { value: 'Password' } })