反応コンポーネントテストでクリックをシミュレートするときの状態は未定義です

Question

私のメソッドhandleFormSubmit（）の動作をテストしようとしています。送信がクリックされると、呼び出しが開始されます。私は以下の2行を追加するまで、これはまったく問題ありません。酵素がコンテキストを更新しているか、コンストラクタをコールしていないようですか？

ご迷惑をおかけして申し訳ございません。私はポストを短くしておくためにできることを取り除いた。

フェイルラインは - 状態が未定義

data.username = this.state.username.trim(); 
data.password = this.state.password.trim(); 

成分である：

インポートが '反応' と反応させ;

// Renders login form. 
export default class LoginView extends React.Component { 
    static propTypes = { 
    model: React.PropTypes.object.isRequired, 
    params: React.PropTypes.object.isRequired 
    } 

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

    handleUsernameChange(event) { 
    this.setState({error: false, username: event.target.value}); 
    } 

    handlePasswordChange(event) { 
    this.setState({error: false, password: event.target.value}); 
    } 

    handleFormSubmit(event) { 
    event.preventDefault(); 

    let failureMsg = {}, 
     data = this.props.params, 
     options = { 
     success: (response) => { 
      if (response.attributes.successfulLogin) { 
      window.location = this.props.params.redirect + 
       '?authenticationToken=' + response.get('authenticationToken') + 
       this.createParams(); 
      } else { 
      throw Error('Helpful error'); 
      } 
     }, 
     error:() => { 
      throw Error('Helpful error'); 
     } 
     }; 

    // PROBLEM LINES! 
    data.username = this.state.username.trim(); 
    data.password = this.state.password.trim(); 

    if (this.state.username && this.state.password && this.state.terms) { 
     this.props.model.save(data, options); 
    } else { 
     this.setState({ 
     error: true, 
     errorMessage: !this.state.username || !this.state.password ? LoginConstants.LOGIN.BLANK_INPUT : LoginConstants.LOGIN.BLANK_TERMS 
     }); 
    } 
    } 

    render() { 
    return (
     <form> 
     <input type="text" ref="username" id="username" placeholder="Customer ID" onChange={this.handleUsernameChange.bind(this)} maxLength={75} value={this.state.username} /> 
     <input type="password" ref="password" id="password" placeholder="Password" onChange={this.handlePasswordChange.bind(this)} maxLength={75} value={this.state.password} /> 
     <button type="submit" ref="login" id="login" className="Button Button--primary u-marginT-md" onClick={this.handleFormSubmit.bind(this)}>LOGIN</button> 
     </form> 
    ); 
    } 
} 

ユニットテスト：

import React from 'react'; 
    import { mount } from 'enzyme'; 
    import LoginView from './LoginView'; 

    describe('Login screen',() => { 
    let mountedComp; 

    beforeAll(() => { 
     mountedComp = mount(<LoginView />); 
    }); 

    it('should show error if submitted blank',() => { 
     mountedComp.instance().state = { 
     username: '', 
     password: '' 
     }; 

     expect(mountedComp.find('#js-errorMessage').length).toEqual(0); 
     mountedComp.ref('login').simulate('click', { preventDefault:() => undefined, state: {} }); 
     expect(mountedComp.find('#js-errorMessage').length).toBeGreaterThan(0); 
    }); 
    }); 

Answer 1

私はJSXオブジェクトに手動で私のparamsを渡すことで、この問題を回避するために管理しました。私はこれが適切なテスト方法であるかどうかはわかりませんが、今はうまくいきました。

<LoginView model={model} params={params} /> 

Answer 2

はあなたの「this.stateのように見える：範囲外である

var _self = this; 

を追加することを検討して

_self.state.username.trim(); 
_self.state.password.trim(); 

Answer 3

が結合してみてくださいを使用します。あなたのonClick機能は です<form onClick={this.handleFormSubmit.bind(this)} >

Answer 4

は、私は、問題の原因は、この非常に並んで横たわっていたかもしれないと思う：JavaScriptで

let data = this.props.params 

それが値ではなく、参照することによりdataオブジェクトにthis.props.paramsオブジェクトをコピーしません。 dataとthis.props.paramsの同じ参照を設定します。つまり、dataの内容を変更すると、this.props.paramsに反映され、その逆も同様です。 したがって、実際にはpropsに変更することはできません。

たとえば、浅いコピーを作成する必要があります。そのように：

let data = Object.assign({}, this.props.params)