反応成分内の試験方法

Question

私は反応クラス法を酵素で試験しようとしています。メソッドは入力の変更を処理し、状態を設定する必要があります。私は「プロパティを読み取ることができません 'というエラーを取得していますSETSTATE'

class LoginPage extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      username: '', 
      password: '' 
     }; 

     this.handleChange = this.handleChange.bind(this); 

     ... 
    } 

    handleChange(event) { 
     this.setState({[event.target.name]: event.target.value}) 
    } 

    ... 

    return(
     ... 
     <TextField name='username' onChange={this.handleChange} /> 
    ) 

test.js

it('handles change',() => { 
    const spy = sinon.spy(LoginPage.prototype, 'handleChange'); 
    const _wrapper = shallow(<LoginPage />); 

    spy({ 
      event: { 
       target: { 
        name: 'username', 
        value: 'username' 
       } 
      } 
     } 
    ); 

    expect(_wrapper.state().username).to.equal('username'); 
}) 

}）

未定義component.jsの。

Answer 1

私が答える前に、テストを書くのが簡単になる（そしてスパイ/スタブを使いやすくする）いくつかの方法があります。たとえば、 "onChange" propをコンポーネントに渡して、その小道具を使用することができます。

だから、それに答えて、何かに「バインド」されていない関数を呼び出しています。あなたのthis（あなたが作成したスパイは内側）undefinedで、あなたが言うエラー抱えている理由です：

：それを回避するために

Cannot read property 'setState' of undefined

一つの簡単な方法は、「バインドさ」機能を呼び出すことですが

Just notice that you will need to import "TextField" component, in order to execute "find" correctly

import TextField from '../path/to/TextField.jsx'; 

it('handles change',() => { 
    const _wrapper = shallow(<LoginPage />); 

    _wrapper.find(TextField).simulate('change', { 
     target: { 
      name: 'username', 
      value: 'username', 
     }, 
    }); 

    expect(_wrapper.state().username).to.equal('username'); 
}); 

この方法で、simulate('change')は、渡されたパラメータを持つonChangeを呼び出します。この場合、onChangeはthisと正しくバインドされたhandleChangeを呼び出します。